What's New

Landing page with video hero and 2 feature sections

Landing page with basic hero and 2 feature sections

Split hero with stacked headline and product image

Coming Soon Hero With Logo Strip

Split hero with news chip and social proof stats

Centered hero with inline video and logo marquee

Centered hero with spark icon and wide gallery bleed

Download hero with cinematic backdrop and waitlist chip

AI agents hero with grid frame and video teaser

Mental wellness hero with masonry media

Hero with tabbed dashboard preview

Centered hero with logo row and browser mockup

Centered hero with meteors and globe

Centered recruiting hero with highlight word and download CTAs

Globe Hero with Logo Marquee

Split hero with review strip and tall photography

Split hero with image, avatars, and star rating

Split testimonial hero with rating strip and collage cards

Centered hero with ratings row under single CTA

Split upgrade hero with avatar proof and photography rail

Split SaaS hero with dot pattern, logo strip, and product preview

Split hero with avatars, ratings, and paired images

Split hero with floating quote avatars

Announcement hero with dashboard preview and tool marquee

Split hero with editorial rating rail

Split hero with reviews proof column

Centered hero with quote and review strip

Centered hero with users and avatars

Centered hero with download proof pill

Split hero with community stat column

Grid hero with click-to-play video preview

Centered hero with dual metrics and avatars

Centered hero with teams adoption card

Education uptime homepage with bento stats

Dashboard hero with reviews and skewed product preview

Fullscreen Hero With 3D Dashboard Preview

Split uptime hero with skewed product screenshot

Left Aligned Logo Grid With Muted Background

Muted Logo Marquee Without Headline

Classic L-shaped bracket on each corner.

Plus symbol centered in each corner accent.

Small square frame inset in each corner.

Parallel double-line L brackets anchored on the corner, extending outward.

Filled dot centered on the corner with short arms extending outward.

Full rainbow conic gradient rotating continuously around the button border.

Expanding ripple rings pulsing outward from the border.

Two gradient beams chasing opposite sides.

Color wave rotating through the border gradient.

A single bright gradient beam chasing quickly around the border.

Gradient border ring that breathes with a pulsing scale and opacity.

Diagonal light sweep sliding across the border surface.

Gradient dashed stroke marching continuously around the perimeter.

Static muted border at rest; full spin animation activates on hover.

Counter-clockwise rotating gradient border.

Wide comet tail sweeping slowly around the border.

Soft blurred gradient halo breathing around the edge.

TraceButton with full SVG border draw on hover — draw effect.

TraceButton with SVG border that draws then keeps marching on hover — loop effect.

TraceButton with two SVG strokes meeting from opposite corners on hover — dual effect.

TraceButton with dashed SVG border draw on hover — dash effect.

TraceButton with blurred SVG border glow on draw hover — glow effect.

TraceButton with top and right SVG border edges drawing on hover — partial effect.

Button with loading spinner that transitions to a success checkmark.

Secondary async button that shows an error state with X icon after failure.

Async button with a determinate progress bar that fills during loading.

Async button with a leading icon that swaps to spinner then success.

Outline variant async button with loading and success feedback.

Button with an ambient glow shadow that intensifies on hover.

Outline button with a subtle glow that appears on hover.

Secondary variant button with a subtle ambient glow on hover.

Button with a flowing multi-color aurora gradient background.

Outline button with an animated aurora gradient border.

AuroraButton with secondary variant.

Button with a fast, narrow light gleam that sweeps across periodically.

Secondary variant with a bright periodic gleam sweep.

GleamButton with outline variant.

Button with a radial pinlight that follows the cursor on hover.

Outline variant with cursor-following radial pinlight on hover.

PinlightButton with secondary variant.

Button with a continuous shimmer sweep animation across its surface.

Secondary variant shimmer button with a neutral rotating border glow.

Outline variant shimmer button with an indigo rotating border glow.

Button with a diagonal light band that sweeps across the surface.

Secondary variant with a bright diagonal shine sweep.

Outline variant with a diagonal light band sweep.

Icon-only button that expands to a pill with label on hover.

Outline expand button that reveals label on hover from icon-only state.

Button with a fold reveal hover effect and inverted text color.

Outline variant with fold hover reveal on a neutral background.

