What's New

Fullscreen Screening Hero

Full Bleed Screening Hero

Folio hero with hanging copy plate

Split intro with story columns and stats

Intro With Story Columns

Sticky Sidebar Company Profile

Creative Agency Portfolio

Agency Profile with Process Cards

Story with Avatar Profile

About with Hero Image

Tilted Photo Profile Card

Why Us Stats Section

Interactive Tab Profile

Mission and Drive Sections

Image Left Quote Right

Stats Grid with Logos and Testimonial

Founder Profile with Signature

Hero Story and Training Cards

Animated Story with Images

Personal Profile with Clients and Awards

Animated Story with Stats and Avatars

Studio Profile with Services

Enterprise About with Team Grid

Two-Column About with Staggered Images

Mission panel with text columns

Company Profile with Achievements

Centered intro with photo row

Story with Avatar Profile

About with Hero Image

Mission and Drive Sections

Studio split with work CTA

Interactive Tab Profile

Photo Mosaic With Story Columns

Editorial Intro With Photo Pair

Split Intro With Story Columns

Sticky Sidebar Client List

Vision and Creators with Image Grid

Sticky studio with awards

Developer Platform Story

Story and Workplace Photo Grid

Product Story with Offset Images

Fintech About with Stats Carousel

Developer Profile with Photos

Announcement hero with desktop frame and handset overlay

Fintech hero with handset and floating card

Split hero with avatars, ratings, and layered photos

Roadmap hero with scribble highlight and icon row

Hero with demo dialog and logo carousel

Screening hero with credits dock

Split hero with overlapping photo collage

Split hero with subscribe window

Full-height split hero with edge image

Uppercase hero with layered photo crowns

Insights hero with staggered image board

Tabbed banking hero with wide preview canvases

Oversized wordmark hero with services list and contact card

Visitor analytics hero with angled backdrop and logo belt

Tabbed hero with cursor badge and swap imagery

Centered hero with auto-moving logo carousel

Centered payroll hero with illustration and floating chips

Gradient hero with inverted span headline and bordered preview

Centered Consultation Hero

Finance waitlist hero with icon proof grid and split imagery

Centered hero with dual CTAs and looping video

Centered hero with bordered stage and flyer image

Centered hero with serif bridge and overlapping avatars

Centered platform hero with highlight bar

Creator waitlist hero with fanned dashboards

Accept invite with workspace access

Sticky culture column with job rows

Featured opening with supporting roles

Department tabs over a job card grid

Split accept invite with verified badge

Centered forgot password card

Split forgot password with image

Minimal inline forgot password

Muted panel forgot password

Centered magic link card

Split magic link with image

Minimal inline magic link

Muted panel magic link

Centered newsletter subscribe

Split newsletter with image

Muted band newsletter

Newsletter with feature list

Inverted newsletter band

Centered passkey card

Minimal passkey prompt

Centered reset password card

Split reset password with image

Minimal reset password stack

Reset password with rules list

Reset password with rules panel

Centered two factor code

Split two factor with image

Two factor with QR pairing

Two factor recovery codes

Centered verify email code

Split verify email with image

Verify email inbox prompt

Muted panel verify email

Branded column verify email

Verify email with inbox shortcuts

Checkout address picker with sheet

Simple bottom cookie bar

Bottom left card that expands to customize

Bottom left card that opens a dialog

Bottom right card that expands to customize

Bottom right card that opens a dialog

Mega bottom bar with switch list

Mega bottom bar with category cards

Mega bottom bar with split summary

Simple cookie consent dialog

Medium cookie dialog with details

Advanced cookie dialog with categories

Bottom cookie bar with privacy link

Bottom cookie bar with icon

Bottom left cookie card

Bottom left cookie card with dismiss

Bottom right cookie card

Bottom right cookie card with link

Bottom bar that slides up to customize

Bottom bar that opens a customize dialog

Sonner toast with a close button using the closeButton option.

Sonner toast that stays on screen until dismissed with duration Infinity.

Sonner toast that inverts light and dark colors with the invert option.

Dismiss a sonner toast by id or clear the stack with toast.dismiss.

Update one sonner toast in place by passing the same id to later toast calls.

Headless sonner toast rendered with toast.custom and fully custom markup.

Sonner toast with onDismiss and onAutoClose callbacks after the toast leaves.

Sonner toast with JSX action and cancel buttons instead of label objects.

Promise toast whose success and error handlers return a toast options object.

Expanded sonner stack with closeButton so each toast can be dismissed.

Typed sonner toasts with richColors enabled on the Toaster.

Dismissible muted release announcement

Primary bar with soft radial and CTA

Inverted dark pro upgrade bar

Promo code copy banner

Muted upgrade banner

Primary announcement bar with catalog link

Three-column team blog cards

Divided latest-articles list

Featured post with stacked side cards

Magazine bento with mixed card spans

