Blocks

Production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.

PRO

feature155

Feature Comparison Table

Simple 3-column comparison table with feature names and check/cross icons. Essential for plan comparison, feature tier table, or pricing comparison.

PRO

feature157

Split Image with Bullet List

Two-column layout with left text content and right image, reversible. Perfect for feature explanation, product story, or benefit illustration.

PRO

feature158

Notification Status List

Vertical stacked notification-style list with items, descriptions, and status badges. Great for updates feed, changelog, or activity log display.

PRO

feature160

Centered Icon Cards Grid

4-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid.

PRO

feature161

Icon Row Feature Grid

3-column grid of horizontal feature items with icon and text side by side. Clean layout for capability highlights and feature overviews.

PRO

feature162

Numbered Steps Grid

3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.

PRO

feature163

Bento Feature Grid

Asymmetric bento-style grid with a highlighted hero card spanning full width and smaller feature cards below. Great for showcasing a primary feature alongside supporting capabilities.

PRO

feature164

Scroll-Spy Sticky Sidebar Feature

Sticky sidebar navigation with scroll-spy tracking. Left menu highlights the active section as users scroll through feature cards with images. Uses IntersectionObserver for real-time active state.

PRO

feature165

Horizontal Scroll Snap Cards

Horizontally scrollable feature cards with CSS scroll-snap. Cards scroll on mobile/tablet and flow as a regular grid on desktop. Each card has icon, title, description, and optional link.

PRO

feature166

Spotlight Glow Card Grid

Interactive card grid with mouse-tracking radial gradient glow effect. Each card illuminates with a primary-colored spotlight that follows the cursor. Premium hover aesthetic inspired by Stripe and Vercel.

PRO

feature167

Terminal CLI Feature Showcase

Features presented as terminal commands with outputs inside a realistic terminal window. Dark terminal aesthetic with syntax-colored commands, flags, and a blinking cursor. Unique developer-focused design.

PRO

feature168

Before/After Comparison Toggle

Interactive toggle that switches between two sets of feature items with staggered fade-in animation. Pill-style toggle button with distinct visual states for before and after. Great for product comparisons.

PRO

feature169

Infinite Marquee Feature Pills

Auto-scrolling marquee rows of feature pills with icons. Alternating scroll directions, hover to pause, and edge fade gradients. Eye-catching way to showcase many capabilities at once.

PRO

feature170

Expandable Accordion Cards with Image

Click-to-expand feature cards with smooth grid-rows animation. Each card reveals a detailed description and preview image when opened. Only one card expanded at a time. Compact yet information-rich.

PRO

feature171

Kanban Roadmap Board

Product roadmap presented as a kanban board with three swim lanes: Shipped, In Progress, and Planned. Each feature card has an icon, title, and status-colored tag. Transparent product development view.

PRO

feature172

Command Palette Feature Showcase

Features displayed inside an interactive command palette UI with live search filtering, grouped results, keyboard shortcuts, and hover states. Inspired by macOS Spotlight and VS Code command palette.

PRO

feature173

Feature Card Carousel with Image Crossfade

Single-card carousel with crossfading images, arrow navigation, and dot progress indicators. Each slide shows a full-width image with icon, title, and description below. Click or navigate to browse features.

PRO

feature174

Interactive Code Snippet Showcase

Features paired with real code examples inside a code editor UI. Left sidebar lists features, right panel shows the corresponding code with filename tab and syntax styling. Developer-focused showcase.

PRO

feature175

Interactive Tech Stack Layers

Platform architecture visualized as color-coded horizontal layers. Each layer is clickable and expands to reveal details. Unique layer numbering and distinct colors per tier. Great for showcasing infrastructure and architecture.

PRO

feature176

Empty State

A simple empty state section using the Empty component with icon, title, description, and a call-to-action button. Includes standard badge, heading, and description header.

FREE

feature177

Feature 177

Feature cards with 3+2 bento layout and flush media

FREE

feature178

Feature 178

Two-column benefits section with sticky left content and scrollable timeline

FREE

feature179

Feature 179

Two-column layout with sticky stats and scrollable feature cards

FREE

feature180

Feature 180

Two-column layout with sticky image and scrollable feature cards