Ghost variant with subtle accent fold on hover.

Button that morphs to a circular spinner while loading.

Secondary variant morph button with icon and async loading state.

Primary button with a trailing arrow that shifts right on hover.

Outline button with a trailing arrow that shifts right on hover.

Secondary button with a trailing arrow that shifts right on hover.

Primary slide left button with hover text swap.

Outline slide left button with hover text swap.

Secondary slide left button with hover text swap.

Primary slide right button with hover text swap.

Outline slide right button with hover text swap.

Secondary slide right button with hover text swap.

Primary slide up button with hover text swap.

Outline slide up button with hover text swap.

Secondary slide up button with hover text swap.

Scrolling marquee text inside button — default variant, plays on hover.

Scrolling marquee text inside button — outline variant, plays on hover.

Scrolling marquee text inside button — secondary variant, plays on hover.

Scrolling marquee text inside button — default variant, auto-play loop.

Scrolling marquee text inside button — outline variant, auto-play loop.

Scrolling marquee text inside button — secondary variant, auto-play loop.

Typewriter text effect on hover — default variant.

Typewriter text effect on hover — outline variant.

Typewriter text effect on hover — secondary variant.

Typewriter text effect on load — default variant.

Typewriter text effect on load — outline variant.

Typewriter text effect on load — secondary variant.

Animated counter with plus/minus buttons and sliding number transition.

Counter button starting at 5 with custom min/max bounds.

Counter button with outline/secondary styling.

Counter button with outline/secondary styling.

Counter button with outline/secondary styling.

Counter button with outline/secondary styling.

Counter button with outline/secondary styling.

Counter button with outline/secondary styling.

Heart toggle button with animated count and color change.

Like toggle counter with outline/secondary styling.

Like toggle counter with outline/secondary styling.

GitHub icon in an outlined button-style link.

Outlined GitHub link with repo name and star count.

GitHub icon with star count number.

GitHub icon with star icon and count.

Inline stat-style GitHub link with icon, star, and count.

GitHub mark icon with star count.

Filled inverse GitHub mark icon.

GitHub icon with star count in an outlined link, matching the GitHub Icon outline style.

Outlined GitHub icon with star count tooltip on hover.

Filled inverse GitHub mark icon with star count tooltip on hover.

Email login CTA — default variant.

Email login CTA — default variant.

Email login CTA — outline variant.

Email login CTA — secondary variant.

Email login CTA — ghost variant.

Email login CTA — default variant.

Email login CTA — outline variant.

Email login CTA — default variant.

Minimal login button — link without icon.

Minimal login button — ghost without icon.

Minimal login button — link without icon.

Minimal login button — ghost without icon.

Minimal login button — outline without icon.

Minimal login button — secondary without icon.

Minimal login button — default without icon.

Minimal login button — outline without icon.

Sign-up CTA using LoginButton — default variant.

Sign-up CTA using LoginButton — outline variant.

Sign-up CTA using LoginButton — secondary variant.

Sign-up CTA using LoginButton — default variant.

Sign-up CTA using LoginButton — outline variant.

Sign-up CTA using LoginButton — default variant.

Sign-up CTA using LoginButton — secondary variant.

Sign-up CTA using LoginButton — outline variant.

Social login composition with Google.

Social login composition with GitHub.

Social login composition with Apple.

Social login composition with Microsoft.

Social login composition with X.

Social login composition with Discord.

Social login composition with Facebook.

Social login composition with LinkedIn.

Apple social button — default style.

Apple social button — full style.

Apple social button — icon style.

Apple social button — outline style.

Apple social button — secondary-outline style.

Apple social button — sm style.

Discord social button — default style.

Discord social button — full style.

Discord social button — icon style.

Discord social button — outline style.

Discord social button — secondary-outline style.

Discord social button — sm style.

Facebook social button — default style.

Facebook social button — full style.

Facebook social button — icon style.

Facebook social button — outline style.

Facebook social button — secondary-outline style.

Facebook social button — sm style.

GitHub social button — default style.

GitHub social button — full style.

GitHub social button — icon style.

GitHub social button — outline style.

GitHub social button — secondary-outline style.

GitHub social button — sm style.

Google social button — default style.

Google social button — full style.

