114 + Components .

Button

Solid, outline, ghost, and destructive variants with icon and loading state support.

#action#cta#form

Marquee

Infinite-scrolling row of children — logos, testimonials, badges. Pure CSS, fade edges, pause-on-hover.

#marquee#scroll#logos

Rating

Interactive 0..N star rating with half-step support and full keyboard control.

#rating#stars#review

Price Tag

Formatted currency price with optional compare-at strikethrough and discount pill.

#commerce#price#currency

#commerce#quantity#stepper

Quantity Stepper

Increment / decrement quantity control with min/max clamping and keyboard support.

#commerce#variant#options

Variant Picker

Single-select product-option swatches (grind, size, color) with selected + out-of-stock states.

Cart Line Item

Cart row with thumbnail, title, variant, price, quantity stepper, and remove action.

#commerce#cart#checkout

#commerce#empty-state#cart

Empty Cart

Bespoke empty-cart state with icon, message, and continue-shopping CTA.

QR Code

Theme-aware QR code generator with adjustable size, error-correction level, and optional center logo.

#qr#generator#url

Code Block

Syntax-highlighted code preview powered by Shiki, with copy button, line numbers, and line highlights.

#code#syntax#shiki

#comparison#slider#before-after

Comparison

Before / after image slider with horizontal or vertical orientation and full keyboard support.

Avatar

User avatar with image, fallback initials, and optional status indicator.

#user#profile#identity

Badge

Status and category labels in default, secondary, destructive, and outline variants.

#label#tag#status

Card

Composable card with header, title, description, content, and footer slots.

#container#surface#panel

Progress

Progress bar for task completion, upload progress, and loading states.

#loading#status

Separator

Horizontal or vertical visual divider.

#divider#hr

Avatar Group

Stacked overlapping avatars with overflow count for team and member lists.

#user#avatar#group

#logos#marquee#social-proof

Logo Carousel

Auto-scrolling logo strip for marketing social-proof sections.

Text input field with full HTML input attribute support and accessible labeling.

#form#text#field

#navigation#tabs#sections

Tabs

Accessible tabbed interface built on Radix UI Tabs with keyboard navigation.

Skeleton

Layout-mirroring skeleton loaders for async content — never plain spinners.

#loading#placeholder#ux

Dialog

Accessible modal dialog with focus trap, animation, and portal rendering.

#modal#overlay#popup

Texture Card

Premium textured card surface with subtle gradient layers — for hero blocks and stat cards.

#card#texture#premium

Checkbox

Accessible checkbox with indeterminate state and label support.

#form#toggle

Switch

Toggle switch for boolean settings with smooth animation.

#toggle#boolean#form

Slider

Range slider with draggable handle and configurable min/max/step.

#range#form

Radio Group

Single-choice radio button group with label, helper text, and disabled states.

#form#radio#choice

Tooltip

Hover tooltip with configurable delay, placement, and content.

#hint#helper

Popover

Floating popover with configurable placement and focus management.

#overlay#floating

Sheet

Slide-in panel from any edge with backdrop overlay.

#drawer#panel#sidebar

Select

Dropdown select with options, groups, search, and full keyboard navigation.

#dropdown#form

#autocomplete#search#form

Combobox

Autocomplete combo box with searchable options and keyboard navigation.

Date Picker

Calendar-based date picker with input field and range selection support.

#date#calendar#form

#validation#react-hook-form

Form

Form primitives integrated with React Hook Form and Zod schema validation.

File Upload

Drag-and-drop file upload with preview, validation, and progress.

#upload#file#drag-drop

Field

Label + input + helper / error wrapper — the building block for every form row.

#form#field#label

Floating Label Input

Label sits inside the field at rest, floats up + shrinks on focus or when filled. Cross-platform parity API.

#form#label#animation

Password Input

Password field with show/hide toggle and accessible labeling.

#password#form#security

Search Input

Search-styled input with icon, clear button, and keyboard handling.

#search#form#input

Step Form

Multi-step form pattern with progress indicator and per-step validation.

#form#wizard#multi-step

Array Field

Dynamic array form field for repeating row inputs with add / remove controls.

#form#array#dynamic

Object Field

Nested object form section with grouped fields and collapsible state.

#form#nested#object

Auto Form

Schema-driven auto-generated form from a Zod schema — labels, helpers, and validation.

#form#schema#zod

Color Picker

Inline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.

#color#picker#form

#navigation#breadcrumb#hierarchy

Breadcrumb

Path-style hierarchy navigation with separators and overflow handling.

Hotkey Badge

Compact keyboard shortcut chip — ⌘K, ⇧⌘P, etc.

#keyboard#shortcut#kbd

Hotkeys

Keyboard shortcut reference list grouped by section.

#keyboard#shortcut#help

Stat