Filterable article card grid

Editorial hero with compact post grid

Muted featured story with three cards

Two-column cards with author bylines

Alternating image and copy rows

Newsletter panel with latest posts

Year-grouped writing archive

Photo cards with hover overlay actions

Split featured story with byline

Resource cards for guides videos and docs

Featured split with supporting grid

Icon card FAQ grid

Inverted glass accordion FAQ

Compact one-liner FAQ rows

Editorial serif accordion FAQ

Two-column FAQ cell grid

Searchable accordion FAQ

Numbered inverted accordion FAQ

Technical logo grid with settings dialog

Accordion integration settings list

Interactive hub and spoke diagram

Category tabs with connect dialog

Tagged integration cards with connect dialog

Searchable integration catalog with connect dialog

Hairline logo grid with connect dialog

Paired integration cards with setup dialog

Centered logo cloud with connect dialog

Single integration setup with connect dialog

Wrapping chips with filters and connect dialog

Toggle list with connect dialog

Sidebar category nav with connect dialog

Webhook event cards with connect dialog

Featured integration with icon picker

Stats row with connect dialog

Hover tiles with connect dialog

Works-with pills with connect dialog

Request form beside logo grid

Category columns with connect dialog

Centered circular avatar row

Founder cards with department badges

Hover overlay portrait grid

Founding team bio list

Team grid with hiring card

Sticky intro with portrait grid

Inverted remote crew grid

Team cards with contact links

Filterable department team grid

Featured founder with supporting team

Masonry team portrait columns

Team directory by department

Team directory list with avatars

Distributed team location cards

Team member card carousel

Founder quote beside team grid

Editorial team portrait cards

Countdown offer bar with outline CTA

Floating status card with dismiss

New badge announcement link bar

Email subscribe announcement bar

New badge banner with avatars

Scrolling marquee banner

Brand bar with navigation links

Maintenance warning banner

Progress unlock banner

Centered pill changelog banner

Webinar announcement banner

Mobile app download banner

Expanding case study cards

Testimonial carousel with side text

Image card carousel with overlay labels

Feature cards carousel with centered heading

Split carousel with detail panel

Product carousel with hover image swap

Tab-synced content carousel

Centered image carousel with scale effect

Case study card carousel

Autoplay gallery with pagination

Case study carousel with dot indicators

Lightbox image grid

Asymmetric bento image grid

Hero preview with thumbnail strip

Feature carousel with icon toggle group

Caption hover bento grid

Featured image with side thumbs

Hover reveal project grid

Social style photo grid

Gallery carousel with demo link

Auto-scrolling image carousel with text intro

Resource list with image carousel sidebar

Step carousel with clickable section labels

Bordered logo grid with hover cells

Case study metric cards

Split copy and photo collage

Zigzag editorial photo rows

Three column image grid

Captioned two column gallery

Masonry column mosaic

Single slide gallery carousel

Filterable category gallery

Inverted dark framed gallery

Polaroid collage grid

Before after compare sliders

Horizontal snap photo strip

Filterable masonry photo columns

Ticker that briefly highlights green or red when the price moves.

Ticker that periodically updates price and change values.

Horizontal marquee of ticker chips for a continuous market tape.

Stacked tickers with icons and live price movement per symbol.

Pill with PillAvatar and a social handle.

Pill with PillAvatarGroup and supporting text.

Pill with a PillButton remove control.

Pill combining PillIcon and a dismiss PillButton.

Pill combining PillStatus and a dismiss PillButton.

Pill combining PillIcon and PillDelta.

Pill combining PillStatus and PillAvatar.

Pill with a zero PillDelta showing no change.

Pills for up, down, and no-change PillDelta states.

Pill with PillIcon and a user count.

Pills using different PillIcon glyphs for metadata.

Pill with a static error PillIndicator.

Pill with a warning PillIndicator.

Pill with a pulsing info PillIndicator.

Row of pills covering every PillIndicator variant.

Pill using the outline badge variant.

Pill using the destructive badge variant.

Pill using the default primary badge variant.

Pill with PillStatus separating a build result from an ID.

Pill with a pending PillStatus and approval label.

Static action buttons in the last column.

Static table with Badge status cells.

Every cell bordered like a spreadsheet grid.

Table flush on the page without a bordered wrapper.

Table with a TableCaption below the data.

Table inside a card with title and description.

Static checkbox column for selectable list markup.

Header cells spanning multiple columns.

Feature comparison across plan columns.

Table with header and a single empty-state row.

TableFooter row summing numeric columns.

Compact uppercase muted header labels.

Leading Lucide icons in the primary column.

Compact KPI table with delta annotations.

IDs and hashes in monospace for ops tables.

Right-aligned tabular numbers for finance.

Horizontal scroll with a sticky primary column.

Static progress bars inside table cells.

Leaderboard-style ranks with medal emphasis.