Google social button — icon style.

Google social button — outline style.

Google social button — secondary-outline style.

Google social button — sm style.

LinkedIn social button — default style.

LinkedIn social button — full style.

LinkedIn social button — icon style.

LinkedIn social button — outline style.

LinkedIn social button — secondary-outline style.

LinkedIn social button — sm style.

Microsoft social button — default style.

Microsoft social button — full style.

Microsoft social button — icon style.

Microsoft social button — outline style.

Microsoft social button — secondary-outline style.

Microsoft social button — sm style.

X social button — default style.

X social button — full style.

X social button — icon style.

X social button — outline style.

X social button — secondary-outline style.

X social button — sm style.

Theme toggle icon button with outline variant.

Theme toggle icon button with default variant.

Theme toggle icon button with default variant.

Theme toggle icon button with ghost variant.

Theme toggle icon button with outline variant.

Theme toggle icon button with ghost variant.

Theme toggle icon button with outline variant.

Theme toggle icon button with default variant.

Theme toggle icon button with ghost variant.

Theme toggle icon button with outline variant.

Theme toggle with visible label and outline variant.

Theme toggle with visible label and default variant.

Theme toggle with visible label and ghost variant.

Theme toggle with visible label and outline variant.

Theme toggle with visible label and default variant.

Theme toggle with visible label and ghost variant.

Theme toggle with visible label and outline variant.

Theme toggle with visible label and default variant.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Outline theme toggle with optional styling.

Ghost variant button with text label.

Ghost button with leading icon.

Ghost button with trailing icon.

Ghost button with rounded-full styling.

Ghost button with loading spinner and disabled state.

Ghost button with count badge indicator.

Ghost button with keyboard shortcut indicator.

Outline buttons at extra-small, small, default, and large text sizes.

Default variant buttons at xs, sm, default, and lg sizes.

Ghost buttons at xs, sm, default, and lg sizes.

Destructive buttons at xs, sm, default, and lg sizes.

Autocomplete that highlights the first filtered match as you type.

Basic shadcn Combobox autocomplete with framework filtering.

City autocomplete with clear button and typeahead filtering.

Country autocomplete with flag icons in each suggestion.

Autocomplete using custom object items and itemToStringValue.

Autocomplete pre-filled with a default editor selection.

Disabled autocomplete input with a selected value.

Autocomplete in an invalid form field with aria-invalid styling.

Language autocomplete with language code badges in each suggestion.

Multiple selection autocomplete with removable chips and anchored popup.

Button-triggered autocomplete with search inside the popup.

Autocomplete with Item title and description in each suggestion.

Grouped timezone autocomplete with regional labels.

Autocomplete with a clear button and default selection.

Autocomplete with a leading globe icon in the input group.

Destructive icon-only button with aria-label.

Destructive icon button with rounded-full styling.

Destructive icon button with loading spinner and disabled state.

Disabled destructive icon button.

Destructive icon button with notification count badge.

Ghost icon-only button with aria-label.

Ghost icon button with rounded-full styling.

Ghost icon button with loading spinner and disabled state.

Disabled ghost icon button.

Ghost icon button with notification count badge.

Outline icon-only button with aria-label.

Outline icon button with rounded-full styling.

Outline icon button with loading spinner and disabled state.

Disabled outline icon button.

Outline icon button with notification count badge.

Secondary icon-only button with aria-label.

Secondary icon button with rounded-full styling.

Secondary icon button with loading spinner and disabled state.

Disabled secondary icon button.

Secondary icon button with notification count badge.

Outline icon buttons at extra-small, small, default, and large icon sizes.

Default icon-only button with aria-label.

Default icon button with rounded-full styling.

Default icon button with loading spinner and disabled state.

Disabled default icon button.

Default icon button with notification count badge.

Full billing selector with titles, subtitles, and descriptions.

Choicebox items with title and description text.

Two card-style radio options with default selection.

Choicebox items with a title and muted subtitle.

Three selectable plan cards in a vertical stack.

Code block with filename label and copy button in the header.

Code block header with a copy-to-clipboard button.

Code block with lineNumbers enabled on the active snippet.

Multiple files with a header select to switch between snippets.

Plain code display with syntaxHighlighting set to false.

