Blocks

Blocks are pre-built components that you can use to quickly build beautiful websites. Each block is designed to be modular, customizable, and responsive.

Available Blocks

Headers

Clean and modern header components for your website navigation. View Headers →

Hero Sections

Eye-catching hero sections to showcase your product or service. View Hero Sections →

Features

Highlight your product features with various layouts. View Features →

Client Logos

Display your client logos in a clean and organized way. View Client Logos →

Stats

Showcase important metrics and achievements. View Stats →

FAQ

Answer common questions with expandable sections. View FAQ →

Pricing

Present your pricing plans effectively. View Pricing →

Call to Action

Convert visitors with compelling CTA sections. View CTA →

Footers

Complete your website with well-structured footers. View Footers →

Sidebars

Navigation sidebars for web applications and dashboards. View Sidebars →

Authentication

Sign in and sign up forms with various styles. View Authentication →

Testimonials

Showcase customer feedback and social proof. View Testimonials →

Bento Grid

Modern grid layouts for featuring content. View Bento Grid →

Contact Forms

User-friendly contact forms with multiple layouts. View Contact Forms →

Using Blocks

Each block is a React component that you can import and use in your project:

import { ModernHero } from "@/components/blocks/Hero";
import { GridFeatures } from "@/components/blocks/Features";
import { ModernFooter } from "@/components/blocks/Footer";
 
export default function Home() {
  return (
    <>
      <ModernHero />
      <GridFeatures />
      <ModernFooter />
    </>
  );
}

Customization

All blocks are built with Tailwind CSS and can be customized using props or by modifying the source code. Each block's documentation includes detailed information about available props and customization options.

Best Practices

1. Choose blocks that match your website's style
2. Maintain consistent spacing between blocks
3. Use complementary color schemes
4. Ensure responsive behavior works well
5. Keep content concise and focused
6. Test interactions on all devices
7. Optimize images and media
8. Follow accessibility guidelines