KPI metric card with trend indicator, icon, and period comparison. Group with StatGroup.

#kpi#metric#analytics

Data Table

Paginated, searchable data table with sortable columns and loading state.

#table#sort#filter

Property List

Key-value metadata display for detail panels and settings.

#metadata#details#info

Timeline

Chronological event list with icons, connectors, and timestamps.

#events#history#log

Persona

User identity card combining avatar, name, role, and status.

#user#profile#identity

Icon Badge

Iconographic status badge with color tokens — for activity feeds and notifications.

#icon#badge#status

Command Item

Single-row primitive for command menus — leading icon, label, hotkey badge.

#command#menu#cmdk

Data Grid

Advanced data grid with row selection, column visibility, and virtual scrolling.

#table#tanstack#virtual

Empty State

Illustration + heading + call-to-action for empty data views.

#empty#placeholder#zero

#chart#recharts#analytics

Area Chart

Smooth gradient area chart built on Recharts with series, tooltip, and legend.

Bar Chart

Grouped and stacked bar chart built on Recharts with custom tooltip.

#chart#recharts#bar

Line Chart

Multi-series line chart with dot markers, legend, and tooltip.

#chart#recharts#line

Sparkline

Compact inline trend chart for embedding in stat cards and tables.

#chart#mini#trend

Heatmap

Cell-grid heatmap with color ramp legend — usage, density, and correlation matrices.

#chart#heatmap#recharts

Bar List

Tremor-style ranked bar list with values and optional links — top sources, top pages.

#chart#ranked#list

Activity Heatmap

GitHub-style yearly activity contribution grid with hover tooltips.

#chart#calendar#github

Beacon

Pulsing onboarding beacon dot for highlighting new features and call-to-action targets.

#tour#onboarding#hint

#onboarding#tour#walkthrough

Tour

Step-by-step product tour overlay with anchored tooltips and progress indicator.

#alert#notification#status

Banner

Alert banner with info, success, warning, error, and neutral variants plus dismiss.

Loading Overlay

Full-area blocking spinner overlay for async views — drop-in for any container.

#loading#async#blocking

Stepper

Multi-step progress indicator for forms, onboarding, and wizards.

#wizard#steps#onboarding

#notification#sonner#alert

Toast

Stacked toast notifications with success / error / info / warning variants and actions.

#navigation#sidebar#shell

App Shell Layout

Full composable app shell with sidebar, navbar, page header, and body slots.

Split Page

Two-panel layout with list and detail panes for email/file browsers.

#list#detail#layout

Stack

Flex-based HStack and VStack layout primitives with gap, align, and justify.

#flex#layout#spacing

Page Layout

Page shell with header, actions, and body — for settings, forms, and dashboards.

#page#header#shell

Container

Width-constrained content container with sm / md / lg / xl size variants.

#container#width#layout

Resize Box

Drag-handle resizable panel container — for split panes and adjustable sidebars.

#resize#panel#split

Structured List

Sectioned settings-style list with icons, descriptions, and right-side content.

#settings#list#menu

Bare List

Minimal unstyled list primitive — for when you want a list without ornamentation.

#list#simple#minimal

Project Grid

Card grid for project listings — title, description, metadata, and action menu.

#grid#projects#cards

Media Grid

Image / media tile grid with hover details and aspect-ratio preserved.

#grid#media#gallery

#tree#hierarchy#file-explorer

Tree

Recursive expandable tree view with selection, drag-reorder, and virtualization for 1000+ nodes.

#calendar#events#scheduling

Event Calendar

Month / week / day calendar with click-to-create, drag-to-resize events, and chapter colors.

Image Crop

Drag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.

#image#crop#avatar

Video Player

HTML5 video player with custom Tailwind controls, scrubber, volume, fullscreen, and chapters.

#video#media#player

#number#animation#counter

Animated Number

Smooth animated number ticker — for stat counters and metric reveals.

Gradient Heading

Gradient-fill heading text with multiple presets — for hero sections.

#heading#gradient#hero

Typography

Heading + body + caption + code typography ramp — the type system at a glance.

#text#typography#scale

#text#animation#typewriter

Typewriter

Character-by-character typewriter text animation with configurable speed.

Text Reveal (Words)

Word-by-word text reveal animation triggered on scroll.

#text#animation#reveal

Text Reveal (Chars)

Character-by-character text reveal animation for headlines.

#text#animation#reveal

Theme Switch

Segmented dark / light / system theme switcher with smooth icon transitions.

#theme#toggle#dark-mode

Color Scheme Select

Color palette picker dropdown — switch between branded color schemes.

#theme#color#palette

Accordion

Collapsible sections with smooth spring animation and keyboard support — single + multiple modes.

#collapse#faq#disclosure

Scroll Area

Custom scrollbar with cross-browser styling consistency — vertical, horizontal, both.

#scroll#overflow