Single TypeScript code snippet with syntax highlighting.

Credit card back with magnetic stripe, expiry, and CVV fields.

Credit card front with EMV chip detail and provider logo.

Complete card front with chip, number, name, expiry, and provider logo.

Credit card that flips on hover to reveal front and back faces.

Front-facing card styled for Mastercard with provider branding.

Front-facing Visa card with card number and provider logo.

Dropzone restricted to image file types.

Dropzone accepting more than one file at a time.

Dropzone showing content state after a file is selected.

Dropzone with a maxSize constraint and caption.

Basic dropzone for uploading one file.

Timeline-style rows with avatar, action text, and timestamp.

Navigable settings-style rows rendered as anchor links.

List grouped inside a single rounded border container.

Dense list using Item size sm for tighter row spacing.

Basic vertical stack of Item rows with titles only.

Sortable rows with a grip handle on the leading edge of each item.

Sortable list where pinned rows stay fixed and cannot be dragged.

Floating drag preview using dnd-kit DragOverlay while the list reflows.

Sortable list with grip handles using dnd-kit.

Sortable rows inside a single stacked bordered panel with divide lines.

Entire item rows act as the drag surface with a small activation distance.

Sortable rows with leading icons and a trailing grip handle.

Search input filters visible rows in the list.

Scrollable list with a footer button to load additional rows.

Move rows up or down with arrow buttons per entry.

Checkbox on each row plus a select-all control in the header.

List rows using the muted Item variant for subdued entries.

Ordered list with a rank column prefix on every row.

Long list inside ScrollArea with a fixed max height.

Filterable panel with a dedicated empty state when nothing matches.

Single-select list with one highlighted row at a time.

Dense list panel using the xs Item size variant.

List rows stacked flush inside one bordered panel with divide lines between entries.

Stacked outline rows that share edges inside one rounded group.

Right-click actions on rows in a stacked panel.

Delete control on each row in a stacked panel.

File icon rows with sizes in a stacked panel.

Hover-revealed row actions in a stacked panel.

Overflow menu on each row inside a unified stacked panel.

Stacked list rows with leading icons inside one bordered panel.

Thumbnail rows in a unified stacked media panel.

Progress bars per row in a stacked job panel.

Scrollable list with sticky section labels while scrolling.

Checkbox list with strikethrough styling for completed tasks.

Task list with an input and button to append new rows.

Task list with due date meta and overdue row styling.

Task rows with priority Badge labels on each entry.

Member list with Avatar initials in ItemMedia on each row.

Avatar rows with title and secondary description text.

Panel with a sticky back navigation header above the list.

Rows with a trailing Badge for plan or status labels.

Toolbar appears when rows are selected for bulk delete or archive.

Compact navigation rows with a trailing chevron indicator.

Right-click context menu on each list row.

Two-line rows with ItemTitle and ItemDescription on every entry.

Rows with a trailing destructive button for remove or delete.

Mixed list with some rows disabled and non-interactive.

List container showing Empty when no rows are available.

File-style rows with type icon, name, and size metadata.

Rows with ItemFooter for secondary metadata or actions.

Rows with ItemHeader above the main content block.

Each row includes a leading Lucide icon in ItemMedia.

Rows with thumbnail images in ItemMedia for media-style lists.

Skeleton placeholder rows while list data is loading.

Rows with a secondary meta line such as timestamps or file sizes.

Expandable parent tasks revealing nested subtask rows.

Avatar rows with an online presence indicator.

Rows with a progress bar showing sync or upload status.

Single-select list built from radio controls in each row.

Secondary row actions that appear on hover.

Overflow menu on each row for secondary actions.

Grouped list with section labels above each ItemGroup.

Placeholder skeleton rows shaped like list items while loading.

Rows with a colored dot indicator for online or sync state.

Settings rows with a trailing Switch control per entry.

Each row includes an icon button in ItemActions.

Marquee with left and right gradient fades at the scroll edges.

Marquee scrolling a row of company logo images.

Marquee that pauses scrolling when the pointer hovers over the track.

Marquee scrolling in the reverse direction using direction right.

Marquee with a faster custom scroll speed via the speed prop.

Basic horizontal scrolling text items in a continuous loop.