Static star ratings in a reviews table.

Category cells spanning multiple rows.

Simple weekday schedule / timetable layout.

Primary label with muted secondary text.

A row visually marked as selected or active.

Extra vertical padding for comfortable reading.

Colored status dots beside labels.

Scrollable body with a sticky TableHeader.

Rows with stacked avatars for shared ownership.

Product rows with small image thumbnails.

Long text truncated with ellipsis in fixed widths.

Gantt provider with onAddItem to create features from the timeline.

GanttCreateMarkerTrigger for adding and removing timeline milestones.

Gantt features with onMove for drag and resize on the timeline.

Gantt provider with zoom set to 200 for a closer monthly view.

Autoplaying muted loop for marketing and hero embeds.

Complete media-chrome bar with seek, duration, mute, and volume.

Video player with poster image and fullscreen button.

Seekable player with a playback rate control for tutorials.

List items that lead with Lucide icons to distinguish task types.

Multi-group list with an empty target group that accepts dropped items.

List items that show priority with Badge variants beside each title.

List items with assignee avatars composed through ListItem children.

Syntax-highlighted code blocks with inline code marks.

Checklist, unordered, and numbered lists in one editor.

Insert blocks with slash commands or the empty-line floating menu.

Rich-text table with row, column, and cell management menus.

Gantt provider configured for daily timeline range.

Gantt chart with sidebar and feature list grouped by category.

GanttFeatureRow packing several reservations into shared resource lanes.

Gantt features with planned, in-progress, and done status colors.

Image crop locked to a 3:4 aspect ratio for portrait framing.

Image crop with circularCrop enabled for round avatar framing.

Image crop without a locked aspect ratio for arbitrary selections.

Image crop using the default ghost icon apply and reset buttons.

Peeking deck fanned left and right so the stack reads as interactive.

Stacked deck with a clear peek of the cards underneath.

Banner with warning background and foreground color overrides.

Banner visibility controlled with visible and onClose state.

Rounded inset banner for placement inside cards or panels.

Banner with icon, title, action, and close control.

Color picker including alpha slider and eye dropper control.

Compact color picker showing only the selection area and hue slider.

Controlled color picker that updates a live swatch from onChange.

Color picker with selection area, hue slider, and format fields.

Comparison of two non-image UI panels instead of photos.

Comparison handle with custom Before and After labels.

Comparison slider that reveals the after image on hover.

Image comparison slider in drag mode with a default handle.

Contribution graph blocks styled with custom data-level colors.

Minimal contribution graph without footer count or legend.

Contribution graph with larger block size and margin.

GitHub-style full-year contribution calendar in a compact rectangle.

Deck with controlled current index and external next button.

Deck with a larger visible stack size behind the top card.

Swipeable card stack with empty state after the last card.

Deck that records left and right swipe decisions.

Dialog stack that lets users click earlier layers to go back.

Dialog stack open state controlled by parent React state.

Three stacked dialog panels for a longer setup sequence.

Stacked dialogs with next and previous navigation.

Format selected text with a floating bubble menu.

Rich text field with a character limit and live counter.

Full TipTap editor with slash commands, bubble menu, floating menu, and tables.

Always-visible toolbar for block types and inline formatting.

Gantt chart including milestone markers on the timeline.

Gantt provider configured for quarterly timeline range.

Gantt timeline with sidebar, feature bars, and today marker.

Gantt timeline without a sidebar for a compact schedule view.

Image crop locked to a 16:9 aspect ratio for cover images.

Image cropper that accepts a user-selected file from an input.

Applies the crop and shows a circular avatar-style preview.

Image cropper with square aspect ratio, apply, and reset controls.

Image zoom with a blurred backdrop class on the overlay.

Image zoom with controlled isZoomed state and a toggle button.

Image zoom inside a bordered gallery card with caption.

Image wrapped in ImageZoom for click-to-zoom lightbox behavior.

Kanban board with four workflow columns.

Kanban cards with custom children for metadata under the title.

Kanban board that surfaces the latest drag end event details.

Three-column kanban board with draggable cards.

List items with custom children instead of the default name-only row.

List with multiple droppable status groups for cross-group moves.

List group with a fully custom header instead of name and color props.

Vertical list with a single status group and draggable items.

QR code using high robustness for denser recovery.

QR codes shown at small, medium, and large sizes.

Client QR code for a URL using theme-aware colors.

QR code encoding a short plain-text string instead of a URL.

Reel with play, mute, previous, and next control buttons.

Timed image reel without video items.

Reel with header overlay title and description on each item.

Vertical reel with image and video items, progress, and navigation.

Sandbox tabs that include a console panel for runtime logs.

Multi-file sandbox with a file explorer beside the editor.

Sandbox that opens on the preview tab for demo-first docs.

Sandpack sandbox with code editor and live preview tabs.

Ticker with absolute and percent price change indicators.