IC Blocks Documentation

A comprehensive library of 3,241+ professionally designed TypeScript React components for building modern websites. Built with Next.js, Tailwind CSS, and shadcn/ui.

Quick Start

1. Import a component

import { HeroCenteredSimple } from "@/components/blocks/heroes"

2. Use it in your page

<HeroCenteredSimple
  headline="Build faster"
  primaryCTA={{ label: "Get Started", href: "/signup" }}
/>

3,241+

Components

Browse Components

Navigation

Navbars, mega menus, sidebars, and mobile navigation

Heroes

136

Landing page heroes, split layouts, and page headers

Features

Feature grids, bento layouts, and comparison tables

Pricing

Pricing tables, tier cards, and calculators

Testimonials

Customer quotes, reviews, and social proof

CTA

Call-to-action sections and conversion blocks

FAQ

FAQ accordions, grids, and searchable layouts

Footers

Multi-column footers and CTA footers

Contact

Contact forms, maps, and booking widgets

Blog

Blog grids, featured posts, and article layouts

Team

Team member grids and profile cards

Stats

Statistics, metrics, and counter animations

Logos

Logo clouds and trust badge displays

Email capture forms and subscription blocks

Banners

Announcement bars and notification banners

Careers

Job listings and department grids

Content

Article layouts and rich text sections

Promotions

Sale banners, coupons, and special offers

Onboarding

Welcome flows, getting started guides, and tours

Modals

Dialogs, drawers, and command palettes

Empty States

Placeholder states for empty content

Alerts

Alert notifications and toast messages

Loading States

Spinners, skeletons, and progress bars

Auth Pages

Error Pages

404, 500, and maintenance pages

Tables

Sortable, filterable, and paginated data tables

Tabs

Tab navigation and content switching

Pagination

Page navigation and load more patterns

Breadcrumbs

Navigation breadcrumb trails

Drawers

Slide-out panels and navigation drawers

File Uploaders

Dropzones, previews, and progress uploads

Progress Steps

Wizards, steppers, and progress indicators

Dashboard Layouts

App layouts with sidebars and navigation

Settings Pages

Settings interfaces and preference panels

Activity Feeds

Timelines, notifications, and activity logs

Comments

Comment threads and discussion sections

Rating

Star ratings, reviews, and feedback

Social Buttons

OAuth buttons and app store badges

Legal

Terms, privacy, and cookie policy pages

Notifications

Alerts, toasts, and notification panels

Forms

Form layouts, inputs, and validation

Dashboards

Dashboard layouts and analytics views

E-commerce

Product cards, carts, and checkout flows

Profiles

User profiles, cards, and account pages

Reviews

Review cards, ratings, and testimonials

Search

Search bars, filters, and results

Popups

Modals, popovers, and slide-ins

Menus

Dropdowns, context menus, and selects

Cards

Content cards and card layouts

Buttons

Button styles, groups, and variants

Avatars

User avatars, stacks, and badges

Badges

Status badges, labels, and tags

Skeletons

Loading skeletons and placeholders

Tooltips

Tooltips, popovers, and hints

Progress

Progress bars, rings, and indicators

Dividers

Content dividers and separators

Timeline

Timelines and history views

Maps

Map integrations and location displays

Countdown

Countdown timers and event dates

Social Proof

Trust badges, customer counts, and logos

Portfolio

Project showcases and galleries

Services

Service offerings and packages

Case Studies

Case study showcases and success stories

About

About sections and company info

Benefits

Benefits, advantages, and value props

Process

Process steps and how it works

Integrations

Integration showcases and partner logos

Comparison

Feature comparisons and vs sections

Product Showcase

Product highlights and feature tours

Trust

Trust signals and credibility builders

Social

Social feeds and sharing widgets

Video

Video players and media embeds

Media

Galleries, carousels, and media displays

Grids

Grid layouts and masonry patterns

Usage Guide

Common Props Pattern

interface BlockProps {
  // Content
  headline: string
  subheadline?: string

  // CTAs
  primaryCTA: { label: string; href: string }
  secondaryCTA?: { label: string; href: string }

  // Styling
  className?: string

  // Media
  image?: { src: string; alt: string }
}

Recommended Page Structure

<NavbarSimpleLeft />      // Navigation
<HeroCenteredSimple />    // Hero section
<LogoCloudSimple />       // Social proof
<FeatureGrid3Col />       // Features
<TestimonialCarousel />   // Testimonials
<PricingThreeTier />      // Pricing
<FAQAccordion />          // FAQ
<CTASimple />             // Call to action
<Footer4ColStandard />    // Footer

Fully Responsive

Every component is mobile-first and tested across all screen sizes.

Copy & Paste

Simply import and use. No complex configuration required.

Well Documented

TypeScript interfaces and JSDoc comments for every component.