Block Library

Email and password login form with social sign-in options

Registration form with name, email, password fields and terms agreement

Forgot password form with sent confirmation state

6-digit OTP input with auto-focus and backspace navigation

Passwordless login with email magic link and sent confirmation

User profile settings with avatar, bio, and social links

Notification preferences with email, push, and schedule settings

Billing settings with plan details, payment method, and history

Security settings with password change, 2FA toggle, and active sessions

Full-featured data table with sort, filter, pagination, row selection, and actions

KPI stats dashboard with stat cards, area chart, donut chart, bar chart, and line chart

Area chart with gradient fill showing monthly revenue with two series

Grouped bar chart showing quarterly sales comparison across platforms

Multi-line chart with dot indicators showing daily active users

Pie chart with legend showing traffic sources breakdown

Donut chart with center metric showing budget allocation by department

Compact inline sparkline charts for KPI cards with area, line, and bar variants

Collapsible sidebar with expandable menu groups, user footer, and resize rail

Icon-only rail sidebar that expands on hover with tooltip labels

Three-level nested sidebar navigation for documentation or admin panels

E-commerce product cards with ratings, color swatches, badges, wishlist, and add-to-cart

Filterable and sortable product listing grid with category, price, and stock filters

Product quick-view modal with image gallery, size and color selectors, and details accordion

Slide-out shopping cart drawer with quantity controls, item removal, and order totals

Multi-section checkout form with shipping address, payment method, and order summary

Drag-and-drop kanban board with four columns, task cards, tags, and assignees

Toast notification variants showcase with success, error, warning, action, and promise toasts

Notification center with read/unread states, type-based icons, tab filters, and bulk actions

A placeholder block for testing the registry pipeline.

Button with gradient, shimmer, glow, and pulse animation variants.

Glassmorphism card with frosted, subtle, colored, and elevated backdrop-blur variants.

Badge with gradient color variants — sunrise, ocean, forest, sunset, and neon.

Keyboard shortcut display component for showing key combinations inline.

Dashboard stat/KPI card with trend indicators, change percentages, and variant styles.

Enhanced tooltip with arrow support, slide/fade animations, and styled variants.

Animated floating label input with peer CSS transitions

Search input with leading icon, clear button, and loading state

One-time password input with individual digit slots and auto-advance

Stacked overlapping avatars with overflow indicator

SVG circular progress indicator with animated fill and color variants

Vertical timeline with dot markers, connector lines, and icon support

Animated list with staggered fade-in animations

Enhanced accordion with bordered, separated, and flush variants

Enhanced tabs with underline, pill, and segmented variants

A sticky navbar with scroll-triggered backdrop blur, mobile Sheet menu, and semantic color tokens.

A transparent navbar that transitions to a solid background on scroll, with mobile Sheet menu.

A full-width mega menu navbar with NavigationMenu dropdowns, accordion mobile nav, and Sheet drawer.

A pill-shaped floating navbar with rounded corners, mobile Sheet menu, and semantic color tokens.

A bordered navbar with search input, avatar dropdown, badge notifications, and mobile Sheet menu.

A sidebar-style navbar with avatar user menu, separator dividers, and mobile Sheet drawer.

A minimal footer with logo, copyright text, and a small set of navigation links.

A multi-column footer with grouped navigation links, logo, and separator divider.

A footer with an email newsletter signup form, input field, and separator divider.

A footer focused on social media links with icon buttons and separator divider.

A comprehensive sitemap footer with categorized links, badge labels, and separator divider.

A fullscreen hero section with centered content, badge label, and CTA buttons.

A split-layout hero with text on one side and an image or graphic on the other, with badge and CTA.

A hero section with an animated gradient background, bold headline, and CTA buttons.

A hero section with a looping video background, overlay, headline, and CTA buttons.

A hero section with a decorative illustration or SVG graphic, badge, headline, and CTA buttons.

A bento-grid style hero section with feature cards, badge label, and CTA buttons.

A hero section with an animated typewriter text effect, badge label, and CTA buttons.

A hero section with an animated particle canvas background, badge label, and CTA buttons.

A responsive grid of feature cards with icons, titles, and descriptions.

A bento-grid layout showcasing features with varied card sizes and visual hierarchy.

A horizontal row of icon-led feature highlights with short labels and descriptions.

Alternating left/right feature sections with image, badge, heading, and description.

A side-by-side feature comparison table with checkmarks and cross indicators.

An interactive spotlight feature section with mouse-following highlight effect on cards.

A set of elevated feature cards with icon, title, description, and hover effects.

A masonry-style layout of feature cards with varying heights and visual interest.

A classic pricing section with tiered plan cards, feature lists, and CTA buttons.

A pricing section with a monthly/annual billing toggle switch and dynamic price display.

A detailed pricing comparison table showing features across all plans.

A horizontal pricing layout with plans displayed side by side in a single row.

A clean minimal pricing section with a single highlighted plan and simple feature list.

An enterprise-focused pricing section with custom quote CTA, feature highlights, and badge tiers.

A responsive grid of testimonial cards with avatar, name, role, and quote.

A sliding carousel of testimonial cards with prev/next navigation buttons.

A masonry-column layout of testimonial cards with varying quote lengths.

An auto-scrolling marquee of testimonial cards for continuous social proof display.

A large featured testimonial section with a prominent quote, author details, and supporting cards.

A video testimonials section with play-button cards, thumbnails, and quote overlays.

A classic centered CTA section with bold heading, description, and two action buttons.

A two-column split CTA with text and benefits on the left, visual placeholder on the right.

A full-width gradient CTA section with primary background and inverted button styling.

A contained card CTA centered on a muted background with heading and action button.

A slim horizontal announcement banner with text and dismiss button.

A standard FAQ section using shadcn Accordion with collapsible question-answer pairs.

A two-column FAQ grid layout with questions and answers in a clean open format.

A single-column centered FAQ list with large question text and separator dividers.

A FAQ list with a sticky contact CTA sidebar card for additional support.

Animated number counters that count up on scroll using IntersectionObserver.

Horizontal bar chart stats with CSS-width progress bars and percentage labels.

A 4-cell stat grid with icons, large numbers, and descriptive labels.

A vertical timeline of company milestones with dates, titles, and stats.

A static grid of logo placeholders with hover opacity transitions.

An auto-scrolling CSS marquee of logo placeholders with gradient edge fades.

A logo cloud with trust headline, category badges, and logo grid.

A large-format logo grid with card containers and hover opacity effect.

An asymmetric bento grid with 5 cells of varying column and row spans.

A magazine-style bento grid with image placeholder areas and text overlays.

A dark-themed inverted bento grid using bg-foreground and text-background tokens.

A minimal border-only bento grid with zero-gap shared borders and editorial typography.

Full SaaS landing page with gradient hero, animated feature grid, social proof marquee, pricing toggle, and email CTA.

Clean, typography-driven SaaS landing page with maximum whitespace, trust signals, and understated elegance.

Dramatic dark-themed SaaS landing page with glow effects, neon accents, bento grid features, and enterprise-grade pricing.

Full analytics dashboard with collapsible sidebar, KPI cards, Recharts area/bar charts, and a filterable data table.

CRM dashboard with contacts table, deal pipeline kanban, activity feed, and collapsible sidebar navigation.

Project management dashboard with kanban task board, project progress cards, team overview, and collapsible sidebar.