K
keenthemes
/
reui
/
blocks
Files
Code
Info
Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, and user menu
app-shell-1
Dashboard app shell with an icon-collapsible sidebar: workspace switcher, nested platform nav with count badges, pinned resources with row action menus, theme toggle, breadcrumb header. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar, Breadcrumb.
AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich Notifications
app-shell-10
Inset sidebar shell for an AI agents console: command-K search, collapsible agent nav, projects with progress rings, usage-limit card, org and theme switcher, notifications popover. ReUI Frame, Badge, Rating; shadcn Sidebar, Popover, DropdownMenu.
Operations app shell with four toggleable regions and a resizable bottom workbench sheet
app-shell-11
Dense operations console: collapsible nav, resizable split panes, an expandable bottom workbench sheet, and a right calendar and agenda rail. ReUI Badge, Frame, Rating with shadcn Sidebar, Resizable, Tabs, Calendar. Admin shell, SaaS dashboard.
Icon-rail sidebar app shell with command-K search, notifications feed, apps grid, and theme menu
app-shell-12
Dashboard shell: collapsible icon-rail sidebar with nested nav, Soon badges, and project progress rings, plus a header command-K search, rich notifications feed, apps grid, and theme account menu. ReUI Badge, Rating; shadcn Sidebar, Popover, Dialog.
Community feed app shell with full-width header above a collapsible icon-rail sidebar
app-shell-13
Full-width header over a collapsible icon-rail sidebar for community feed apps. Search, Create button, avatar menu, theme toggle, grouped nav with badges, nested Manage Feeds dropdown. ReUI Badge, shadcn Sidebar, Button, Card, DropdownMenu, Avatar.
Mini icon-rail app shell with per-section secondary nav and a tabbed workspace toolbar
app-shell-14
Three-region workspace shell: icon rail, a toggleable secondary nav that swaps per section, and a toolbar with List, Kanban, Calendar, Dashboard tabs plus Sort, View, Filter, Search. ReUI Badge, shadcn Sidebar, Tabs, DropdownMenu, Avatar.
Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites
app-shell-15
Dashboard shell with a fixed dark topbar over an icon-collapsible sidebar: workspace switcher, pin/unpin nav with badges, favorites group, gradient Upgrade menu, team avatars. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar, Button, Card.
Dual sidebar app shell with icon rail and collapsible secondary navigation panel
app-shell-16
Two-level dashboard layout: icon rail plus a toggleable secondary nav that swaps per section, with workspace switcher, breadcrumb header, search, and account menu with theme toggle. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar.
AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer
app-shell-17
AI chat workspace: floating collapsible sidebar with a GPT-4/Claude/Gemini model picker, pinned and recent threads, a welcome canvas, and an InputGroup composer. shadcn Sidebar, DropdownMenu, Avatar, ReUI Badge. LLM assistant, chatbot, copilot UI.
Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel
app-shell-18
Three-panel to-do shell: floating Sidebar with task lists, count Badges, color tags and a Progress focus card, plus a toggleable AI chat panel (in-flow at desktop, Sheet on mobile). Built on ReUI Badge, shadcn Sidebar, Dialog, DropdownMenu.
Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week/Month view switcher
app-shell-19
Calendar app layout: inset Sidebar with a Calendar date picker, up-next agenda, calendars menu, account menu, and a header Day/Week/Month switcher. ReUI Badge, shadcn Sidebar, Calendar, DropdownMenu, Avatar. For scheduling apps and planners.
Floating icon-collapsible sidebar shell with command-K search, nested nav, and workspace switcher
app-shell-2
App shell with a floating collapsible-to-icon Sidebar, command-K search Dialog, nested Platform nav with a live status pulse, workspace switcher Dropdown, and Breadcrumb header. Uses Sidebar, Breadcrumb, Avatar, Dialog, Kbd. Dashboard, admin panel.
Mail client app shell with folder sidebar, split list and reading panes, and icon app rail
app-shell-20
Email workspace: inset Sidebar with account menu, compose dialog, folders, labels and contacts, a search and category-filter message list, a reading pane, and a right icon rail. shadcn Sidebar, Card, Empty, Dialog, ReUI Badge. Mail inbox, webmail UI.
Inset sidebar app shell with per-project progress rings and a multi-type notifications popover
app-shell-3
Inset collapsible sidebar dashboard shell with workspace switcher, command search, project donut progress rings, usage limit meter, and notifications popover. ReUI Frame, Badge, Rating plus shadcn Sidebar, Popover, DropdownMenu, Progress, Avatar.
Mail inbox app shell with icon folder rail, wide message list, and selected-message action header
app-shell-4
Mail and inbox shell: folder icon rail plus a wide 440px message list with live search, filter tabs, rich preview rows, and a selected-message action header (reply, star, delete). ReUI Badge, shadcn Sidebar, Tabs, Avatar, DropdownMenu.
Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels
app-shell-5
Calendar workspace with a dual-pane icon-rail Sidebar swapping mini-Calendar accounts, date-grouped Schedule, searchable Contacts, and Notifications. Uses ReUI Badge with shadcn Sidebar, Calendar, Avatar, DropdownMenu.
Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel
app-shell-6
Three-column workspace shell: dark collapsible nav rail with command search, team list and usage meter, breadcrumb header, and a slide-in right Calendar panel with agenda and account toggles. ReUI Frame, Badge, Rating plus shadcn Sidebar, Calendar.
Breadcrumb-switcher app shell with org/app/environment dropdowns and a live system monitor popover
app-shell-7
Header-first shell with a breadcrumb of org, app, and environment switcher dropdowns, a live system monitor popover with resource sparklines, command-palette search, and collapsible nested sidebar nav. ReUI Badge, Kbd, shadcn Sidebar, DropdownMenu.
Inset icon-rail app shell with per-section secondary nav, org/app/env switchers, and notifications
app-shell-8
Two-level dashboard shell: icon rail plus a per-section secondary nav with live-metric/storage footers, org/app/env switchers, command-K search, and notifications drawer. ReUI Badge, Rating; shadcn Sidebar, Sheet, Dialog. Inventory, ops admin.
Dark inset-sidebar team workspace shell with member presence rail and notifications feed
app-shell-9
Dark collapsible-sidebar team shell: presence member rail, notifications feed, command search, AI-credit usage card, workspace switcher. ReUI Frame, Badge; shadcn Sidebar, Avatar, DropdownMenu, Progress. For SaaS dashboards and team apps.
Split-screen login page with animated grid backdrop and editorial image panel
auth-1
Sign-in page pairing an email or username and password form with show/hide toggle and Google plus Apple buttons over a masked animated grid and a full-height photo. Uses ReUI Field, InputGroup, Separator, Button, Card. Login, auth, sign in screen.
Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar
auth-10
Split passwordless login: magic-link email field plus Google, Apple, and GitHub SSO, beside a Frame trust card with a star-rated testimonial and brand logo wall. ReUI Frame; shadcn Field, Input, Button, Avatar. Login, social auth, SaaS onboarding.
Split-screen login with testimonial sidebar and animated dot backdrop
auth-11
Two-column login: email or username plus password with show/hide toggle, Google and Apple buttons, and a sidebar with a star-rated testimonial and trust-brand wordmarks over a twinkling dot canvas. ReUI Field, InputGroup, Button, Separator, Avatar.
Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar
auth-12
Login with Google, email, WebAuthn passkey, SAML SSO, and backup code, a two-step email reveal, and a framed sidebar with an animated brand-logo grid and rotating star testimonials. ReUI Alert; shadcn Button, Field, Input, Avatar. Sign-in, SSO.
Split-screen magic-link sign-in with left image sidebar and social login buttons
auth-13
Magic-link login page: work email field sends a secure sign-in link, plus Google, Apple, and GitHub social buttons. Two-column split with a full-cover image sidebar. ReUI Frame, shadcn Field, Input, Button, Separator.
Split-screen workspace sign-in with animated stacked media panel and social SSO
auth-14
Two-column workspace login page: email and password with show/hide toggle, forgot-password, and Google, Apple, GitHub SSO buttons beside an auto-cycling stacked photo panel. Uses Field, Input, InputGroup, Button, Separator.
Centered magic-link email login with logo, social sign-in buttons, and legal footer
auth-15
Passwordless email login that sends a magic link, plus Google, Apple, and GitHub sign-in and a terms and copyright footer. Built with ReUI InputGroup, Field, Button, Separator. For login, SSO, passwordless auth screens.
Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer
auth-16
Single-column sign-in: app header with create-workspace link, centered Google, GitHub, and SSO buttons over one work-email Continue field, plus a footer customer logo wall. shadcn Button, Field, Input, Separator. Login, social auth, SaaS onboarding.
Centered login method picker with WebAuthn passkey sign-in and email reveal step
auth-17
Two-step sign-in: a centered method picker (Google, email, SAML SSO, passkey, backup code) that reveals an email field, with real WebAuthn passkey auth and toasts. Uses shadcn Button, Input, Field, Item and ReUI Alert. Login / auth page.
Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle
auth-18
Two-column login: email or username field, password Input with show/hide toggle, Google and Apple buttons, plus a testimonial and trust-brand sidebar. Uses ReUI Field, InputGroup, Avatar, Item, Separator, Button. For login and sign-in pages.
Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login
auth-19
Full-page login screen that emails a secure sign-in link to an approved work address, with Google and GitHub OAuth buttons above an or divider. Built from ReUI Card, Field, InputGroup, Separator, Button. For SSO, magic link, passwordless signin.
Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel
auth-2
Email or username and password sign-in with show/hide toggle and Google, Apple, GitHub buttons, beside a dark panel with an autoplay founder testimonial carousel and Trustpilot rating. ReUI Carousel, Card, Field, InputGroup. Login, social auth, SaaS.
Centered sign-in card with Google and Apple buttons, password visibility toggle, and email login
auth-20
Login page with social sign-in (Google, Apple), an email or username field, and a show or hide password toggle, plus forgot-password and create-account links. Built on ReUI Card, Field, Input, InputGroup, Button, and Separator.
Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas
auth-3
Passwordless magic-link sign-in with a single work-email field and Google, Apple, GitHub buttons, beside a testimonial and trust-brand sidebar on a twinkling dot canvas. ReUI Field, Input, Button, Avatar, Separator. Login, passwordless auth.
Framed password sign-in card with email or username, social provider row, and footer nav
auth-4
Login on a noise-textured background: ReUI Frame card with email-or-username and password fields, show/hide toggle, full-width submit, plus a Google/Apple/GitHub row and footer nav. shadcn Field, Input, InputGroup, Button. Sign in / log in page.
Split-screen marketing trial signup page with animated gradient blob background and social login
auth-5
Full-page registration with a marketing hero, OAuth buttons (Google, GitHub), email and show/hide password fields, and a brand logo trust strip over drifting gradient blobs. ReUI Frame, shadcn Button, Field, InputGroup, Separator.
Split-screen login with social OAuth and testimonial sidebar over an animated grid background
auth-6
Two-column sign-in page: email or username, password with show/hide toggle, Forgot password, and Google/Apple/GitHub OAuth, beside a customer testimonial and brand-logo panel on an animated grid. Uses Button, Input, InputGroup, Field, Separator.
Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos
auth-7
Centered dark magic-link sign-in: email field sends a sign-in link, with Google, Apple and GitHub OAuth, a dashed crosshair-cornered frame, and a customer logo trust strip. Uses Button, Field, InputGroup. For login and auth pages.
Centered Frame login card over a softened photo backdrop with social provider sign-in
auth-8
Single-card sign-in centered on a blurred Unsplash photo with noise grain: email or username and password fields, show/hide toggle, Forgot password, and Google, Apple, GitHub buttons. ReUI Frame; shadcn Field, InputGroup, Button. Login page.
Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial
auth-9
Split passwordless login: a work-email field emails a 15-minute magic link, with Google, Apple, GitHub buttons, beside a sidebar of brand logos animating in a grid under a rotating star testimonial. ReUI Field, Input, Button, Avatar. Login, auth.
Blog index with cover-image post cards in a responsive three-column grid and author footers
blog-1
Blog listing on a responsive 1/2/3-column grid of Cards: 16:10 cover, date and read-time, clamped title and excerpt, author footer with Avatar and Read link. Built on Card, CardContent, Avatar. For blog index, article archive, news, or changelog.
Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges
blog-2
Blog index of three full-bleed cover-image cards with a gradient scrim, title and tone label overlaid on the photo, a white pill category Badge, and hover zoom. ReUI Badge, shadcn Card. For articles index, news grid, insights, or journal pages.
Blog article carousel with cover cards, circular prev/next controls and a progress-line indicator
blog-3
Featured-article blog carousel with circular prev/next buttons and a 1px progress line as position indicator. Cover scales on hover; category badge and read time. ReUI Carousel, Progress, AspectRatio, Badge, Card. Article slider, featured posts.
Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers
blog-4
Blog index listing posts as stacked ReUI Frame cards in a three-column row: grayscale cover that zooms on hover, category, date, title, excerpt, and an author footer with shadcn Avatar and Read link. For news, insights, and article listings.
Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list
blog-5
Reading page for one blog post, news, changelog, or case study. Cover with gradient scrim, overlaid title and category badge, byline, sections, pull quote, author bio, and text-only related posts. Uses ReUI Card, AspectRatio, Avatar, Badge, Item.
Single-column blog post detail page with breadcrumb, author byline, topic badges, Read Next grid
blog-6
Centered max-w-3xl blog post detail page: breadcrumb, headline, author byline, cover image, body sections, topic badges, and a two-up Read Next grid of related posts. Built on ReUI Breadcrumb, Card, Item, Avatar, Badge, Separator. For release notes.
A basic single-expand accordion
c-accordion-1
A basic single-expand accordion
Accordion with rotating arrow indicator
c-accordion-10
Accordion with rotating arrow indicator
Accordion component for onboarding or setup steps with icons, badges, and QR codes
c-accordion-11
Accordion component for onboarding or setup steps with icons, badges, and QR codes
Accordion with plus/minus indicators
c-accordion-2
Accordion with plus/minus indicators
Accordion with borders and rounded corners
c-accordion-3
Accordion with borders and rounded corners
Accordion embedded within a Card
c-accordion-4
Accordion embedded within a Card
Accordion with disabled items and highlighted state
c-accordion-5
Accordion with disabled items and highlighted state
Advanced accordion with custom icons and badges
c-accordion-6
Advanced accordion with custom icons and badges
Accordion items integrated within Frame and FramePanel
c-accordion-7
Accordion items integrated within Frame and FramePanel
Nested accordion example with bordered items
c-accordion-8
Nested accordion example with bordered items
User list accordion with avatars and role indicators
c-accordion-9
User list accordion with avatars and role indicators
Basic alert
c-alert-1
Basic alert
Alert with icon and action buttons
c-alert-10
Alert with icon and action buttons
Alert with description and action buttons
c-alert-11
Alert with description and action buttons
Alert integrated within a Frame with reset borders
c-alert-12
Alert integrated within a Frame with reset borders
Stacked alerts within a Frame
c-alert-13
Stacked alerts within a Frame
Alert with actions integrated within a Frame
c-alert-14
Alert with actions integrated within a Frame
Inverted alert variant
c-alert-15
Inverted alert variant
Urgent billing notice
c-alert-16
Urgent billing notice
Service status summary stacked within a frame
c-alert-17
Service status summary stacked within a frame
Feature discovery alert
c-alert-18
Feature discovery alert
User message notification alert
c-alert-19
User message notification alert
Alert with icon
c-alert-2
Alert with icon
User message notification alert
c-alert-20
User message notification alert
Alert with icon and action buttons
c-alert-3
Alert with icon and action buttons
Destructive alert with icon and action buttons
c-alert-4
Destructive alert with icon and action buttons
Info alert with icon and action buttons
c-alert-5
Info alert with icon and action buttons
Success alert
c-alert-6
Success alert
Warning alert
c-alert-7
Warning alert
Error alert
c-alert-8
Error alert
Invert alert
c-alert-9
Invert alert
Basic alert dialog with title, description, and action buttons
c-alert-dialog-1
Basic alert dialog with title, description, and action buttons
Confirmation for successful e-ticket registration
c-alert-dialog-10
Confirmation for successful e-ticket registration
System update notification requiring application restart
c-alert-dialog-11
System update notification requiring application restart
Billing warning for expired subscriptions or failed payments
c-alert-dialog-12
Billing warning for expired subscriptions or failed payments
Logout confirmation dialog
c-alert-dialog-13
Logout confirmation dialog
Advanced security audit confirmation
c-alert-dialog-14
Advanced security audit confirmation
Small size alert dialog for quick confirmations
c-alert-dialog-2
Small size alert dialog for quick confirmations
Alert dialog with icon
c-alert-dialog-3
Alert dialog with icon
Small size alert dialog with media (icon)
c-alert-dialog-4
Small size alert dialog with media (icon)
Destructive alert dialog for irreversible actions like deletion
c-alert-dialog-5
Destructive alert dialog for irreversible actions like deletion
Alert dialog nested within a standard Dialog component
c-alert-dialog-6
Alert dialog nested within a standard Dialog component
Task success confirmation
c-alert-dialog-7
Task success confirmation
Account deactivation confirmation
c-alert-dialog-8
Account deactivation confirmation
Warning for unsaved changes when navigating away
c-alert-dialog-9
Warning for unsaved changes when navigating away
16:9 widescreen aspect ratio
c-aspect-ratio-1
16:9 widescreen aspect ratio
4:3 standard aspect ratio
c-aspect-ratio-2
4:3 standard aspect ratio
1:1 square aspect ratio
c-aspect-ratio-3
1:1 square aspect ratio
21:9 ultrawide aspect ratio
c-aspect-ratio-4
21:9 ultrawide aspect ratio
9:16 portrait aspect ratio
c-aspect-ratio-5
9:16 portrait aspect ratio
3:2 classic photography aspect ratio
c-aspect-ratio-6
3:2 classic photography aspect ratio
4:5 social media portrait aspect ratio
c-aspect-ratio-7
4:5 social media portrait aspect ratio
16:10 computer monitor aspect ratio
c-aspect-ratio-8
16:10 computer monitor aspect ratio
Basic autocomplete control
c-autocomplete-1
Basic autocomplete control
Small autocomplete
c-autocomplete-10
Small autocomplete
Large autocomplete
c-autocomplete-11
Large autocomplete
Form integration
c-autocomplete-12
Form integration
Disabled state
c-autocomplete-2
Disabled state
Auto highlight option as you type
c-autocomplete-3
Auto highlight option as you type
Control with label
c-autocomplete-4
Control with label
With clear button
c-autocomplete-5
With clear button
With trigger button
c-autocomplete-6
With trigger button
With clear and trigger buttons
c-autocomplete-7
With clear and trigger buttons
With groups and labels
c-autocomplete-8
With groups and labels
With search results
c-autocomplete-9
With search results
Basic avatar
c-avatar-1
Basic avatar
Basic avatar group
c-avatar-10
Basic avatar group
Avatar group with numerical count
c-avatar-11
Avatar group with numerical count
Avatar group with an icon count
c-avatar-12
Avatar group with an icon count
Avatar with a distinct border ring
c-avatar-13
Avatar with a distinct border ring
Avatar with light background color fallback
c-avatar-14
Avatar with light background color fallback
Avatar with a solid background color fallback
c-avatar-15
Avatar with a solid background color fallback
Avatar with user details and badge
c-avatar-16
Avatar with user details and badge
Avatar with grayscale image filter
c-avatar-17
Avatar with grayscale image filter
Avatar group with online status on one
c-avatar-18
Avatar group with online status on one
Avatar inside small outline button
c-avatar-19
Avatar inside small outline button
Avatar with fallback
c-avatar-2
Avatar with fallback
Avatar social proof with text label
c-avatar-20
Avatar social proof with text label
Compact social proof with initials
c-avatar-21
Compact social proof with initials
Avatar group with hover tooltips and lift effect
c-avatar-22
Avatar group with hover tooltips and lift effect
Avatar group with hover effect
c-avatar-23
Avatar group with hover effect
Avatar group with hover effect and tooltips
c-avatar-24
Avatar group with hover effect and tooltips
Avatar group with numerical count
c-avatar-25
Avatar group with numerical count
Pilled small outline button with avatar
c-avatar-26
Pilled small outline button with avatar
Pilled small button with avatar
c-avatar-27
Pilled small button with avatar
Avatar inside an empty state example
c-avatar-28
Avatar inside an empty state example
Avatar group with icon count and button
c-avatar-29
Avatar group with icon count and button
Avatars with different sizes
c-avatar-3
Avatars with different sizes
Avatar with loading state demonstration
c-avatar-30
Avatar with loading state demonstration
Avatar with custom badge
c-avatar-31
Avatar with custom badge
Avatar with ring animation
c-avatar-32
Avatar with ring animation
Avatar with gradient animated ring
c-avatar-33
Avatar with gradient animated ring
Avatar with multiple badges
c-avatar-34
Avatar with multiple badges
Compact avatar dropdown menu
c-avatar-35
Compact avatar dropdown menu
Avatars with different border radiuses
c-avatar-4
Avatars with different border radiuses
Avatars with custom sizes
c-avatar-5
Avatars with custom sizes
Avatar with an online status badge
c-avatar-6
Avatar with an online status badge
Avatar with badge icon
c-avatar-7
Avatar with badge icon
Avatar with different badge positions
c-avatar-8
Avatar with different badge positions
Avatar with different badge positions
c-avatar-9
Avatar with different badge positions
Default badge
c-badge-1
Default badge
Info outline badge
c-badge-10
Info outline badge
Success outline badge
c-badge-11
Success outline badge
Warning outline badge
c-badge-12
Warning outline badge
Primary light badge
c-badge-13
Primary light badge
Destructive light badge
c-badge-14
Destructive light badge
Success light badge
c-badge-15
Success light badge
Info light badge
c-badge-16
Info light badge
Warning light badge
c-badge-17
Warning light badge
Badge size variations
c-badge-18
Badge size variations
Badge with full radius (radius="full")
c-badge-19
Badge with full radius (radius="full")
Secondary badge
c-badge-2
Secondary badge
Badge with an icon
c-badge-20
Badge with an icon
Badge with a dismiss button
c-badge-21
Badge with a dismiss button
Badge with a status dot
c-badge-22
Badge with a status dot
Badge rendered as a link
c-badge-23
Badge rendered as a link
Badge with avatar
c-badge-24
Badge with avatar
Badge with flag image
c-badge-25
Badge with flag image
Destructive badge
c-badge-3
Destructive badge
Success badge
c-badge-4
Success badge
Info badge
c-badge-5
Info badge
Warning badge
c-badge-6
Warning badge
Outline badge
c-badge-7
Outline badge
Primary outline badge
c-badge-8
Primary outline badge
Destructive outline badge
c-badge-9
Destructive outline badge
Basic breadcrumb
c-breadcrumb-1
Basic breadcrumb
Pill-style breadcrumb inside frame
c-breadcrumb-10
Pill-style breadcrumb inside frame
Breadcrumb items containing badge with count
c-breadcrumb-11
Breadcrumb items containing badge with count
Breadcrumb starting with home icon item
c-breadcrumb-12
Breadcrumb starting with home icon item
Breadcrumb with a custom separator
c-breadcrumb-13
Breadcrumb with a custom separator
Button-style breadcrumb
c-breadcrumb-14
Button-style breadcrumb
Breadcrumb with project, user and document info
c-breadcrumb-15
Breadcrumb with project, user and document info
Breadcrumb with dropdown menu
c-breadcrumb-2
Breadcrumb with dropdown menu
Breadcrumb with Next.js link
c-breadcrumb-3
Breadcrumb with Next.js link
Breadcrumb with a custom slash separator
c-breadcrumb-4
Breadcrumb with a custom slash separator
Breadcrumb with icons for each item
c-breadcrumb-5
Breadcrumb with icons for each item
Breadcrumb with ellipsis for long paths
c-breadcrumb-6
Breadcrumb with ellipsis for long paths
Breadcrumb items with avatars
c-breadcrumb-7
Breadcrumb items with avatars
Breadcrumb with double chevron separators
c-breadcrumb-8
Breadcrumb with double chevron separators
Breadcrumb inside card
c-breadcrumb-9
Breadcrumb inside card
Default button
c-button-1
Default button
Disabled button
c-button-10
Disabled button
Icon button
c-button-11
Icon button
Button with an icon on the right
c-button-12
Button with an icon on the right
Button in a loading state
c-button-13
Button in a loading state
Button with an icon on the left
c-button-14
Button with an icon on the left
Button with an invalid state highlight
c-button-15
Button with an invalid state highlight
Secondary button with an icon on the left
c-button-16
Secondary button with an icon on the left
Secondary button with an icon on the right
c-button-17
Secondary button with an icon on the right
Outline button with an icon on the left
c-button-18
Outline button with an icon on the left
Outline button with an icon on the right
c-button-19
Outline button with an icon on the right
Secondary button
c-button-2
Secondary button
Ghost button with an icon on the left
c-button-20
Ghost button with an icon on the left
Ghost button with an icon on the right
c-button-21
Ghost button with an icon on the right
Destructive button with an icon on the left
c-button-22
Destructive button with an icon on the left
Destructive button with an icon on the right
c-button-23
Destructive button with an icon on the right
Extra small icon button
c-button-24
Extra small icon button
Small icon button
c-button-25
Small icon button
Large (lg) icon-only button
c-button-26
Large (lg) icon-only button
Button rendered as a Next.js Link
c-button-27
Button rendered as a Next.js Link
Link button with an icon on the left
c-button-28
Link button with an icon on the left
Link button with an icon on the right
c-button-29
Link button with an icon on the right
Outline button
c-button-3
Outline button
Large button with an icon on the left
c-button-30
Large button with an icon on the left
Large button with an icon on the right
c-button-31
Large button with an icon on the right
Outline button with an invalid state
c-button-32
Outline button with an invalid state
Ghost button with an invalid state
c-button-33
Ghost button with an invalid state
Button with an icon on the left
c-button-34
Button with an icon on the left
Ghost button with more/less toggle
c-button-35
Ghost button with more/less toggle
Social login buttons with Remix Icons
c-button-36
Social login buttons with Remix Icons
Outline like button with count
c-button-37
Outline like button with count
Star button with count
c-button-38
Star button with count
Button with an unread badge
c-button-39
Button with an unread badge
Ghost button
c-button-4
Ghost button
Button with icon, label, and shortcut keys
c-button-40
Button with icon, label, and shortcut keys
Copy button with feedback
c-button-41
Copy button with feedback
Icon-only copy button with feedback
c-button-42
Icon-only copy button with feedback
Animated hamburger / close toggle button
c-button-43
Animated hamburger / close toggle button
Async action button with loading and success states
c-button-44
Async action button with loading and success states
Outline button with inline count badge
c-button-45
Outline button with inline count badge
Button with status dot badge
c-button-46
Button with status dot badge
Ghost button with a status badge
c-button-47
Ghost button with a status badge
Icon button with notification badge
c-button-48
Icon button with notification badge
Go back link button
c-button-49
Go back link button
Destructive button
c-button-5
Destructive button
Go back link button with animation
c-button-50
Go back link button with animation
Expanding button from icon to label
c-button-51
Expanding button from icon to label
Multi-line button with icon, title & description
c-button-52
Multi-line button with icon, title & description
Sliding Icon Button (Hover reveal)
c-button-53
Sliding Icon Button (Hover reveal)
Shortcut Tooltip Button (Kbd hints)
c-button-54
Shortcut Tooltip Button (Kbd hints)
Button with avatar
c-button-55
Button with avatar
Outline button with avatar
c-button-56
Outline button with avatar
Small button with avatar
c-button-57
Small button with avatar
Small outline button with avatar
c-button-58
Small outline button with avatar
Social login buttons with Remix icons
c-button-59
Social login buttons with Remix icons
Link button variant
c-button-6
Link button variant
Social icon-only buttons with Remix icons
c-button-60
Social icon-only buttons with Remix icons
Theme toggle button with animated moon and sun icons
c-button-61
Theme toggle button with animated moon and sun icons
Extra small button
c-button-7
Extra small button
Small button
c-button-8
Small button
Large button
c-button-9
Large button
Basic button group with two buttons
c-button-group-1
Basic button group with two buttons
Button group used for standard pagination
c-button-group-10
Button group used for standard pagination
Pagination split into page numbers and navigation arrows
c-button-group-11
Pagination split into page numbers and navigation arrows
Button group for editor text alignment controls
c-button-group-12
Button group for editor text alignment controls
Vertical button group orientation
c-button-group-13
Vertical button group orientation
Nested vertical button group for complex tool palettes
c-button-group-14
Nested vertical button group for complex tool palettes
Star button group with count and dropdown
c-button-group-15
Star button group with count and dropdown
Search input with filter menu and clear button
c-button-group-16
Search input with filter menu and clear button
Button group with comprehensive action menu
c-button-group-17
Button group with comprehensive action menu
Advanced git toolbar with branch selection and split commit button
c-button-group-18
Advanced git toolbar with branch selection and split commit button
Button group with dropdown menu and input group
c-button-group-19
Button group with dropdown menu and input group
Button group with button followed by input
c-button-group-2
Button group with button followed by input
Button group with input group and button
c-button-group-20
Button group with input group and button
Button group with dropdown menu and input group
c-button-group-21
Button group with dropdown menu and input group
Basic button group with disabled button
c-button-group-22
Basic button group with disabled button
Button group buttons with separators
c-button-group-23
Button group buttons with separators
View switcher for dashboard layouts
c-button-group-24
View switcher for dashboard layouts
Rating scale using numerical buttons
c-button-group-25
Rating scale using numerical buttons
Button group with user selection select
c-button-group-26
Button group with user selection select
Button group with select status addon
c-button-group-27
Button group with select status addon
Volume controller with plus/minus actions
c-button-group-28
Volume controller with plus/minus actions
Button group with follower count
c-button-group-29
Button group with follower count
Button group with buttons and badge
c-button-group-3
Button group with buttons and badge
Active state button group with count
c-button-group-30
Active state button group with count
Horizontal button group with primary and secondary labels
c-button-group-31
Horizontal button group with primary and secondary labels
Button group with dropdown menu and view toggle
c-button-group-32
Button group with dropdown menu and view toggle
Button group with select controls
c-button-group-33
Button group with select controls
Segmented control with dropdown inside button group
c-button-group-34
Segmented control with dropdown inside button group
Pagination button group
c-button-group-35
Pagination button group
View switcher button group
c-button-group-36
View switcher button group
Zoom controls button group
c-button-group-37
Zoom controls button group
Media player controls button group
c-button-group-38
Media player controls button group
Split button with dropdown trigger
c-button-group-39
Split button with dropdown trigger
Button group with dropdown menu
c-button-group-4
Button group with dropdown menu
Vertical button group
c-button-group-40
Vertical button group
Model selector with tier badges
c-button-group-41
Model selector with tier badges
Segmented order type selector
c-button-group-42
Segmented order type selector
Buy sell hold toggle group
c-button-group-43
Buy sell hold toggle group
Pipeline stage mover with dropdown
c-button-group-44
Pipeline stage mover with dropdown
Environment switcher with indicator
c-button-group-45
Environment switcher with indicator
Compact time interval selector
c-button-group-46
Compact time interval selector
Review actions split button
c-button-group-47
Review actions split button
Toolbar filter with export and view toggle
c-button-group-48
Toolbar filter with export and view toggle
Vertical nav links with icons
c-button-group-49
Vertical nav links with icons
Team activity and collaboration group
c-button-group-5
Team activity and collaboration group
Toolbar filter sort and more
c-button-group-50
Toolbar filter sort and more
New button with create dropdown
c-button-group-51
New button with create dropdown
Refresh share and export dropdown
c-button-group-52
Refresh share and export dropdown
Publish controls with split button and overflow
c-button-group-53
Publish controls with split button and overflow
API service environment and version selectors
c-button-group-54
API service environment and version selectors
Payout release controls with amount context
c-button-group-55
Payout release controls with amount context
Attachment button group with download action
c-button-group-56
Attachment button group with download action
Agent mode selector with credit cap dropdown
c-button-group-57
Agent mode selector with credit cap dropdown
Button group using icons for visual actions
c-button-group-6
Button group using icons for visual actions
Dropdown menu with status indicator
c-button-group-7
Dropdown menu with status indicator
Button group styled as a like button with a counter
c-button-group-8
Button group styled as a like button with a counter
Nested button groups for complex action sets
c-button-group-9
Nested button groups for complex action sets
Basic calendar
c-calendar-1
Basic calendar
Display week numbers
c-calendar-10
Display week numbers
Current month button
c-calendar-11
Current month button
Today button
c-calendar-12
Today button
Custom navigation with year view
c-calendar-13
Custom navigation with year view
Preset time selection
c-calendar-14
Preset time selection
Calendar with presets
c-calendar-15
Calendar with presets
Range calendar with presets
c-calendar-16
Range calendar with presets
Calendar with pricing
c-calendar-17
Calendar with pricing
Calendar with presets
c-calendar-18
Calendar with presets
Appointment calendar
c-calendar-19
Appointment calendar
Range calendar
c-calendar-2
Range calendar
Display 2 months
c-calendar-20
Display 2 months
Display 2 months with range picker
c-calendar-21
Display 2 months with range picker
Calendar with event list
c-calendar-22
Calendar with event list
Localize calendar
c-calendar-23
Localize calendar
Calendar with date picker
c-calendar-24
Calendar with date picker
Calendar with date range picker
c-calendar-25
Calendar with date range picker
Calendar with date picker and year view
c-calendar-26
Calendar with date picker and year view
Calendar with date and appointment picker
c-calendar-27
Calendar with date and appointment picker
Calendar with date picker and presets
c-calendar-28
Calendar with date picker and presets
Range calendar with date picker and presets
c-calendar-29
Range calendar with date picker and presets
Disabled dates
c-calendar-3
Disabled dates
Calendar with date and time range picker
c-calendar-30
Calendar with date and time range picker
Multiple day selection
c-calendar-4
Multiple day selection
Custom select day style
c-calendar-5
Custom select day style
Custom select range style
c-calendar-6
Custom select range style
Right navigation
c-calendar-7
Right navigation
Month and year selection
c-calendar-8
Month and year selection
Year select with navigation
c-calendar-9
Year select with navigation
Basic card
c-card-1
Basic card
Full card with image and shadow fade effect
c-card-10
Full card with image and shadow fade effect
Card with stacked depth effect
c-card-11
Card with stacked depth effect
Advanced clean login form card
c-card-12
Advanced clean login form card
Expandable billing usage card
c-card-13
Expandable billing usage card
Deployment status summary card
c-card-14
Deployment status summary card
Stat card with trend and overflow menu
c-card-15
Stat card with trend and overflow menu
Card with header badge and actions
c-card-16
Card with header badge and actions
Card with icon, title and link
c-card-17
Card with icon, title and link
Card with header label and link
c-card-18
Card with header label and link
Card header with border
c-card-2
Card header with border
Card with border separation
c-card-3
Card with border separation
Card with header and footer
c-card-4
Card with header and footer
Card with link
c-card-5
Card with link
Card with dropdown menu
c-card-6
Card with dropdown menu
Card with image
c-card-7
Card with image
Card with image scale hover effect
c-card-8
Card with image scale hover effect
Card with full image
c-card-9
Card with full image
Basic carousel with single item
c-carousel-1
Basic carousel with single item
Carousel with overlay thumbnail navigation
c-carousel-10
Carousel with overlay thumbnail navigation
Carousel with dots navigation and content overlays
c-carousel-11
Carousel with dots navigation and content overlays
Vertical carousel orientation
c-carousel-2
Vertical carousel orientation
Carousel with multiple items visible
c-carousel-3
Carousel with multiple items visible
Carousel with responsive basis
c-carousel-4
Carousel with responsive basis
Carousel with autoplay plugin
c-carousel-5
Carousel with autoplay plugin
Carousel with centered slide alignment
c-carousel-6
Carousel with centered slide alignment
Carousel with custom spacing
c-carousel-7
Carousel with custom spacing
Carousel with images and overlays
c-carousel-8
Carousel with images and overlays
Carousel with thumbnail navigation
c-carousel-9
Carousel with thumbnail navigation
Basic bar chart
c-chart-1
Basic bar chart
Duotone gradient bar chart
c-chart-10
Duotone gradient bar chart
Animated monochrome bar chart
c-chart-11
Animated monochrome bar chart
Vertical bar chart
c-chart-12
Vertical bar chart
Gradient area chart with stripe overlay
c-chart-13
Gradient area chart with stripe overlay
Stacked area chart with dashed strokes
c-chart-14
Stacked area chart with dashed strokes
Step area chart with dotted pattern fill
c-chart-15
Step area chart with dotted pattern fill
Area chart with glowing dot markers
c-chart-16
Area chart with glowing dot markers
Forecast line chart with stripe pattern zone
c-chart-17
Forecast line chart with stripe pattern zone
Stacked area chart with crosshatch pattern fill
c-chart-18
Stacked area chart with crosshatch pattern fill
Donut chart with center total
c-chart-19
Donut chart with center total
Multi-dataset bar chart
c-chart-2
Multi-dataset bar chart
Donut chart with center stats
c-chart-20
Donut chart with center stats
Bug priority pie with stripe patterns
c-chart-21
Bug priority pie with stripe patterns
Active segment donut with center label
c-chart-22
Active segment donut with center label
Radar chart with gradient fill
c-chart-23
Radar chart with gradient fill
Filled radar with glowing stroke
c-chart-24
Filled radar with glowing stroke
Lighthouse scores radial with labels
c-chart-25
Lighthouse scores radial with labels
Diagonal stripe bar chart
c-chart-3
Diagonal stripe bar chart
Dotted pattern bar chart
c-chart-4
Dotted pattern bar chart
Striped and solid bar chart
c-chart-5
Striped and solid bar chart
3D gradient bar chart
c-chart-6
3D gradient bar chart
Gradient bar chart
c-chart-7
Gradient bar chart
3D isometric bar chart
c-chart-8
3D isometric bar chart
Dotted and solid bar chart
c-chart-9
Dotted and solid bar chart
Basic checkbox with label
c-checkbox-1
Basic checkbox with label
Checkbox group in a frame
c-checkbox-10
Checkbox group in a frame
Card checkbox group with icons
c-checkbox-11
Card checkbox group with icons
Card checkbox group with icons
c-checkbox-12
Card checkbox group with icons
Custom positioned checkbox
c-checkbox-13
Custom positioned checkbox
Custom positioned checkbox
c-checkbox-14
Custom positioned checkbox
Avatar based card checkbox
c-checkbox-15
Avatar based card checkbox
Nested checkbox group
c-checkbox-16
Nested checkbox group
Payment method card checkbox
c-checkbox-17
Payment method card checkbox
Checkbox with label and tooltip info
c-checkbox-18
Checkbox with label and tooltip info
Checkbox group with badge
c-checkbox-19
Checkbox group with badge
Disabled checkbox
c-checkbox-2
Disabled checkbox
Checkbox with label and tooltip info
c-checkbox-20
Checkbox with label and tooltip info
Inline horizontal checkbox group
c-checkbox-21
Inline horizontal checkbox group
Checkbox with feature badge
c-checkbox-22
Checkbox with feature badge
Invalid checkbox
c-checkbox-3
Invalid checkbox
Indeterminate checkbox
c-checkbox-4
Indeterminate checkbox
Checkbox with label and description
c-checkbox-5
Checkbox with label and description
Colored checkbox
c-checkbox-6
Colored checkbox
Circle checkbox
c-checkbox-7
Circle checkbox
Checkbox group
c-checkbox-8
Checkbox group
Card checkbox with group
c-checkbox-9
Card checkbox with group
Basic collapsible
c-collapsible-1
Basic collapsible
Tree view with file actions
c-collapsible-10
Tree view with file actions
Collapsible with checkbox settings
c-collapsible-2
Collapsible with checkbox settings
Collapsible animated card
c-collapsible-3
Collapsible animated card
Collapsible card with bottom trigger
c-collapsible-4
Collapsible card with bottom trigger
Collapsible form fields
c-collapsible-5
Collapsible form fields
Collapsible frame
c-collapsible-6
Collapsible frame
Nested collapsible list with actions
c-collapsible-7
Nested collapsible list with actions
Collapsible User profile
c-collapsible-8
Collapsible User profile
Multi-level collapsible menu
c-collapsible-9
Multi-level collapsible menu
A basic combobox with a list of options
c-combobox-1
A basic combobox with a list of options
A combobox rendered inside a popup
c-combobox-10
A combobox rendered inside a popup
A combobox used within a form
c-combobox-11
A combobox used within a form
A multi-select combobox
c-combobox-12
A multi-select combobox
A disabled multi-select combobox
c-combobox-13
A disabled multi-select combobox
A multi-select combobox in an invalid state
c-combobox-14
A multi-select combobox in an invalid state
A multi-select with chips that cannot be removed
c-combobox-15
A multi-select with chips that cannot be removed
A combobox with custom item rendering
c-combobox-16
A combobox with custom item rendering
A combobox used within a dialog
c-combobox-17
A combobox used within a dialog
A combobox with a custom trigger icon
c-combobox-18
A combobox with a custom trigger icon
A multi-select combobox with user tags
c-combobox-19
A multi-select combobox with user tags
A disabled combobox
c-combobox-2
A disabled combobox
Invisible combobox with member tags
c-combobox-20
Invisible combobox with member tags
A status change combobox
c-combobox-21
A status change combobox
A priority change combobox
c-combobox-22
A priority change combobox
A lead selection combobox
c-combobox-23
A lead selection combobox
A multi-member selection combobox
c-combobox-24
A multi-member selection combobox
A date selection combobox with an optional custom picker dialog
c-combobox-25
A date selection combobox with an optional custom picker dialog
A multi-label selection combobox with a no-label mode
c-combobox-26
A multi-label selection combobox with a no-label mode
A team selection combobox
c-combobox-27
A team selection combobox
An assignee selection combobox
c-combobox-28
An assignee selection combobox
A combobox in an invalid state
c-combobox-3
A combobox in an invalid state
A combobox with a clear button
c-combobox-4
A combobox with a clear button
A combobox with auto-highlight enabled
c-combobox-5
A combobox with auto-highlight enabled
A combobox with grouped options
c-combobox-6
A combobox with grouped options
A combobox with grouped options and separators
c-combobox-7
A combobox with grouped options and separators
A combobox with a large list of options
c-combobox-8
A combobox with a large list of options
A combobox with an icon addon
c-combobox-9
A combobox with an icon addon
Basic command
c-command-1
Basic command
Command with shortcuts
c-command-2
Command with shortcuts
Command with groups
c-command-3
Command with groups
Command with many groups
c-command-4
Command with many groups
File search command palette
c-command-5
File search command palette
User search command with avatars
c-command-6
User search command with avatars
Action palette with keyboard shortcuts
c-command-7
Action palette with keyboard shortcuts
Command with recent and favorites sections
c-command-8
Command with recent and favorites sections
Basic context menu.
c-context-menu-1
Basic context menu.
Context menu used inside a dialog component.
c-context-menu-10
Context menu used inside a dialog component.
Context menu with icons for common actions.
c-context-menu-2
Context menu with icons for common actions.
Context menu with keyboard shortcuts.
c-context-menu-3
Context menu with keyboard shortcuts.
Context menu with nested submenus.
c-context-menu-4
Context menu with nested submenus.
Context menu labels and separators.
c-context-menu-5
Context menu labels and separators.
Context menu with checkbox items.
c-context-menu-6
Context menu with checkbox items.
Context menu with radio items.
c-context-menu-7
Context menu with radio items.
Context menu with destructive actions.
c-context-menu-8
Context menu with destructive actions.
Context menu with different alignment sides.
c-context-menu-9
Context menu with different alignment sides.
Data grid with pagination
c-data-grid-1
Data grid with pagination
Data grid with column icons
c-data-grid-10
Data grid with column icons
Data grid with sortable columns
c-data-grid-11
Data grid with sortable columns
Data grid with movable columns
c-data-grid-12
Data grid with movable columns
Data grid with draggable columns
c-data-grid-13
Data grid with draggable columns
Data grid with draggable rows
c-data-grid-14
Data grid with draggable rows
Data grid with column resizing
c-data-grid-15
Data grid with column resizing
Data grid with pinnable columns
c-data-grid-16
Data grid with pinnable columns
Data grid with sticky header
c-data-grid-17
Data grid with sticky header
Data grid with column controls
c-data-grid-18
Data grid with column controls
Data grid with card container
c-data-grid-19
Data grid with card container
Data grid with cell border
c-data-grid-2
Data grid with cell border
Data grid with column visibility controls
c-data-grid-20
Data grid with column visibility controls
Data grid with loading skeleton
c-data-grid-21
Data grid with loading skeleton
Data grid with CRUD features
c-data-grid-22
Data grid with CRUD features
Data grid with CRUD in frame container
c-data-grid-23
Data grid with CRUD in frame container
Data grid with column totals footer
c-data-grid-24
Data grid with column totals footer
Data grid with summary stats footer
c-data-grid-25
Data grid with summary stats footer
Data grid with per-column aggregate footer
c-data-grid-26
Data grid with per-column aggregate footer
Data grid with local infinite scroll
c-data-grid-27
Data grid with local infinite scroll
Data grid with remote infinite scroll
c-data-grid-28
Data grid with remote infinite scroll
Data grid with row pinning support
c-data-grid-29
Data grid with row pinning support
Data grid with dense layout
c-data-grid-3
Data grid with dense layout
Data grid without table borders
c-data-grid-4
Data grid without table borders
Data grid with striped rows
c-data-grid-5
Data grid with striped rows
Data grid with auto width table layout
c-data-grid-6
Data grid with auto width table layout
Data grid with row selection
c-data-grid-7
Data grid with row selection
Data grid with expandable rows
c-data-grid-8
Data grid with expandable rows
Data grid with sub table
c-data-grid-9
Data grid with sub table
Basic date selector
c-date-selector-1
Basic date selector
Date selector with popover
c-date-selector-2
Date selector with popover
Date selector with dialog
c-date-selector-3
Date selector with dialog
Date selector with dropdown menu
c-date-selector-4
Date selector with dropdown menu
Basic dialog
c-dialog-1
Basic dialog
Dialog with full width button
c-dialog-10
Dialog with full width button
Dialog with scrollable content
c-dialog-2
Dialog with scrollable content
Dialog with scrollable content and sticky footer.
c-dialog-3
Dialog with scrollable content and sticky footer.
Dialog without a close button.
c-dialog-4
Dialog without a close button.
Dialog with custom close button
c-dialog-5
Dialog with custom close button
Full-screen fluid dialog with sticky header and footer
c-dialog-6
Full-screen fluid dialog with sticky header and footer
Confirmation dialog with destructive action
c-dialog-7
Confirmation dialog with destructive action
Cookie consent dialog
c-dialog-8
Cookie consent dialog
Dialog with keyboard shortcuts list
c-dialog-9
Dialog with keyboard shortcuts list
A basic drawer with scrollable content
c-drawer-1
A basic drawer with scrollable content
A drawer that opens from the right side
c-drawer-2
A drawer that opens from the right side
A drawer that opens from the left side
c-drawer-3
A drawer that opens from the left side
A drawer that opens from the top side
c-drawer-4
A drawer that opens from the top side
Drawers opening from different sides
c-drawer-5
Drawers opening from different sides
Basic dropdown menu
c-dropdown-menu-1
Basic dropdown menu
Workspace switcher dropdown menu
c-dropdown-menu-10
Workspace switcher dropdown menu
Notifications dropdown menu
c-dropdown-menu-11
Notifications dropdown menu
Actions dropdown menu
c-dropdown-menu-12
Actions dropdown menu
Share and export dropdown menu
c-dropdown-menu-13
Share and export dropdown menu
User profile dropdown menu with theme toggle and status selector
c-dropdown-menu-14
User profile dropdown menu with theme toggle and status selector
User and create menu
c-dropdown-menu-15
User and create menu
Quick action menu
c-dropdown-menu-16
Quick action menu
Notifications dropdown with items
c-dropdown-menu-17
Notifications dropdown with items
AI model selector with provider icons
c-dropdown-menu-18
AI model selector with provider icons
Dropdown menus opening positions
c-dropdown-menu-2
Dropdown menus opening positions
Dropdown menu with icons
c-dropdown-menu-3
Dropdown menu with icons
Dropdown menu with keyboard shortcuts
c-dropdown-menu-4
Dropdown menu with keyboard shortcuts
Dropdown menu with nested submenus
c-dropdown-menu-5
Dropdown menu with nested submenus
Dropdown menu with checkboxes
c-dropdown-menu-6
Dropdown menu with checkboxes
Dropdown menu with radio groups
c-dropdown-menu-7
Dropdown menu with radio groups
Advance dropdown menu
c-dropdown-menu-8
Advance dropdown menu
User profile dropdown menu
c-dropdown-menu-9
User profile dropdown menu
Basic empty state
c-empty-1
Basic empty state
No data analytics empty state
c-empty-10
No data analytics empty state
Bookmarks empty state
c-empty-11
Bookmarks empty state
Tasks empty state
c-empty-12
Tasks empty state
No automations empty state with toggle illustration
c-empty-13
No automations empty state with toggle illustration
Comments empty state with isometric board illustration
c-empty-14
Comments empty state with isometric board illustration
No products empty state with stacked cards and blur effect
c-empty-15
No products empty state with stacked cards and blur effect
Search empty state with stacked file cards illustration
c-empty-16
Search empty state with stacked file cards illustration
No messages empty state with chat bubbles illustration
c-empty-17
No messages empty state with chat bubbles illustration
No payments empty state with credit card illustration
c-empty-18
No payments empty state with credit card illustration
No integrations empty state with connected nodes illustration
c-empty-19
No integrations empty state with connected nodes illustration
Search empty state
c-empty-2
Search empty state
No events empty state with calendar illustration
c-empty-20
No events empty state with calendar illustration
Empty state with search input
c-empty-3
Empty state with search input
Empty state with add button
c-empty-4
Empty state with add button
Document empty state
c-empty-5
Document empty state
Dashed upload empty state
c-empty-6
Dashed upload empty state
Inbox empty state
c-empty-7
Inbox empty state
Team members empty state
c-empty-8
Team members empty state
No notifications empty state
c-empty-9
No notifications empty state
Fields with input groups
c-field-1
Fields with input groups
Notification preferences form
c-field-10
Notification preferences form
Form with validation errors
c-field-11
Form with validation errors
Field with input and textarea
c-field-2
Field with input and textarea
Field with select control
c-field-3
Field with select control
Field with radio groups and checkboxes
c-field-4
Field with radio groups and checkboxes
Filed with slider and switch
c-field-5
Filed with slider and switch
Field with OTP input
c-field-6
Field with OTP input
Settings form with validation
c-field-7
Settings form with validation
Permission settings with checkboxes
c-field-8
Permission settings with checkboxes
Responsive field layout
c-field-9
Responsive field layout
Basic file upload
c-file-upload-1
Basic file upload
Cover image upload.
c-file-upload-10
Cover image upload.
Avatar upload
c-file-upload-2
Avatar upload
Basic drag and drop file upload
c-file-upload-3
Basic drag and drop file upload
Gallery file upload
c-file-upload-4
Gallery file upload
Progress file upload
c-file-upload-5
Progress file upload
Table file upload
c-file-upload-6
Table file upload
Image upload
c-file-upload-7
Image upload
Image upload with sorting.
c-file-upload-8
Image upload with sorting.
Card file upload.
c-file-upload-9
Card file upload.
Filters with various field types
c-filters-1
Filters with various field types
Filters with input validation
c-filters-2
Filters with input validation
Filters with custom trigger button
c-filters-3
Filters with custom trigger button
Filters with small size controls
c-filters-4
Filters with small size controls
Filters with large size controls
c-filters-5
Filters with large size controls
Filters with custom controls
c-filters-6
Filters with custom controls
Filters with data grid
c-filters-7
Filters with data grid
Filters with data grid and async mode
c-filters-8
Filters with data grid and async mode
Filters with i18n support
c-filters-9
Filters with i18n support
Basic frame
c-frame-1
Basic frame
Frame with small spacing
c-frame-10
Frame with small spacing
Frame with default spacing
c-frame-11
Frame with default spacing
Frame with large spacing
c-frame-12
Frame with large spacing
Frame with small border radius
c-frame-13
Frame with small border radius
Frame with medium border radius
c-frame-14
Frame with medium border radius
Frame with large border radius
c-frame-15
Frame with large border radius
Frame with default border radius
c-frame-16
Frame with default border radius
Frame with extra large border radius
c-frame-17
Frame with extra large border radius
Frame with content-only panels
c-frame-18
Frame with content-only panels
Frame with stacked content-only panels
c-frame-19
Frame with stacked content-only panels
Frame with separated panels
c-frame-2
Frame with separated panels
Frame with stacked panels
c-frame-3
Frame with stacked panels
Frame with stacked panels and dense style
c-frame-4
Frame with stacked panels and dense style
Frame with collapsible panels
c-frame-5
Frame with collapsible panels
Frame with ghost variant
c-frame-6
Frame with ghost variant
Frame with dense layout
c-frame-7
Frame with dense layout
Frame with stacked panels
c-frame-8
Frame with stacked panels
Frame with extra small spacing
c-frame-9
Frame with extra small spacing
Basic hover card.
c-hover-card-1
Basic hover card.
Hover card with positions.
c-hover-card-2
Hover card with positions.
Hover card with profile information.
c-hover-card-3
Hover card with profile information.
Hover card with icon
c-hover-card-4
Hover card with icon
Hover card with an image and text content.
c-hover-card-5
Hover card with an image and text content.
Hover card inside a dialog.
c-hover-card-6
Hover card inside a dialog.
Timestamp hover card with active relative time
c-hover-card-7
Timestamp hover card with active relative time
Hover card with paginated release notes
c-hover-card-8
Hover card with paginated release notes
Isometric icon stack
c-icon-stack-1
Layered isometric icon
Icon stack sizes
c-icon-stack-2
Responsive icon stack sizes
Icon stack colors
c-icon-stack-3
Semantic icon stack colors
Icon badge stack
c-icon-stack-4
Icon stack with badge overlay
Empty state illustration
c-icon-stack-5
Shadcn empty state illustration
Item media stack
c-icon-stack-6
Icon stack in shadcn item
Basic input
c-input-1
Basic input
Input with number type
c-input-10
Input with number type
Input with date type
c-input-11
Input with date type
Input with file type
c-input-12
Input with file type
Input with required indicator
c-input-13
Input with required indicator
Input with time type
c-input-14
Input with time type
Complex input form with multiple fields
c-input-15
Complex input form with multiple fields
Input label with tooltip
c-input-16
Input label with tooltip
Input label with badge
c-input-17
Input label with badge
Input label with optional badge
c-input-18
Input label with optional badge
Input label with link and visibility toggle
c-input-19
Input label with link and visibility toggle
Input with label
c-input-2
Input with label
Input with horizontal orientation
c-input-20
Input with horizontal orientation
Input with multiple error messages
c-input-21
Input with multiple error messages
Basic password strength with dynamic hint and icons
c-input-22
Basic password strength with dynamic hint and icons
Advanced password strength indicator with progress
c-input-23
Advanced password strength indicator with progress
Input with pulsed background animation
c-input-24
Input with pulsed background animation
Input with custom focus ring
c-input-25
Input with custom focus ring
Input with subtle background
c-input-26
Input with subtle background
Input with bottom border only
c-input-27
Input with bottom border only
Color input
c-input-28
Color input
Range input with value indicator
c-input-29
Range input with value indicator
Input with description
c-input-3
Input with description
Pill-shaped input
c-input-30
Pill-shaped input
Minimal input without borders or background
c-input-31
Minimal input without borders or background
Disabled input
c-input-4
Disabled input
Input with error message
c-input-5
Input with error message
Input with character counter
c-input-6
Input with character counter
Input with password type
c-input-7
Input with password type
Input with phone type
c-input-8
Input with phone type
Input with URL type
c-input-9
Input with URL type
Basic input group
c-input-group-1
Basic input group
Input group with action button addon
c-input-group-10
Input group with action button addon
Input group with icon button action
c-input-group-11
Input group with icon button action
Input group with dropdown menu selection
c-input-group-12
Input group with dropdown menu selection
Input group with keyboard shortcut (Kbd)
c-input-group-13
Input group with keyboard shortcut (Kbd)
Input group with tooltip action
c-input-group-14
Input group with tooltip action
Input group with loading spinner
c-input-group-15
Input group with loading spinner
Input group with block-start addon
c-input-group-16
Input group with block-start addon
Textarea input group with dynamic character limit
c-input-group-17
Textarea input group with dynamic character limit
AI Chat textarea with rich toolbar actions
c-input-group-18
AI Chat textarea with rich toolbar actions
AI Chat interface with file and context attachments
c-input-group-19
AI Chat interface with file and context attachments
Input group in disabled state
c-input-group-2
Input group in disabled state
Input group demonstrating label usage
c-input-group-20
Input group demonstrating label usage
Input group with multiple icons/buttons at the end
c-input-group-21
Input group with multiple icons/buttons at the end
Input group with popover trigger addon
c-input-group-22
Input group with popover trigger addon
Input group with Sparkles icon and complex Kbd shortcut
c-input-group-23
Input group with Sparkles icon and complex Kbd shortcut
Input group with success indicator circle
c-input-group-24
Input group with success indicator circle
Input group with search results count
c-input-group-25
Input group with search results count
Textarea input group with action buttons
c-input-group-26
Textarea input group with action buttons
Input group wrapped in a button group with text prefixes/suffixes
c-input-group-27
Input group wrapped in a button group with text prefixes/suffixes
Input group with a menu button (three dots) at the end
c-input-group-28
Input group with a menu button (three dots) at the end
Pill-shaped input group with a category dropdown at the end
c-input-group-29
Pill-shaped input group with a category dropdown at the end
Input group in invalid state
c-input-group-3
Input group in invalid state
Input group with inline addons (no separating borders)
c-input-group-30
Input group with inline addons (no separating borders)
Input group with inline start and block-end addon
c-input-group-31
Input group with inline start and block-end addon
Member row with avatar, email and role selection
c-input-group-32
Member row with avatar, email and role selection
Project save interface with status and action buttons
c-input-group-33
Project save interface with status and action buttons
Pill-shaped AI prompt bar with voice and audio icons
c-input-group-34
Pill-shaped AI prompt bar with voice and audio icons
Password input with visibility toggle
c-input-group-35
Password input with visibility toggle
API request input with method selector and send action
c-input-group-36
API request input with method selector and send action
Order search input with status filter
c-input-group-37
Order search input with status filter
Company search input with region selector
c-input-group-38
Company search input with region selector
Contact search input with filter and actions menu
c-input-group-39
Contact search input with filter and actions menu
Input group with prefix icon
c-input-group-4
Input group with prefix icon
Share link input with visibility selector and copy action
c-input-group-40
Share link input with visibility selector and copy action
Input group with suffix icon
c-input-group-5
Input group with suffix icon
Input group with both prefix and suffix icons
c-input-group-6
Input group with both prefix and suffix icons
Input group with prefix text addon
c-input-group-7
Input group with prefix text addon
Input group with suffix text addon
c-input-group-8
Input group with suffix text addon
Input group with both prefix and suffix text addons
c-input-group-9
Input group with both prefix and suffix text addons
Basic OTP input.
c-input-otp-1
Basic OTP input.
OTP input with numeric digits.
c-input-otp-2
OTP input with numeric digits.
OTP input with multiple separators.
c-input-otp-3
OTP input with multiple separators.
OTP input with letters and numbers.
c-input-otp-4
OTP input with letters and numbers.
OTP input for PIN codes.
c-input-otp-5
OTP input for PIN codes.
OTP input verification code.
c-input-otp-6
OTP input verification code.
Basic item with title and description
c-item-1
Basic item with title and description
Item with header and footer sections
c-item-10
Item with header and footer sections
Integration items with connect actions
c-item-11
Integration items with connect actions
Activity feed items with avatars and actions
c-item-12
Activity feed items with avatars and actions
Items with icon media and action buttons
c-item-2
Items with icon media and action buttons
User item with avatar, info, and follow button
c-item-3
User item with avatar, info, and follow button
Clickable navigation items with icons and chevron
c-item-4
Clickable navigation items with icons and chevron
Item group with status badges
c-item-5
Item group with status badges
File items with icon media, size, and actions
c-item-6
File items with icon media, size, and actions
Items with keyboard shortcuts
c-item-7
Items with keyboard shortcuts
Small-size items with badges
c-item-8
Small-size items with badges
Team members with roles and multiple actions
c-item-9
Team members with roles and multiple actions
Kanban board with placeholder overlay
c-kanban-1
Kanban board with placeholder overlay
Kanban board with dynamic overlay
c-kanban-2
Kanban board with dynamic overlay
Kanban board with frame columns
c-kanban-3
Kanban board with frame columns
Minimal kanban with stacked frame
c-kanban-4
Minimal kanban with stacked frame
Feature roadmap kanban with progress
c-kanban-5
Feature roadmap kanban with progress
Basic keyboard keys.
c-kbd-1
Basic keyboard keys.
Keyboard keys grouped together.
c-kbd-2
Keyboard keys grouped together.
Keyboard keys combined with icons.
c-kbd-3
Keyboard keys combined with icons.
Keyboard key within an input.
c-kbd-4
Keyboard key within an input.
Keyboard shortcut in a tooltip.
c-kbd-5
Keyboard shortcut in a tooltip.
Keyboard shortcuts reference list
c-kbd-6
Keyboard shortcuts reference list
Basic label.
c-label-1
Basic label.
Label with helper description text
c-label-10
Label with helper description text
Label with error state
c-label-11
Label with error state
Label with inline edit toggle
c-label-12
Label with inline edit toggle
Label with status indicator dot
c-label-13
Label with status indicator dot
Label paired with a checkbox.
c-label-2
Label paired with a checkbox.
Label for a textarea field.
c-label-3
Label for a textarea field.
Label in a disabled state.
c-label-4
Label in a disabled state.
Label with required indicator
c-label-5
Label with required indicator
Label with optional indicator
c-label-6
Label with optional indicator
Label with tooltip info icon
c-label-7
Label with tooltip info icon
Label with badge indicator
c-label-8
Label with badge indicator
Label with character counter
c-label-9
Label with character counter
Basic menubar.
c-menubar-1
Basic menubar.
Menubar with dropdown submenus.
c-menubar-2
Menubar with dropdown submenus.
Menubar with checkbox & radio items.
c-menubar-3
Menubar with checkbox & radio items.
Menubar with icons.
c-menubar-4
Menubar with icons.
Menubar for formatting and media.
c-menubar-5
Menubar for formatting and media.
Basic native select.
c-native-select-1
Basic native select.
Native select with options grouped.
c-native-select-2
Native select with options grouped.
Small native select.
c-native-select-3
Small native select.
Native select embedded within a field.
c-native-select-4
Native select embedded within a field.
Disabled native select.
c-native-select-5
Disabled native select.
Invalid native select.
c-native-select-6
Invalid native select.
Basic navigation menu.
c-navigation-menu-1
Basic navigation menu.
Navigation menu with grid layout.
c-navigation-menu-2
Navigation menu with grid layout.
Navigation menu with icons.
c-navigation-menu-3
Navigation menu with icons.
Navigation menu with grid layout and learn more button.
c-navigation-menu-4
Navigation menu with grid layout and learn more button.
Basic number field
c-number-field-1
Basic number field
Basic number field
c-number-field-2
Basic number field
Basic number field
c-number-field-3
Basic number field
Number filed with buttons on right
c-number-field-4
Number filed with buttons on right
Number field with spinner buttons
c-number-field-5
Number field with spinner buttons
Number field in form
c-number-field-6
Number field in form
Basic pagination.
c-pagination-1
Basic pagination.
Pagination with ellipsis indicator
c-pagination-10
Pagination with ellipsis indicator
Pagination with outline style buttons
c-pagination-11
Pagination with outline style buttons
Rows per page select with range info and first/prev/next/last icons
c-pagination-12
Rows per page select with range info and first/prev/next/last icons
Pagination with page select dropdown and first/last navigation
c-pagination-13
Pagination with page select dropdown and first/last navigation
Numbered pagination with go-to-page input
c-pagination-14
Numbered pagination with go-to-page input
Pagination with page info, numbered pages, ellipsis, and per-page select
c-pagination-15
Pagination with page info, numbered pages, ellipsis, and per-page select
Pagination without labels.
c-pagination-2
Pagination without labels.
Pagination with hover effect.
c-pagination-3
Pagination with hover effect.
Pagination with circle buttons.
c-pagination-4
Pagination with circle buttons.
Pagination with go-to-page input
c-pagination-5
Pagination with go-to-page input
Numbered pagination in card
c-pagination-6
Numbered pagination in card
Pagination with arrows buttons
c-pagination-7
Pagination with arrows buttons
Pagination with page info on center
c-pagination-8
Pagination with page info on center
Pagination with page info on left
c-pagination-9
Pagination with page info on left
Basic phone input
c-phone-input-1
Basic phone input
Small phone input
c-phone-input-2
Small phone input
Large phone input
c-phone-input-3
Large phone input
Disabled phone input
c-phone-input-4
Disabled phone input
Phone input with preset value
c-phone-input-5
Phone input with preset value
Phone input with error state
c-phone-input-6
Phone input with error state
Phone input with specific default country
c-phone-input-7
Phone input with specific default country
Read-only phone input
c-phone-input-8
Read-only phone input
Basic popover.
c-popover-1
Basic popover.
Popover with controls
c-popover-10
Popover with controls
Popover with navigation
c-popover-11
Popover with navigation
Popovers opening from different sides.
c-popover-2
Popovers opening from different sides.
Popover with form.
c-popover-3
Popover with form.
Popover alignment positions.
c-popover-4
Popover alignment positions.
Popover within a dialog.
c-popover-5
Popover within a dialog.
Popover with user profile details.
c-popover-6
Popover with user profile details.
Popover with custom content
c-popover-7
Popover with custom content
Popover with media preview.
c-popover-8
Popover with media preview.
Relative time popover with timezone details
c-popover-9
Relative time popover with timezone details
Basic progress.
c-progress-1
Basic progress.
Small progress.
c-progress-2
Small progress.
Large progress.
c-progress-3
Large progress.
Progress bar with status messages.
c-progress-4
Progress bar with status messages.
File upload list with progress & status.
c-progress-5
File upload list with progress & status.
Progress bar with slider.
c-progress-6
Progress bar with slider.
Multi-step progress indicator
c-progress-7
Multi-step progress indicator
Progress bar with custom colors.
c-progress-8
Progress bar with custom colors.
Basic radio group
c-radio-group-1
Basic radio group
Radio group in frame
c-radio-group-10
Radio group in frame
Radio group with grid layout
c-radio-group-11
Radio group with grid layout
Avatar based card radio group
c-radio-group-12
Avatar based card radio group
Payment method radio cards
c-radio-group-13
Payment method radio cards
Radio group with tooltip info
c-radio-group-14
Radio group with tooltip info
Radio group with badges
c-radio-group-15
Radio group with badges
Inline horizontal radio group
c-radio-group-16
Inline horizontal radio group
Pricing plan radio cards
c-radio-group-17
Pricing plan radio cards
Disabled radio group
c-radio-group-2
Disabled radio group
Radio with description
c-radio-group-3
Radio with description
Invalid radio group
c-radio-group-4
Invalid radio group
Colored radio group
c-radio-group-5
Colored radio group
Radio group with legend and description
c-radio-group-6
Radio group with legend and description
Card radio group with descriptions
c-radio-group-7
Card radio group with descriptions
Radio group in card with separators
c-radio-group-8
Radio group in card with separators
Radio group in card with icons
c-radio-group-9
Radio group in card with icons
Basic rating.
c-rating-1
Basic rating.
Rating with decimal value.
c-rating-2
Rating with decimal value.
Rating with show value.
c-rating-3
Rating with show value.
Rating with editable.
c-rating-4
Rating with editable.
Rating with size.
c-rating-5
Rating with size.
Rating with review summary
c-rating-6
Rating with review summary
Interactive half-star rating
c-rating-7
Interactive half-star rating
Emoji reaction rating
c-rating-8
Emoji reaction rating
Rating with review text input
c-rating-9
Rating with review text input
Horizontal resizable layout
c-resizable-1
Horizontal resizable layout
State-tracked resizable layout.
c-resizable-10
State-tracked resizable layout.
Vertical resizable layout.
c-resizable-2
Vertical resizable layout.
Nested mixed-direction resizable layout.
c-resizable-3
Nested mixed-direction resizable layout.
Nested resizable
c-resizable-4
Nested resizable
Handle with animated pill indicator
c-resizable-5
Handle with animated pill indicator
Handle pill with spring scale on drag
c-resizable-6
Handle pill with spring scale on drag
Handle with large capsule expansion on drag
c-resizable-7
Handle with large capsule expansion on drag
Nested layout with animated pill handles
c-resizable-8
Nested layout with animated pill handles
Three-panel layout with animated pill handles
c-resizable-9
Three-panel layout with animated pill handles
Basic scroll area
c-scroll-area-1
Basic scroll area
Scroll area with horizontal scrollbar
c-scroll-area-2
Scroll area with horizontal scrollbar
Scroll area with both scrollbars
c-scroll-area-3
Scroll area with both scrollbars
Scroll area with fade effect
c-scroll-area-4
Scroll area with fade effect
Scroll area with scrollbar gutter
c-scroll-area-5
Scroll area with scrollbar gutter
Basic scrollspy
c-scrollspy-1
Basic scrollspy
Basic scroll area
c-scrollspy-2
Basic scroll area
A basic select component with a list of options
c-select-1
A basic select component with a list of options
Select component in a disabled state
c-select-10
Select component in a disabled state
Select component inside a Dialog
c-select-11
Select component inside a Dialog
Select component with multiple selection
c-select-12
Select component with multiple selection
Select component inline with Input
c-select-13
Select component inline with Input
Select component with Button side by side
c-select-14
Select component with Button side by side
Select component with item alignment enabled
c-select-15
Select component with item alignment enabled
Select with custom access level descriptions
c-select-16
Select with custom access level descriptions
Select with colored bullets for status
c-select-17
Select with colored bullets for status
Select with user avatars
c-select-18
Select with user avatars
Select with status badges
c-select-19
Select with status badges
Select with icons and placeholder state
c-select-2
Select with icons and placeholder state
Select with indicator on the left side
c-select-20
Select with indicator on the left side
Select with clear button
c-select-21
Select with clear button
Select with custom chevrons up down icon
c-select-22
Select with custom chevrons up down icon
Multi-select with overlapping dots
c-select-23
Multi-select with overlapping dots
Select with grouped options and separators
c-select-24
Select with grouped options and separators
Country picker select with flag emojis
c-select-25
Country picker select with flag emojis
Status filter select with colored dots
c-select-26
Status filter select with colored dots
Select with description text per option
c-select-27
Select with description text per option
Timezone select with UTC offsets
c-select-28
Timezone select with UTC offsets
Select with avatar items for team member assignment
c-select-29
Select with avatar items for team member assignment
Select component with grouped options and labels
c-select-3
Select component with grouped options and labels
Priority select with colored badges
c-select-30
Priority select with colored badges
Font family select with preview
c-select-31
Font family select with preview
Select with icon-labeled categories
c-select-32
Select with icon-labeled categories
Size variant select with small trigger
c-select-33
Size variant select with small trigger
Select component with a large list of options
c-select-4
Select component with a large list of options
Select component with small trigger size
c-select-5
Select component with small trigger size
Select component with a subscription plan style
c-select-6
Select component with a subscription plan style
Select component with item alignment disabled
c-select-7
Select component with item alignment disabled
Select component within a Field with label and description
c-select-8
Select component within a Field with label and description
Select component in an invalid state
c-select-9
Select component in an invalid state
Horizontal separator for content sections.
c-separator-1
Horizontal separator for content sections.
Vertical separator for inline elements.
c-separator-2
Vertical separator for inline elements.
Vertical separator groups related menu items.
c-separator-3
Vertical separator groups related menu items.
Horizontal separator between items in a list.
c-separator-4
Horizontal separator between items in a list.
Separator with centered text label
c-separator-5
Separator with centered text label
Order summary with separators
c-separator-6
Order summary with separators
Sheet containing a form for editing profile information.
c-sheet-1
Sheet containing a form for editing profile information.
Sheet containing a form for editing profile information.
c-sheet-2
Sheet containing a form for editing profile information.
Sheets that open from any side.
c-sheet-3
Sheets that open from any side.
Sheet with scrollable content
c-sheet-4
Sheet with scrollable content
Skeleton loader for avatars and user info.
c-skeleton-1
Skeleton loader for avatars and user info.
Skeleton loader for chat messages
c-skeleton-10
Skeleton loader for chat messages
Skeleton loader for a card component.
c-skeleton-2
Skeleton loader for a card component.
Skeleton loader for text and paragraphs.
c-skeleton-3
Skeleton loader for text and paragraphs.
Skeleton loader for a form.
c-skeleton-4
Skeleton loader for a form.
Skeleton loader for a data table.
c-skeleton-5
Skeleton loader for a data table.
Skeleton loader for a dashboard stats row
c-skeleton-6
Skeleton loader for a dashboard stats row
Skeleton loader for a list with actions
c-skeleton-7
Skeleton loader for a list with actions
Skeleton loader for a card grid
c-skeleton-8
Skeleton loader for a card grid
Skeleton loader for a full profile page
c-skeleton-9
Skeleton loader for a full profile page
Basic slider.
c-slider-1
Basic slider.
Slider with tick marks
c-slider-10
Slider with tick marks
Slider with dynamic tooltip indicator
c-slider-11
Slider with dynamic tooltip indicator
Rating slider with emoji feedback
c-slider-12
Rating slider with emoji feedback
Disabled slider
c-slider-2
Disabled slider
Slider with multiple discrete values
c-slider-3
Slider with multiple discrete values
Vertical slider with range selection
c-slider-4
Vertical slider with range selection
Slider with controlled value tracking
c-slider-5
Slider with controlled value tracking
Slider with range selection
c-slider-6
Slider with range selection
Slider synced with number input
c-slider-7
Slider synced with number input
Color temperature slider
c-slider-8
Color temperature slider
Slider with reference labels
c-slider-9
Slider with reference labels
Basic toast notification.
c-sonner-1
Basic toast notification.
Toast with upload progress simulation
c-sonner-10
Toast with upload progress simulation
Toast with status alert markup
c-sonner-11
Toast with status alert markup
Custom accent border toast
c-sonner-12
Custom accent border toast
Custom invert success toast
c-sonner-13
Custom invert success toast
Custom invert error toast with details
c-sonner-14
Custom invert error toast with details
Custom invert info toast with avatar
c-sonner-15
Custom invert info toast with avatar
Custom invert warning toast with countdown
c-sonner-16
Custom invert warning toast with countdown
Multi-action invert toast with avatar group
c-sonner-17
Multi-action invert toast with avatar group
Toast with close button on top-right
c-sonner-18
Toast with close button on top-right
Toast with custom icon
c-sonner-19
Toast with custom icon
Toast notification with description.
c-sonner-2
Toast notification with description.
Custom integration toast
c-sonner-20
Custom integration toast
Updatable toast with ID
c-sonner-21
Updatable toast with ID
Toast positions
c-sonner-3
Toast positions
Toast variants with colored icons
c-sonner-4
Toast variants with colored icons
Toast duration options
c-sonner-5
Toast duration options
Toast with action button
c-sonner-6
Toast with action button
Promise toast with loading state
c-sonner-7
Promise toast with loading state
Toast with custom close and cancel buttons
c-sonner-8
Toast with custom close and cancel buttons
Toast with custom rich content
c-sonner-9
Toast with custom rich content
Sortable list of items with drag-and-drop
c-sortable-1
Sortable list of items with drag-and-drop
Sortable list of items with grid layout
c-sortable-2
Sortable list of items with grid layout
Sortable list of items with nested layout
c-sortable-3
Sortable list of items with nested layout
Sortable playlist with frame
c-sortable-4
Sortable playlist with frame
Sortable settings priority with frame
c-sortable-5
Sortable settings priority with frame
Sortable sidebar navigation with frame
c-sortable-6
Sortable sidebar navigation with frame
Sortable image gallery grid with frame
c-sortable-7
Sortable image gallery grid with frame
Basic spinner.
c-spinner-1
Basic spinner.
Animated loading dots
c-spinner-10
Animated loading dots
Spinner overlay on card
c-spinner-11
Spinner overlay on card
Spinner color variants
c-spinner-12
Spinner color variants
Spinners in buttons.
c-spinner-2
Spinners in buttons.
Spinners in badges.
c-spinner-3
Spinners in badges.
Spinner in input group.
c-spinner-4
Spinner in input group.
Spinner in empty state.
c-spinner-5
Spinner in empty state.
Button loading states
c-spinner-6
Button loading states
Overlay loading spinner
c-spinner-7
Overlay loading spinner
Full page loading state
c-spinner-8
Full page loading state
Inline loading text with spinner
c-spinner-9
Inline loading text with spinner
Basic stepper
c-stepper-1
Basic stepper
Stepper with content for each step
c-stepper-10
Stepper with content for each step
Stepper with progress bar and titles
c-stepper-11
Stepper with progress bar and titles
Stepper with segmented progress bar
c-stepper-12
Stepper with segmented progress bar
Stepper with vertical orientation and descriptions
c-stepper-13
Stepper with vertical orientation and descriptions
Stepper with vertical orientation
c-stepper-14
Stepper with vertical orientation
Stepper with vertical orientation and titles
c-stepper-15
Stepper with vertical orientation and titles
Stepper with completed state
c-stepper-2
Stepper with completed state
Stepper with loading state
c-stepper-3
Stepper with loading state
Controlled stepper
c-stepper-4
Controlled stepper
Stepper with title and indicator
c-stepper-5
Stepper with title and indicator
Stepper with progress bar indicator
c-stepper-6
Stepper with progress bar indicator
Stepper with icons and badges
c-stepper-7
Stepper with icons and badges
Stepper with descriptions
c-stepper-8
Stepper with descriptions
Stepper with inline titles
c-stepper-9
Stepper with inline titles
Basic switch.
c-switch-1
Basic switch.
Switch with badges
c-switch-10
Switch with badges
Colored switches
c-switch-11
Colored switches
Destructive switch with confirmation text
c-switch-12
Destructive switch with confirmation text
Compact settings table with switches
c-switch-13
Compact settings table with switches
Switch with descriptions in card grid
c-switch-14
Switch with descriptions in card grid
Switch with description.
c-switch-2
Switch with description.
Disabled switch.
c-switch-3
Disabled switch.
Switch in different sizes.
c-switch-4
Switch in different sizes.
Switch group
c-switch-5
Switch group
Switch list in card with separators
c-switch-6
Switch list in card with separators
Switch list in card with icons
c-switch-7
Switch list in card with icons
Switch in frame
c-switch-8
Switch in frame
Switch with tooltip info
c-switch-9
Switch with tooltip info
Basic table.
c-table-1
Basic table.
Subscriptions table with plan badges and billing info
c-table-10
Subscriptions table with plan badges and billing info
Product inventory table with stock badges and prices
c-table-11
Product inventory table with stock badges and prices
API keys table with permission badges and actions
c-table-12
API keys table with permission badges and actions
File manager table with owners and sharing badges
c-table-13
File manager table with owners and sharing badges
Issues table with priority, assignee, and labels
c-table-14
Issues table with priority, assignee, and labels
Leaderboard table with rank, score, and level badges
c-table-15
Leaderboard table with rank, score, and level badges
Vertical table with employee profile details
c-table-16
Vertical table with employee profile details
Vertical table with server configuration details
c-table-17
Vertical table with server configuration details
Table with footer.
c-table-2
Table with footer.
Table in card with status badges.
c-table-3
Table in card with status badges.
Table card with actions column.
c-table-4
Table card with actions column.
Table with interactive elements.
c-table-5
Table with interactive elements.
Team members table with avatars, roles, and status
c-table-6
Team members table with avatars, roles, and status
Orders table with customer info and payment status
c-table-7
Orders table with customer info and payment status
Projects table with team avatars and status
c-table-8
Projects table with team avatars and status
Activity log table with user avatars and timestamps
c-table-9
Activity log table with user avatars and timestamps
Basic tabs.
c-tabs-1
Basic tabs.
Tabs with line variant.
c-tabs-2
Tabs with line variant.
Tabs with vertical orientation.
c-tabs-3
Tabs with vertical orientation.
Tabs with vertical orientation and line variant.
c-tabs-4
Tabs with vertical orientation and line variant.
Tabs with icons.
c-tabs-5
Tabs with icons.
Tabs with icons
c-tabs-6
Tabs with icons
Tabs with badge counts
c-tabs-7
Tabs with badge counts
Tabs with icons and line variant
c-tabs-8
Tabs with icons and line variant
Segmented control tabs
c-tabs-9
Segmented control tabs
Basic textarea.
c-textarea-1
Basic textarea.
Invalid textarea.
c-textarea-2
Invalid textarea.
Textarea with label.
c-textarea-3
Textarea with label.
Textarea with description.
c-textarea-4
Textarea with description.
Disabled textarea.
c-textarea-5
Disabled textarea.
Auto-resize textarea with character count
c-textarea-6
Auto-resize textarea with character count
Basic timeline.
c-timeline-1
Basic timeline.
Deployment log timeline
c-timeline-10
Deployment log timeline
Activity feed timeline with user avatars
c-timeline-11
Activity feed timeline with user avatars
Compact horizontal milestone timeline
c-timeline-12
Compact horizontal milestone timeline
Timeline with roadmap.
c-timeline-2
Timeline with roadmap.
Timeline with order status.
c-timeline-3
Timeline with order status.
Timeline with git activity.
c-timeline-4
Timeline with git activity.
Timeline with milestones.
c-timeline-5
Timeline with milestones.
Timeline with pipeline steps.
c-timeline-6
Timeline with pipeline steps.
Timeline with roadmap items.
c-timeline-7
Timeline with roadmap items.
Vertical timeline
c-timeline-8
Vertical timeline
Horizontal timeline with leading labels
c-timeline-9
Horizontal timeline with leading labels
Basic toggle.
c-toggle-1
Basic toggle.
Toggle with text label that changes
c-toggle-10
Toggle with text label that changes
Social media reaction toggles
c-toggle-11
Social media reaction toggles
Toggle with tooltip
c-toggle-12
Toggle with tooltip
Disabled toggle states
c-toggle-13
Disabled toggle states
Toggle as mute/unmute button
c-toggle-14
Toggle as mute/unmute button
Toggle buttons with outline variant.
c-toggle-2
Toggle buttons with outline variant.
Toggle buttons in different sizes.
c-toggle-3
Toggle buttons in different sizes.
Toggle with button and icon.
c-toggle-4
Toggle with button and icon.
Disabled toggle.
c-toggle-5
Disabled toggle.
Toggle with icon.
c-toggle-6
Toggle with icon.
Toggle with notification count badge
c-toggle-7
Toggle with notification count badge
Toggle size variants showcase
c-toggle-8
Toggle size variants showcase
Toggle with icon swap on press
c-toggle-9
Toggle with icon swap on press
Basic toggle group.
c-toggle-group-1
Basic toggle group.
Toggle group for color theme
c-toggle-group-10
Toggle group for color theme
Toggle group for font size
c-toggle-group-11
Toggle group for font size
Toggle group for time range filter
c-toggle-group-12
Toggle group for time range filter
Toggle group for notification channels
c-toggle-group-13
Toggle group for notification channels
Toggle group for layout columns
c-toggle-group-14
Toggle group for layout columns
Toggle group for sort direction
c-toggle-group-15
Toggle group for sort direction
Toggle group for pricing tier
c-toggle-group-16
Toggle group for pricing tier
Toggle group with outline variant.
c-toggle-group-2
Toggle group with outline variant.
Toggle groups in different sizes.
c-toggle-group-3
Toggle groups in different sizes.
Toggle group with custom spacing.
c-toggle-group-4
Toggle group with custom spacing.
Toggle group with filter control.
c-toggle-group-5
Toggle group with filter control.
Toggle group with vertical orientation.
c-toggle-group-6
Toggle group with vertical orientation.
Toggle group for text alignment
c-toggle-group-7
Toggle group for text alignment
Toggle group for view mode switching
c-toggle-group-8
Toggle group for view mode switching
Vertical toggle group for settings
c-toggle-group-9
Vertical toggle group for settings
Basic tooltip.
c-tooltip-1
Basic tooltip.
Tooltip with feature badge and upgrade link
c-tooltip-10
Tooltip with feature badge and upgrade link
Tooltip with avatar and role badge
c-tooltip-11
Tooltip with avatar and role badge
Tooltip on disabled button with wrapper
c-tooltip-12
Tooltip on disabled button with wrapper
Tooltip with online status indicator
c-tooltip-13
Tooltip with online status indicator
Tooltip with file info and badges
c-tooltip-14
Tooltip with file info and badges
Tooltip with label badges
c-tooltip-15
Tooltip with label badges
Tooltip with action button inside
c-tooltip-16
Tooltip with action button inside
Tooltips opening from different sides.
c-tooltip-2
Tooltips opening from different sides.
Tooltip with icon trigger.
c-tooltip-3
Tooltip with icon trigger.
Tooltip with keyboard shortcut.
c-tooltip-4
Tooltip with keyboard shortcut.
Tooltip on notification bell with badge count
c-tooltip-5
Tooltip on notification bell with badge count
Tooltip with status badge
c-tooltip-6
Tooltip with status badge
Tooltip with icon and description
c-tooltip-7
Tooltip with icon and description
Toolbar with tooltip actions
c-tooltip-8
Toolbar with tooltip actions
Tooltip with warning badge
c-tooltip-9
Tooltip with warning badge
Basic tree.
c-tree-1
Basic tree.
Tree with indented lines.
c-tree-2
Tree with indented lines.
Tree with custom indent.
c-tree-3
Tree with custom indent.
Tree with custom indent.
c-tree-4
Tree with custom indent.
File explorer tree with type icons
c-tree-5
File explorer tree with type icons
Organization chart tree with avatars
c-tree-6
Organization chart tree with avatars
Permissions tree with checkboxes
c-tree-7
Permissions tree with checkboxes
Brand logo grid card with centered icon tile and linked name per company
card-1
Responsive grid of compact brand cards, each centering a company logo in a bordered tile over a linked name. ReUI Frame plus shadcn Item, ItemMedia. For integrations, partners, tech stack, or logo wall.
Color-tinted stacked Frame cards with date header, actions menu, and category badges
card-10
Responsive card grid of pastel stacked Frames, each with an uppercase date, ReUI Frame and Badge plus shadcn DropdownMenu, Button, and Separator. For reports, updates, announcements, and activity feeds.
Minimal text-only notice card grid with accent label and faded dot-pattern background
card-11
Responsive container-query grid of text-only notice cards built on the ReUI Frame, each pairing an accent-colored label with a description over a faded dotted SVG pattern. For reminders, tips, alerts, status callouts.
Compact icon-and-title link card grid, no description text, built on ReUI Frame
card-12
Responsive grid of clickable cards, each a link with a top icon and title only and no body copy, with hover and focus-ring states. Uses ReUI Frame and FramePanel. For category tiles, quick-link menus, dashboard navigation, and feature shortcuts.
Two-column card grid with link title, description, and a row of bordered logo chips
card-13
Showcase sponsors, affiliates, or integration partners: each card pairs a hover link heading and muted description with a wrap of bordered brand logo badges. Built with ReUI Frame and shadcn Item.
Delivery tracking card with icon-labeled detail rows, status badge, header menu, and notes section
card-14
Single order delivery card showing address, ETA, and tracking number as icon rows with a Home badge, a notes block, and a header actions menu. Built with ReUI Frame and Badge plus shadcn Item, DropdownMenu, Button. Order tracking, shipment status.
Meeting cards grid with attendee avatars, duration badge, and a Join Meeting link
card-15
Two-column grid of agenda meeting cards: title, time, duration badge, attendee AvatarGroup with overflow count, kebab menu, and a Google Meet Join link. ReUI Frame, Badge with shadcn Avatar, DropdownMenu, Button. For calendars, schedules, agendas.
Dark integration app card with patterned header, status badge, ellipsis menu and avatar group
card-16
Integration card for app marketplaces: patterned dark header with status Badge and ellipsis DropdownMenu, brand logo, title, description, user AvatarGroup and full-width outline Button. Uses ReUI Frame, Badge with shadcn Avatar, Button, DropdownMenu.
Shortcut cards grid with colored icon tiles, dotted canvas backdrop, and a labeled action link
card-17
Responsive grid of navigation shortcut cards, each with a colored rounded icon tile, a masked dot-pattern canvas background, title, description, and a chevron action link. ReUI Frame, FramePanel with shadcn Item. Quick links, hub, launcher, jump-to.
Compact info card grid with icon-label header, description, and source link in framed panels
card-18
Responsive 3-column grid of compact info cards using ReUI Frame, FrameHeader, and FramePanel. Each card pairs an icon-and-label header with a short description and an underlined source link. For stat tiles, resource lists, or dashboard cards.
Crypto asset price card with ticker, large quote, percent-change delta and Follow plus Trade actions
card-19
Asset overview card showing a market ticker, large price quote, green percent-change delta, last-updated time, and outline Follow plus primary Trade buttons. ReUI Frame, shadcn Button. For crypto, stock, watchlist, and trading dashboards.
Feature highlights grid of icon-tile cards with a faded dot-pattern background
card-2
Container-query feature cards that scale from one to four columns, each pairing a bordered icon tile, linked title, and muted blurb over a dotted backdrop. ReUI Frame, shadcn Item. For benefits, services, capabilities sections.
Help center guide cards grid with colored icon badge and bordered article link list
card-20
Three-up help center grid where each ReUI Frame card pairs a colored icon badge, title, and summary with a bordered list of guide links carrying arrow icons. Docs hub, knowledge base, resource directory. Built with ReUI Frame and shadcn Item.
Project task cards grid with client name, due-date countdown, and share action
card-21
Three-column grid of project cards, each with an icon badge, project title link, client name, and a Due countdown. Built with ReUI Frame, shadcn Button and Item. For project lists, task boards, deadlines.
Centered promo card with overlapping tilted image pair, pill badge, and rounded CTA button
card-22
Vertical promo card pairing two rotated, overlapping square thumbnails with an outline Badge, heading, subtext, and icon Button. For upsell, demo, feature highlight, or onboarding tiles. Built with ReUI Frame plus shadcn AspectRatio, Badge, Button.
AI monitoring promo card with stacked Frame, 24/7 uptime metric, integration logo tiles, and CTA
card-23
Stacked two-panel ReUI Frame promo: a large 24/7 monitoring metric over a faded grid with AI integration logo tiles, plus a headline, blurb, and shadcn Button CTA. For uptime, monitoring, and SaaS marketing cards.
Recommended job role card with company logo, location, work mode, and salary meta row
card-24
Job recommendation card with company logo tile, role title, and an icon meta row for location, work mode, and salary, plus a description and Quick Apply / View Details buttons. ReUI Frame, shadcn Button, Separator. Job board, careers, hiring.
Account balance summary card grid with colored icon tiles and signed percent-change indicators
card-25
Multi-account balance overview: per-account cards showing balance, type label, and color-coded gain/loss delta with a colored icon tile. Built on ReUI Frame, FramePanel, and shadcn Item. For wallet, treasury, and finance dashboards.
Three-column metric card grid with icon-and-label headers and linked titles in framed panels
card-26
Responsive 3-up grid of compact stat cards built on the ReUI Frame, each with an icon and label header plus a panel holding a clickable title link and muted description. For dashboard metrics, KPI summaries, and overview tiles.
Horizontal application summary card with labeled metadata columns, status dot, and team avatar group
card-27
Single-row record card with details in labeled columns (created, status, mobile, email, domain, team), a green status dot, info Badge, and overflow avatar group on a faded dot grid. ReUI Frame, Badge, shadcn Avatar group. Account summary row.
KPI metric card grid with two-tone numeric values and per-panel trend Badge with period label
card-28
Responsive 1 to 4 column stat grid where each panel shows a large two-tone value with faint decimals, a metric label, and an up or down trend Badge with percent and period. ReUI Frame, FramePanel, Badge. Dashboard KPIs, analytics tiles.
KPI metric stat grid in a bordered frame with per-cell area charts and trend badges
card-29
Dashboard KPI stat grid: bordered Frame splits into metric cells, each with an icon, large value, delta Badge, and an area chart. ReUI Frame, FramePanel, Badge. Analytics overview, stats cards, metric tiles.
Investor profile card with availability badge, stats strip, and ranked funding sources list
card-3
Investor profile card: avatar, name, status badge, three-column stats strip, and a ranked funding sources list with colored icon tiles and amounts. ReUI Frame, Badge plus shadcn Item, AspectRatio, Button. For fundraising, VC, fund directory cards.
Stat card grid with icon tile, actions menu, and trend badge per metric
card-30
Responsive metric card grid (1 to 4 columns); each tile has an icon, large value, label, colored status badge with trend arrow, and an actions dropdown (Edit, Copy, Delete). KPI dashboard, analytics summary. ReUI Frame, Badge; shadcn DropdownMenu.
KPI stat cards in a responsive grid with faded line-grid backgrounds and glossy colored icon tiles
card-31
Four-up metric cards showing a big number, label, and a colored icon tile over a masked square-mesh grid pattern. Built on ReUI Frame and FramePanel. For dashboards, analytics overviews, and KPI stat summaries.
Horizontal stats summary card with labeled metric columns, status icons, and a team avatar group
card-32
Single-row summary splitting metrics across divided columns, each with a colored status icon, value, and unit, plus an overflow team avatar column. Built with ReUI Frame and shadcn Avatar, AvatarGroup. For compliance, security, or KPI overview cards.
Inventory stat card grid with gradient icon badge, dotted backdrop, and per-card actions menu
card-33
Responsive four-up grid of inventory stat cards, each with a gradient icon badge, dotted backdrop, linked title, value, and an ellipsis menu (Edit, Copy link, Delete). Uses ReUI Frame, shadcn DropdownMenu, Item, Button. Dashboard KPIs and stats.
KPI metric cards with bold value, faint decimal fraction, and up or down trend badge per period
card-34
Responsive grid of compact stat cards: each shows a metric label, large value with a faded decimal tail, and a colored trend Badge (up or down) with a period label. Built on ReUI Frame, FramePanel, Badge. For dashboards, analytics, KPI summaries.
KPI stat card grid with metric label, large value, and halftone dot-pattern backdrop
card-35
Responsive grid of compact metric cards, each pairing a muted label with a bold value over a masked halftone dot pattern. Built on the ReUI Frame and FramePanel. For dashboard KPI tiles, stats overview, and analytics summary cards.
KPI stat card grid with big metric over label and a masked dot-grid backdrop
card-36
Responsive container-query grid of compact KPI stat cards, each pairing a large metric value with a muted label over a masked dot-grid pattern. Built on ReUI Frame and FramePanel for dashboards, analytics, and metrics overviews.
Compact KPI stat tile grid with muted labels and green metric icons
card-37
Responsive 3-column grid of compact KPI tiles, each a muted label over a green icon plus bold metric value (MRR, revenue, growth). Built on ReUI Frame and FramePanel for stats summaries, metric cards, company snapshots.
Horizontal stat strip card with divided metric columns and a dotted accent cell
card-38
Horizontal KPI strip in a ReUI Frame: equal stat columns with bold value over muted label, hairline dividers, and a dotted-texture final cell. Profile or dashboard summary stats, metric row.
Icon-badge resource card grid linking to help, docs, and platform sections
card-39
Responsive grid of clickable resource cards, each with an icon badge, title link, and short blurb. Built on ReUI Frame and FramePanel with shadcn Item and ItemMedia. For docs hubs, help centers, onboarding, and platform overview sections.
Colorful dark KPI stat cards with trend badge, grid-mesh background, and footer report link
card-4
Grid of dark metric cards on colored panels, each with a big value, an up-trend Badge with percent, an icon tile, and a footer report link. Built with ReUI Frame and Badge plus shadcn Item for KPI, stats, and analytics dashboards.
Compact two-column metric stat grid with large value, unit, and muted label tiles
card-40
Two-column grid of metric tiles, each pairing a large value with a small unit and a muted label, for KPI summaries, fitness and activity stats, and dashboard quick stats. Built on ReUI Frame and FramePanel.
Topic Link Card Grid with Colored Icon Tiles and Hover Title Links
card-41
Responsive grid of compact topic cards, each a colored icon tile, linked title, and one-line summary. Built on ReUI Frame with shadcn Item and ItemMedia. For help center topics, quick links, resource and feature shortcuts.
Profile card with verified name, online badge, team avatar group, stats row, and connect button
card-42
Profile card with avatar, online status badge, verified name, company and email, team avatar group, 3-column stats row, and a Connected button. ReUI Frame with shadcn Avatar, AvatarGroup, Item, Separator, Button. For team, contact, or account cards.
Profile card with cover banner, verified avatar, and horizontal project portfolio rail
card-43
Profile card with a desaturated cover banner, ring avatar with status badge and verified check, and a horizontal-scrolling portfolio rail of project thumbnails. Built with ReUI Frame, Avatar, ScrollArea, Button. For team or contributor profiles.
Integration Cards with Brand Logo, Connector Diagram, and Tier Badge over a Dotted Backdrop
card-5
Integration cards pairing a brand logo (Resend, PayPal, Supabase) with flanking icons on a dashed connector line over a dotted canvas, plus a title link, tier Badge, and blurb. ReUI Frame, Badge, shadcn Item. Marketplace, connectors, plugins.
Numbered setup-step card grid with ordinal labels and a responsive one to four column Frame layout
card-6
Onboarding or setup walkthrough showing numbered steps (0.1 to 0.4) as titled, hover-linked cards in a responsive container-query grid that flows one to four columns. Built on ReUI Frame and FramePanel. For getting-started and how-it-works sections.
Detail stat card grid with label, value, and swappable logo, badge, or avatar group accent
card-7
Responsive grid of compact detail cards, each with a labeled value plus a trailing brand logo, status Badge, or stacked Avatar group. Uses ReUI Frame, Badge and shadcn Avatar. For dashboards, company, profile, and metric cards.
Service status card grid with icon box, linked title, color-coded status dot and timestamp
card-8
Three-column grid of status cards, each pairing an icon box, a linked title, a color-coded status dot and label (Online, Synced, Idle) and a timestamp on a dot-pattern panel. ReUI Frame, FramePanel, Item. For infrastructure and uptime monitoring.
Applicant profile card with detail columns, copy-action contact fields, and skill badges
card-9
Horizontal candidate summary card: labeled columns for role, location, and contact with copy-icon buttons, plus a wrapped skill-badge row over a dot-pattern panel. ReUI Frame, Badge, shadcn Button. For ATS, recruiting, and applicant detail views.
Shop by Category Grid with Hover Browse Buttons and Badges
category-card-1
Four-column image grid for browsing product categories. Each card has a photo with hover-reveal browse button, optional badge, name, and item count. ReUI Badge, shadcn Button, Breadcrumb. Shop-by-category, product taxonomy, ecommerce catalog.
Curated collection browse page with multi-filter toolbar and pagination
category-card-2
Filterable collection grid with search, category, availability, and fit filters, sort, and pagination. Cards show clipped image with badge, title, tags, and count. ReUI Badge; shadcn Button, Select, Switch, Popover, Breadcrumb, Pagination.
Carousel collection filter with color-tinted category cards and hover browse buttons
category-card-3
Paginated carousel for browsing product collections. Color-tinted cards with image zoom on hover, a reveal browse button, and page-count badge. ReUI Badge; shadcn Card, Button, Carousel. Category filter, shop landing, ecommerce browsing.
Ecommerce catalog page with featured department and scrollable category index
category-card-4
Catalog landing pairing a large featured department hero with a scrollable sidebar of category tiles, breadcrumb header, item and price counts. ReUI Badge; shadcn Breadcrumb, Button, ScrollArea. For shop home, category browse, department directory.
Collection Guides Browser with Image-Led List Rows and Category Links
category-card-5
Ecommerce collection guides browser with single-column image-led rows, status badges, item count and budget metadata, tag links, and per-collection actions. Uses ReUI Badge; shadcn Breadcrumb, Button. For product discovery and category guides.
Seasonal Category Grid with Full-Card Hover Reveal and Breadcrumb Header
category-card-6
Image-first two-column category grid; each card reveals item count, description, and a shop button on hover, with a resting label and Badge. Uses ReUI Badge; shadcn Breadcrumb, Button. For collection, catalog, and category browsing pages.
Inventory KPI summary card with period tabs and per-metric sparkline trends
chart-1
Catalog health overview: Week/Month/Year tabs switch four inventory KPIs (in stock, out-of-stock, restock, slow movers), each with a recharts sparkline and tone-coded delta. ReUI Frame and Badge; shadcn Tabs, Chart, Button. Stats dashboard widget.
Heart rate metric card with segmented zone bar and large bpm readout
chart-10
Compact health stat card showing a big bpm value, heart icon tile, and a 4-segment heart-rate zone meter (rest to peak) with one active band. Built on ReUI Frame and shadcn Button. For fitness, wearable, and vitals dashboards.
Distance Metric Card with Week, Month, Year Tabs and Dotted Sparkline Fill
chart-11
Cycling distance KPI card that swaps a dotted area sparkline and value across Week, Month, and Year tabs. Built with ReUI Frame and shadcn Tabs for fitness, activity, or analytics stat panels and metric widgets.
Capital inflows semicircular gauge card with source breakdown and range switcher
chart-12
Half-donut radial gauge of capital inflows by source, with center total, a range switcher (week, month, quarter), and per-source metric breakdown. Built with ReUI Card, DropdownMenu, Item, Separator, and a recharts PieChart. For finance dashboards.
Capital inflows donut chart card with Week, Month, Year tabs and a per-source legend
chart-13
Donut chart card breaking down capital inflows by source, with Week/Month/Year tabs, center total, and a legend of each source's amount and percent share. ReUI Frame plus shadcn Chart (recharts pie), Tabs, Tooltip. For finance and revenue breakdowns.
Portfolio Allocation Card with Week/Month/Year Tabs and Segmented Bar Meter
chart-14
Finance allocation card: percentage metric with up delta, a segmented vertical-bar meter, equities exposure, and a member avatar stack. Card, Tabs, Tooltip, Avatar. For portfolio, investment, fund dashboards.
Three KPI stat cards with gradient sparkline area charts and hover tooltips
chart-15
Responsive row of metric cards, each pairing an icon, label, period and big value with a compact gradient area sparkline and hover tooltip. ReUI Frame, Recharts AreaChart. KPI dashboard, revenue and user stats overview.
Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector
chart-16
Ecommerce funnel as a stacked area chart over visits, product views, add to cart, and checkout, with four KPI tiles (value plus trend), a 7d/30d/90d/12m period selector, and custom tooltip. ReUI Frame, shadcn ChartContainer and Select.
Compact campaign analytics card with gradient area chart and 5D to 6M period tabs
chart-17
Marketing impressions card: total stat with +42% trend, gradient AreaChart (recharts), and period tabs (5D, 2W, 1M, 6M) that swap the dataset. ReUI Frame plus shadcn Tabs, Item, Tooltip, Button, Chart. For analytics dashboard, campaign KPI widget.
Orders overview card with period tabs, stat tiles, and animated gradient area chart
chart-18
Analytics overview card with Day, Week, Month, Year range Tabs, three stat tiles showing delta changes, and a recharts area chart with animated reveal and dark tooltip. ReUI Frame, shadcn Tabs, Item. For dashboard revenue or sales summary panels.
Dark finance metric card with composed area-and-line chart and day, week, month period tabs
chart-19
Dark DeFi-style stats card pairing Total Value Locked, Deposits and Borrowed KPIs with a Recharts composed chart of two gradient areas, monotone lines and a custom tooltip. Day, week, month switch via ReUI Card, Tabs. Crypto dashboard.
Four-column KPI stat row with corner line sparklines and trend badges
chart-2
Bordered row of compact KPI stat cards, each pairing a big value with a top-right line sparkline (hover tooltip) and an up/down trend badge. Built with ReUI Frame and Badge plus shadcn Chart over Recharts. For dashboard metric strips and analytics.
Sales vs goals composed line and area chart with vertical reference line marker
chart-20
Sales overview card plotting actual vs goal lines over a gradient area fill, with a dashed vertical reference marker, dollar-to-millions axis, custom tooltip, and Export/Filter/Share dropdown. ReUI Card, Button, DropdownMenu. For revenue dashboards.
Cashflow area and line chart card with period range selector and total plus percentage trend
chart-21
Cashflow chart card pairing a gradient Area with a dotted Line, a 6m/12m/2y range Select, a total with a green percentage trend, and a custom tooltip. Built with ReUI Frame, shadcn Select and ChartContainer. For finance and analytics dashboards.
Revenue performance card with line chart and period tabs (5D / 2W / 1M)
chart-22
Compact revenue KPI card with a single-series recharts line chart, a total computed from the active period, and 5D / 2W / 1M tab switching. Uses ReUI Card, Tabs, Button, Item, ChartContainer. For analytics, finance, and sales reporting widgets.
Multi-line social media activity chart with platform comparison and time-range selector
chart-23
Multi-line chart comparing Facebook, Instagram and LinkedIn activity over a selectable time range, with custom tooltip and dot legend. ReUI Frame and Select, shadcn ChartContainer, Recharts LineChart. For analytics dashboards and engagement trends.
Dual-axis e-commerce sales vs views line chart with period selector and KPI trend badges
chart-24
Plots sales and views on two independent Y-axes as solid and dashed recharts lines, with a 30 vs 90 day Select, KPI totals plus trend Badges, and a dark custom tooltip in a ReUI Frame. For e-commerce analytics and revenue vs traffic dashboards.
Order Metrics List Card with Per-Row Line Sparklines and Trend Badges
chart-25
Vertical KPI metrics list: each row pairs a value, suffix, and up or down trend Badge with a compact line sparkline over a grid. Uses ReUI Frame, Badge and shadcn ChartContainer, Separator. For orders, spend and finance dashboards.
Dark floor price analytics card with period tabs and monotone line chart
chart-26
Crypto and NFT floor price tracker on a dark Card: Month / Max Tabs toggle, recharts monotone LineChart, large current price with percent change. For asset dashboards, token price and portfolio widgets. Uses ReUI Card, Tabs, Button, Chart.
Browser usage donut chart card with 5D, 2W and 1M period tabs and total visitors KPI
chart-27
Donut chart of visitor share across browsers with a 5D/2W/1M tab switcher, total visitors stat, trend badge and slice labels. Uses ReUI Frame and Badge plus shadcn Tabs, Item, Button and recharts Pie. For analytics dashboards and traffic widgets.
Operational KPI metric cards with segmented bar gauge for utilization and capacity tracking
chart-28
Three operational KPI cards in a responsive grid, each with an icon, title, large value over total, and a 40-segment bar gauge showing utilization. Built with ReUI Frame, recharts BarChart, shadcn Item and Button. For dashboards and capacity metrics.
Inventory velocity bar chart card with diagonal hatched bars and dotted backdrop
chart-29
Vertical bar chart in a card showing warehouse turnover by category, with diagonal hatched-pattern bars, dotted grid backdrop, grow-up reveal animation, and a custom tooltip. Uses ReUI Frame, Badge, recharts. Analytics, dashboard, KPI.
Portfolio Balance Cards with Bottom-Anchored Line Charts on a Dotted Bed
chart-3
Three-column grid of balance cards, each with an icon tile, total value, up or down percent change, and a full-width line chart over a dotted background. Built with ReUI Frame and shadcn ChartContainer for wallet, fund, and portfolio dashboards.
Grouped air vs sea freight bar chart with hover-dimmed bars and live region readout
chart-30
Grouped bar chart comparing air vs sea freight transit days across global regions, with hover that dims other bars, a live region readout, custom tooltip, and trend badge. ReUI Frame, Badge; shadcn Chart on Recharts. Logistics shipping dashboard.
Account Balance Line Chart with Reference Line, Peak Dots and Stat Header
chart-4
Portfolio balance tracker: a stat header (balance, trend, High, Low, Change) over a recharts line chart with a date reference line and custom dots on peaks and troughs. ReUI Frame, FramePanel, shadcn ChartContainer. For finance, trading dashboards.
Finance KPI metric grid with delta badges, brand logo stacks and mini area sparklines
chart-5
Finance overview KPI grid: net worth, portfolio, investments and cashflow cards with delta badges, brand logo stacks, and mini area-chart sparklines. Uses ReUI Frame and Badge plus shadcn Chart. For wealth, fintech, crypto dashboards.
Metric-switcher line chart card with clickable KPI tabs and pulsing animated dots
chart-6
Platform analytics card where four KPI tabs (orders, response, revenue, users) with percent-change badges switch a single dashed line series. ReUI Frame, Badge, shadcn Button, ChartContainer, recharts LineChart. Metrics dashboard, trend chart.
Two metric panels with semicircular segmented arc gauges and reviewer avatar stacks
chart-7
Side-by-side metric cards showing uptime and code coverage as SVG segmented arc gauges with status label, value, and overlapping reviewer avatars. ReUI Frame, shadcn Avatar group, Button. KPI dashboard, gauge widget.
Three-column KPI metric row with radial segmented gauges and trend indicators
chart-8
Stat card row for API and ops monitoring: each metric pairs a segmented radial gauge with a value, unit, and up or down trend delta. Built on ReUI Frame and FramePanel with shadcn Button. Use for dashboard KPI strips, metrics overview, and stats.
Capital Inflows fund breakdown card with segmented distribution bar and range filter
chart-9
Fund inflow card: compact total with success trend Badge, a segmented distribution bar of each fund's share, and a logo, name, capital-in list. Top 3 to All filter via Select. ReUI Frame, Badge, shadcn Select. For treasury dashboards.
Multi-Step Checkout with Stepper Progress and Sticky Order Summary
checkout-1
Four-step purchase flow for contact, address, delivery speed, and card/PayPal/Apple Pay payment, with promo code, validation, and a sticky order summary. Uses ReUI Stepper, Badge, Alert; shadcn Combobox, RadioGroup. For cart, order, checkout pages.
Multi-step checkout form with stepper and sticky order summary
checkout-2
Four-step checkout (contact, delivery, payment, review) with order summary, promo codes, saved addresses, and card, PayPal, or Apple Pay payment. ReUI Stepper, Badge, Alert; shadcn Card, RadioGroup, Combobox. For e-commerce checkout and payment pages
Multi-step AI token credit checkout with stepper and auto top-up controls
checkout-3
Three-step wizard to buy prepaid AI token credits: pick a provider, choose a bundle with auto top-up and usage alerts, then pay. ReUI Stepper, Frame, Alert, Badge; shadcn RadioGroup, Field, Input, Switch. Credit top-up, token billing, AI marketplace.
Two-pane express checkout with saved details and order summary rail
checkout-4
Express checkout with saved contact, address, and card review rows, a CVV security field, and a collapsible new-card form beside a live order summary. ReUI Badge; shadcn Card, Button, Field, InputGroup, Separator. Payment, order review.
Four-step ecommerce checkout with stepper and order summary sidebar
checkout-5
Four-step ecommerce checkout (contact, delivery, payment, review) with animated stepper, saved addresses, delivery and payment options, and promo codes. ReUI Frame, Stepper, Badge; shadcn Button, Combobox, RadioGroup. Use for: payment flow, checkout.
Two-column checkout with order summary and payment form
checkout-6
Ecommerce checkout with order summary and payment form. Product list with totals, shipping details, card input with Apple Pay button and card logos. Uses ReUI Badge; shadcn Button, Card, Checkbox, Field, Input, Item, Select, Separator, Tooltip.
Multi-step checkout with stepper navigation and live order summary
checkout-7
Stepper-driven checkout for contact, shipping, delivery method, and payment, plus promo code discount, tax, and a live order summary. ReUI Stepper, Badge, Alert; shadcn RadioGroup, Select, Input, Button. For checkout page, payment, order review.
Side-by-side product comparison table with grouped specs and sticky labels
comparison-1
Compare products column by column with grouped feature rows, star ratings, hint tooltips, badges, pricing, and removable columns over a sticky-label scroll area. ReUI Badge; shadcn Button, Tooltip, Scroll Area. Specs table, product picker.
Two-Product Comparison with Auto Winner Indicators
comparison-2
Side-by-side product comparison with swappable selector cards, multi-group feature table, and automatic winner highlighting. ReUI Badge; shadcn Button, Select, Tooltip. Perfect for purchase decisions, ecommerce comparison pages, product spec lookups.
Editor's pick comparison cards with ratings, feature checklist and add-to-cart
comparison-3
Three recommendation cards labeled best value, editor's choice and top premium, each with a badge, star rating, price, feature checklist, key specs and add-to-cart. ReUI Badge; shadcn Button, Item. For product picks, comparison, buying guides.
Ranked product scorecard carousel with per-dimension score bars
comparison-4
Carousel paging six products 3-up, ranked by overall 0-10 score across five dimensions with best-in-class bar highlights, top-pick ribbon, star ratings, and add-to-cart. ReUI Badge; shadcn Carousel, Button. Product comparison, buying guide, rankings.
Product Comparison with Focused Hero Card and Swappable Alternatives
comparison-5
Compare a focal product against alternatives in a hero card plus stacked rivals showing price deltas, star ratings, and feature checklists; tap Switch to swap the hero. ReUI Badge, shadcn Button. For product, comparison, and buying-guide pages.
Interactive Product Comparison Builder with Live Spec Panel
comparison-6
Catalog grid with compare toggles and live 4-slot comparison panel displaying specs side-by-side with automatic winner highlighting. Uses ReUI Badge and shadcn Button. Ideal for product comparison, feature comparison, and product selection pages.
Centered single-email contact card with framed mail row and full-width email action button
contact-1
Centered contact section with one direct-email path instead of a form: eyebrow, heading, a framed mail-icon row, and a full-width outline button showing the support email. Uses ReUI Frame, shadcn Item and Button. For contact us and support pages.
Split contact card with project intake form and abstract SVG scope panel
contact-2
Two-column Card pairing a project intake form (Project Type and Timeline Selects, budget InputGroup with $ addon, Textarea, Button) with a gradient SVG panel of mailto and tel Item links. For agency, studio, or SaaS quote and project-brief pages.
Frameless split contact form with topic Select and image-backed Card panel of email and phone links
contact-3
Split contact-us section: frameless form (Name, Email, topic Select, Subject, Textarea) beside an image-backed Card of email and phone links. Field, Input, Select, Textarea, Button, Card, Item. Contact page, support form, sales inquiry, lead capture.
Contact section with global office columns ordered west to east as a follow-the-sun timezone band
contact-4
Form-free contact band: three office columns split by dividers, each with city, postal address, UTC offset, business hours, and a directions link, plus an email and CTA button. Uses shadcn Button and Separator. For contact us, our offices, find us.
Two-column contact Card pairing a tinted contact-details panel with a short project inquiry form
contact-5
Framed Card with a tinted left details panel (email, response time, studio location) beside a right project form. ReUI Card, Field, Input, Textarea, Button. For contact us, get in touch, start a project, sales inquiry, lead capture.
Channel-first contact section with clickable Frame panels for chat, email, and GitHub community
contact-6
Channel-first contact section: three clickable Frame panels (Live Chat, Email Us, GitHub Community) over a muted docs and FAQ card. ReUI Frame, FramePanel; shadcn Card, Item, Button. Contact us, get in touch, support channels page.
Split promo hero with copyable coupon code, expiry, and campaign image
coupon-1
Two-column sale promo: eyebrow badge, headline, dashed promo-code panel with copy-to-clipboard button, fine-print terms, CTA, and image. ReUI Badge; shadcn Card, Button, Item. For discount banners, seasonal sales, promo landing pages.
Category-filterable coupon grid with one-click copy promo codes
coupon-2
Filterable promotions grid of discount cards showing min spend, expiry, status badge, and a copy-code button with copied feedback. ReUI Frame, Badge; shadcn Button. For sales, deals, loyalty, and discount pages.
Hero coupon banner with copyable code and full-bleed image
coupon-3
Split-panel promo hero with member badge, headline, copyable code, time limit indicator, fine print, and CTA paired with full-bleed image. ReUI Badge, Frame; shadcn Button, Item. Loyalty offers, early access, seasonal sales.
Coupon card with copyable promo code and discount offer terms
coupon-4
Promotional offer card with one-click copyable promo code, discount headline, eyebrow badge, expiry and minimum-spend meta, fine-print checklist, and CTA. ReUI Badge; shadcn Card, Button, Item. For coupon pages, member offers, discount promos.
Full-width promo announcement bar with copyable discount code
coupon-5
Dismissible top banner announcing an offer with a dashed promo code chip, copy-to-clipboard button with copied feedback, and a restore action. Uses shadcn Button. For sale bars, free-shipping notices, discount codes, store promotions.
Full-width dark promo bar with inline copyable discount code chip
coupon-6
Dark full-width announcement strip with offer headline, dashed promo code chip, copy-to-clipboard button with copied feedback, and dismiss control. Built with shadcn Button. For flash sales, discount campaigns, promo banners, sale alerts.
Centered newsletter signup CTA with mail-prefixed email input and avatar-stack subscriber proof
cta-1
Centered newsletter CTA: badge eyebrow, headline, lede, a mail-prefixed email field with Subscribe button, and an overlapping avatar stack with subscriber count. ReUI Badge, shadcn InputGroup, Avatar, Button. Email capture, mailing-list opt-in.
Split CTA card with image media panel, badge eyebrow, dual link buttons, and feature trust strip
cta-2
Two-column marketing CTA pairing copy with an image media panel on a radial dot-grid backdrop. Badge eyebrow, headline, two icon link Buttons, and a feature strip. ReUI Badge, shadcn Card, Button, Item. Landing CTA, get-started banner, product promo.
Centered Frame CTA with animated grid background, badge eyebrow, and single email capture form
cta-3
Compact centered email-capture CTA: a ReUI Frame and FramePanel surface over an animated motion/react SVG grid, with a Badge eyebrow, h2 heading, lede, and an inline shadcn Input plus Button. For waitlist, signup, lead-capture, and launch sections.
Centered marketing CTA with badge eyebrow, framed three-column proof grid, and dual link buttons
cta-4
Centered conversion CTA: Badge eyebrow, heading, lede above a ReUI Frame three-column FramePanel proof grid of bordered Item icon tiles, then primary and outline link Buttons. Landing, pricing, product closer; feature grid, dual button CTA.
Full-width aurora-gradient CTA banner with a two-line headline and one rounded-full pill button
cta-5
Full-bleed single-message conversion band: one bold two-line headline and a single rounded-full action over a static OKLCH aurora gradient. Built on shadcn Card and Button. For closing CTA sections, hero banners, sign up and get-started callouts.
Dark violet CTA banner with animated neon sine-wave line-stream backdrop and one rounded-full button
cta-6
Closing CTA banner: two-line heading, supporting line, and one rounded-full anchor button on a deep violet surface lit by an animated, looping neon line-stream. Built on shadcn Card and Button. For a final conversion band or dark hero section.
Operations dashboard with KPI stat cards, capacity charts, and a filterable exception data grid
dashboard-1
Fulfillment control center: metric cards, shift performance, capacity allocation tabs, a donut flow chart, and a searchable paginated exception queue. Uses ReUI Frame, Badge, DataGrid plus Tabs, Select, Progress, breadcrumb, and a date-range picker.
Operations Dashboard with Sparkline Metric Cards and Searchable Module Data Grid
dashboard-2
Operations console: sticky navbar with team presence and invite, three area-chart metric cards, and a paginated module DataGrid with progress rings, search, sort, and status filters. ReUI DataGrid, Badge; shadcn Card, Avatar, Popover, DropdownMenu.
Project delivery dashboard with tabbed header and weekly per-person worklog timesheet grid
dashboard-3
Delivery workspace: tabbed header with breadcrumb and collaborator avatars, account summary cards, a filterable weekly worklog timesheet DataGrid with week navigation, integration cards and Empty tab states. ReUI Frame, DataGrid, Badge; shadcn Tabs.
Voice Agent Call Analytics Dashboard with Tabbed Metric Switcher and Composed Area Chart
dashboard-4
Call analytics overview for voice AI ops: six-metric tab switcher (calls, duration, cost, LLM cost) over a recharts area-line chart, ranked agent bars, and integration status list. ReUI Frame, Badge with shadcn Button, Select, Chart, Item.
Edge Security Telemetry Dashboard with KPI Sparkline Tiles, Threat Charts and Node Load Bars
dashboard-5
Security ops dashboard: 4 KPI tiles with SVG sparklines, threat-vector and network-flow charts, per-node cluster load bars, active threat progress lanes, date-range picker. ReUI Badge, shadcn Card, Chart, Breadcrumb. SOC, NOC, monitoring.
Field Workforce Coverage Dashboard with Crew Table, Action Queue, and Supply vs Forecast Chart
dashboard-6
Workforce ops dashboard for shift coverage: metric tiles, a crew Table with coverage progress bars and status, an action queue, and a stacked supply vs forecast ComposedChart. Uses ReUI Frame, Badge with shadcn Table, Avatar, Item, Chart, Breadcrumb.
Retail revenue dashboard with KPI sparkline cards, stacked sales charts, and a sortable order queue
dashboard-7
Commerce revenue dashboard: 4 KPI cards with sparklines and trend deltas, a stacked area revenue chart, a channel-mix bar chart, and a searchable, paginated order queue with fulfillment bars. ReUI Frame, Badge, DataGrid; shadcn Chart and Calendar.
Creator royalty payout dashboard with sweep-lane payout control and a sortable ledger DataGrid
dashboard-8
Creator finance desk to clear royalties: command band with claimable balance, receipts vs buffer area chart, payout buffer progress and sweep lanes, plus a searchable ledger. ReUI Frame, Badge, DataGrid; shadcn Calendar, Select, DropdownMenu, Chart.
Customer CRM data grid with avatar rows, balance trends, and row actions menu
data-grid-base-1
Customer table for CRM and admin dashboards: search, status filter, avatar rows, balance trend tooltips, sortable resizable columns, pagination, and a row actions menu with delete confirm. ReUI DataGrid, Frame, Badge plus shadcn Avatar, DropdownMenu.
CRM contacts data grid with lead scoring, pinned rows, and a faceted filter builder
data-grid-base-2
Contacts table for a CRM or sales pipeline: pinned rows, a multi-field Filters builder, lead-score Progress bars, sparklines, status and category Badges, and column show/hide/resize/reorder. ReUI DataGrid, Filters, Frame, Badge, shadcn Avatar.
CRM sales opportunities data grid with pinned priority rows and faceted pipeline filters
data-grid-base-3
CRM deal pipeline table: pin top opportunities, filter by owner, stage, industry and alerts, sortable columns, circular progress rings, alert tooltips and a row actions menu. Uses ReUI DataGrid, Filters, Frame, Badge, Avatar, DropdownMenu.
Weekly team timesheet data grid with per-day hours and billable target tracking
data-grid-base-4
People rows plus seven day cells of logged hours with progress bars, and a weekly Total with target-coverage. Team, tracked-time, and billable Select filters, a Calendar week navigator, pagination. ReUI DataGrid, Frame; shadcn Avatar, Tooltip.
Support ticket queue data grid with SLA countdown, status filters, and bulk owner assignment
data-grid-base-5
Support ticket queue table in a Card: search, queue and multi-status filters, bulk assign-owner/status bar, SLA countdown cells, priority badges, close-ticket dialog. ReUI DataGrid, Badge; shadcn Card, Avatar, Select, Popover. Help desk, ticketing.
Members data grid with avatar rows, tabbed role and billing filters, and hover actions
data-grid-base-6
Team members table for admin and settings pages: avatar cells, billing status dots, search, a tabbed Role/Billing/Auth filter menu, and hover view, edit, delete actions. ReUI DataGrid, DataGridPagination, Badge with shadcn Avatar, DropdownMenu, Tabs.
Modules data grid with circular progress rings, status badges, and row actions
data-grid-base-7
Project modules table with per-row circular progress ring, task counts, date window, and status badges. Search, sort, status-filter, pagination, and row actions. ReUI DataGrid and Badge with shadcn DropdownMenu and InputGroup. For module manager.
Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles
data-grid-columns-1
Access review matrix whose columns swap per General, Tags, and Permissions tab, each scope a Switch toggle cell with row pinning, sorting, role filter, and search. Uses ReUI DataGrid, Frame, Tabs, Switch, Avatar. For RBAC admin, roles, team access.
Course Catalog Data Grid with Settings Popover for Density and Column Visibility
data-grid-columns-2
Course catalog table with thumbnail rows, category Badge, star Rating, assignee AvatarGroup, and completion rings. Status Tabs, category Select, search, plus a Popover for density, resizable and movable columns, and column visibility. LMS admin grid.
Work queue data grid with table and card view toggle and column display controls
data-grid-columns-3
Work queue task tracker with tabs, table/card view switch, and a Display popover for density, sticky header, resizable and movable columns, and toggled properties. Filter row, sorting, pagination. ReUI DataGrid, Filters, Badge plus shadcn Card, Tabs.
Members directory data grid with toggleable display columns and view settings popover
data-grid-columns-4
Member directory table for admin and people pages. A settings popover toggles display columns, sets ordering, and hides paused members. Built with ReUI DataGrid, Filters, Badge, and Rating plus Avatar, Popover, Switch, and a row-actions DropdownMenu.
Sprint backlog data grid with drag handle row reordering and live priority rank
data-grid-drag-drop-1
Drag-to-prioritize task table where reordering rewrites the rank column; row handles, move-to-top/bottom and remove menu, reset, empty state. ReUI DataGrid, Frame, Badge; shadcn Avatar, DropdownMenu. Backlog, sprint, priority queue.
Routing rules data grid with drag-to-reorder priority and per-row enable switches
data-grid-drag-drop-2
First-match-wins rule list where dragging a row sets precedence. Drag-drop rows, per-row Switch toggles, menu to move top/bottom or delete, reset, empty state. ReUI DataGrid, Badge; shadcn Card, DropdownMenu. For automations, routing config, rules.
Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
data-grid-drag-drop-3
Warehouse wave dispatch board with draggable, resizable columns, layout preset buttons (Dispatch, Dock, Risk), reset, and a live numbered review-order strip. ReUI DataGrid, Frame, Badge, Button, status pills, capacity bars.
Labels manager data grid with inline create and edit form, color picker, and drag-to-reorder rows
data-grid-editing-1
Manage project labels in a DataGrid: inline add and edit form with hex color picker Popover, drag-to-reorder rows, and delete confirmation. Uses ReUI DataGrid plus shadcn Button, Input, Field, AlertDialog, Empty. For label, tag, and taxonomy UIs.
Inline-editable product inventory data grid with per-cell validation and a dirty-state save bar
data-grid-editing-2
Edit inventory rows in place with text, number, and select cell editors, live validation, and a dirty-tracking Save / Discard bar. Search, status filter, add, duplicate, delete. ReUI DataGrid, Frame, Badge with shadcn Input, Select, Switch.
Inline-editable project intake data grid with dirty-state Save and Discard bar
data-grid-editing-3
Editable request intake table with click-to-edit text, number, and select cells, validation, search, status and priority filters, approval Switch, and unsaved-change tracking. ReUI DataGrid, Badge; shadcn Card, Input, Select, AlertDialog.
Task queue data grid with expandable parent rows that reveal nested sub-tasks inline
data-grid-expansion-1
Issue tracker / task management grid where parent tasks expand to inline sub-tasks with their own checkboxes, status and assignee. Tabs, filters, settings popover for ordering and columns. ReUI DataGrid, Filters, Frame, Badge, shadcn Tabs, Checkbox.
Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs
data-grid-expansion-2
Cash-flow grid: expandable parent lines drill into child items, Actuals/Plan/Variance tabs, Calendar month-range picker, search, plan-match and variance tooltips. For treasury, FP&A, budget, and burn dashboards. ReUI DataGrid, Frame, Badge.
Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail
data-grid-expansion-3
Release approval queue where TanStack rows expand into a rail of check cards with rating and coverage rings. Search and status filters, View Settings popover, readiness rings, approve and escalate actions. ReUI DataGrid, Badge, Rating; shadcn Card.
Billing transactions data grid with multi-field filter bar and async skeleton loading
data-grid-filtering-1
Transactions ledger grid with a Filters bar (text, searchable selects, contains/between operators), clear-all, async skeleton loading, sorting, pagination, and row actions. ReUI DataGrid, Filters, Frame, Badge. Payments, billing, fintech table.
Workflow automation library data grid with status tabs and a multi-field filter popover
data-grid-filtering-2
Automation library table with counted status tabs (Live, Needs approval, Draft, Paused) and a Filters popover for search, owner team, delivery mode and last updated. ReUI DataGrid, Frame, Filters, Rating, Badge; shadcn Tabs, Switch, DropdownMenu.
Renewals data grid with multi-field filter builder, bulk owner and stage actions
data-grid-filtering-3
Revenue-ops renewals table with a Filters builder (account, stage, risk, window, owner), a settings popover for density and column visibility, and bulk owner/stage reassign on row select. ReUI DataGrid, Filters, Badge; shadcn Card, Select, Popover.
Renewals risk data grid with multi-field filter builder and pinned at-risk accounts
data-grid-filtering-4
Customer success renewals queue: filter builder (account, owner, stage, signals, alerts), pinned at-risk rows, density and column settings, health Progress bars. ReUI DataGrid, Filters, Badge, shadcn Card, Popover, DropdownMenu, HoverCard.
Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows
data-grid-grouping-1
Tasks grouped under expandable stage rows with owner avatars, due dates, completion rings, and signal badges. Search, signal filter, density and column toggles. ReUI DataGrid, Badge, Avatar, shadcn Popover. Roadmap, issue tracker, project board.
Account revenue grouped by region with collapsible rows and ARR subtotals
data-grid-grouping-2
Region-grouped accounts, collapsible rows, per-region ARR and weighted NRR, grand-total footer. Health filter, search, density and column toggles. ReUI DataGrid, Frame, Badge; shadcn Button, DropdownMenu, InputGroup, Popover, Select. CRM, NRR.
Patient access cohort DataGrid with switchable grouping and outcome heatmap
data-grid-grouping-3
Grouped DataGrid bucketing intake signals by area, booking strength, or hold risk. Color-graded heatmap cells, footer totals, hold-risk filter, cohort benchmark. ReUI DataGrid, Frame, Badge; shadcn Button, Separator. Intake triage, cohort analysis.
Virtualized data grid with infinite scroll and bulk row actions
data-grid-virtualization-1
Transaction table that virtualizes rows and loads on scroll. Search, sorting, filter dropdowns, column visibility, bulk export/refund. ReUI DataGrid, Frame, Badge, Filters; shadcn Button, InputGroup, Popover, Switch. Payments ledger, admin panel.
Virtualized shipment exception queue with infinite scroll
data-grid-virtualization-2
Exception queue over 8,000 virtualized rows with infinite-scroll paging, row selection, bulk assign/release, faceted filters, search, and sorting. ReUI DataGrid, Frame; shadcn Button, Separator, Tooltip. Operations dashboard, shipment tracking.
Duration picker dialog with start and end time selects plus quick preset toggles
dialog-1
Modal for choosing a time span: start and end time Selects plus quick presets (30 min to 1 day) that auto-adjust the end time. Built with ReUI Dialog, Select, ToggleGroup, Field, Tooltip, Button. Time range picker, schedule, booking duration.
Tabbed account settings dialog with sidebar rail for profile, workspace, team and billing
dialog-10
Modal account settings dialog with a 5-tab sidebar (Profile, Workspace, Team, Billing, Preferences); each scrollable panel pairs labels with avatar upload, Inputs, Selects, Switches and a verified Badge. Uses Dialog, Tabs, ScrollArea, Field.
Two-pane finance account creation dialog with live account card preview
dialog-11
Split dialog to create a finance account: account name, acct_ tag, and statement label fields beside a live-updating account card on a gradient panel. Uses ReUI Dialog, Card, Field, Input, InputGroup, Button. For payout, banking, onboarding setup.
Tabbed create-entry dialog with status, assignee, due date, priority and label comboboxes
dialog-12
Quick-create record dialog with five entry-type tabs, each a title and notes field plus shared Status, Assignee, Due date, Priority and Labels comboboxes. Uses ReUI Combobox, Tabs, Dialog, Calendar, Avatar. For task creation and new-item modals.
Full-screen create project dialog with template prefill and multi-select labels
dialog-13
Full-screen create-project form: a template dropdown prefills fields, status, assignee, due date and priority Selects with avatars and dots, plus checkbox label cards with a selected count. ReUI Badge, shadcn Dialog, Select, InputGroup, Field.
OAuth connection consent dialog with provider logo rail and radio sync-scope picker
dialog-14
App integration consent modal: paired provider logos, permission notes, and a radio-group scope selector with cancel/continue. Built with ReUI Dialog, RadioGroup, Item, Field, Button. For OAuth handoff, connect-account, grant-access flows.
Workspace invite dialog with multi-email input and role select dropdown
dialog-2
Team invite modal that parses comma or space separated emails, dedupes them, and shows a live 'Send N invites' count. Pick a role per invite. Uses ReUI Badge with shadcn Dialog, Input, Field, Select, Button.
Plan cancellation dialog with multi-select reason checkboxes, feedback textarea, and warning banner
dialog-3
Subscription offboarding dialog: warning Alert with dismiss and manage actions, a checkbox grid of reasons, a feedback Textarea, and a Cancel plan button gated until a reason is picked. ReUI Alert, shadcn Dialog, Checkbox, Tooltip. Churn flows.
Workspace launch checklist dialog with accordion sections and inline-editable fields
dialog-4
Setup dialog with accordion sections, status badges, click-to-edit field rows, and a searchable connected-apps list with Connect or Manage. ReUI Badge, shadcn Dialog, Accordion, Item, InputGroup. Workspace setup, launch checklist, settings wizard.
Wide template library dialog with category rail, live search, and selectable template cards
dialog-5
Template gallery picker dialog: fixed category rail (radio group), live search input, and selectable cards with thumbnail and badges. Uses ReUI Badge with Dialog, Input, ScrollArea, RadioGroup, Item. Starter library, template browser, asset picker.
App connection dialog with searchable integration grid and single-select checkbox cards
dialog-6
Modal to connect a workspace app: search-filtered grid of brand-logo cards with round single-select Checkbox and a footer add button disabled until a pick. Uses ReUI Dialog, InputGroup, Kbd, Item, Empty. Integrations picker, connect-app, marketplace.
Help and support hub dialog with self-serve routes plus advisor and direct-desk escalation cards
dialog-7
Support hub modal: help routes (guides, walkthroughs, feedback) above an escalation grid pairing an advisor office-hours card with an email-support desk. Uses shadcn Dialog, Item, Card, Avatar, Button and ReUI Badge. Contact support, help center.
Multi-row collaborator invite dialog with per-row email field and role select
dialog-8
Invite teammates by email with a per-row role select (Member, Contributor, Reviewer, Admin), add and remove rows, and inline email validation. Uses ReUI Dialog, Input, Field, Select, Button. Team invite modal, add members, share access.
Create project dialog with cover image upload and status, priority, assignee, and label comboboxes
dialog-9
Modal new-project form with drag-and-drop cover upload, name, key, brief fields, single-select status and priority plus multi-select assignee and label comboboxes. Dialog, Combobox, Avatar, Tooltip, Alert. Add project, create workspace.
Records empty state with stacked-cards illustration, dual primary actions, and quick-guide link rows
empty-state-1
First-run empty state for a records or workspace table: stacked-cards illustration, Connect source and Upload CSV buttons, plus a two-up Quick guides list. Built with ReUI Empty, Button, and Item. Use for zero-data, onboarding, or no results screens.
Card-wrapped empty state with section heading and horizontal media-beside-text layout
empty-state-10
Empty state inside a Card under a section heading for a template or blueprint library with no items. Horizontal media beside title, description, and two buttons. ReUI IconStack with shadcn Card, Empty, Button. For blank library or first-run views.
Section-header empty state with action button above a muted card and stacked icon illustration
empty-state-11
Empty state for a list or feed section: heading, subtext, and Add button over a muted Card holding a layered stacked-icon illustration, title, and hint. ReUI IconStack with shadcn Empty, Card, Button. For zero-data panels and intake views.
Activity exports empty state with audience, workspace, and date-range filter toolbar
empty-state-12
Export empty state: header, three dropdown filters (audience, workspace, date range), and a split Execute button with CSV, PDF, and scheduled delivery. Uses ReUI IconStack, shadcn Empty, ButtonGroup, DropdownMenu. For export no-results screens.
File sources empty state with cloud storage connector grid (Dropbox, Box, Drive, OneDrive)
empty-state-13
Empty state for linking cloud storage: header, IconStack illustration, and a responsive grid of brand-logo connect buttons (Dropbox, Box, Google Drive, OneDrive). ReUI Frame, IconStack, shadcn Empty, Separator. For integrations screens.
Organizations setup empty state with framed enable card, building icon, and tooltip help link
empty-state-14
Organizations settings empty state to enable multi-org with team members and role-based access. Framed card with stacked building icon, enable CTA, and a tooltip help link. ReUI Frame, IconStack, shadcn Empty, Button, Tooltip, Separator.
Search no-results empty state with suggestion chips and a stacked result-card illustration
empty-state-2
Workspace search zero-state: a stacked result-card illustration, paired Browse library and Refine filters actions, and a 'Try these searches' row of pill suggestion chips. Built with ReUI Empty, ButtonGroup, Button. For no-results, search hints.
Projects empty state with hero illustration, dual actions, and quick-start template list
empty-state-3
No-projects empty state for a workspace: hero illustration, New project and Explore templates buttons, and a Quick starts grid of clickable template cards. Uses ReUI Empty, Button, Item. Good for onboarding, first-run, zero-data screens.
Two-column reports empty state with icon, dual actions, and preview screenshot slot
empty-state-4
Split empty state for an empty reports or analytics workspace: icon, title, helper copy, and Add report plus View sample buttons beside a blank screenshot preview panel. Uses ReUI Card and Empty with shadcn Button.
Two-column empty state in a ReUI Frame with icon, dual actions, and a preview panel
empty-state-5
Split empty state for a no-data briefing or report view. Left column pairs an icon, title, and description with primary and outline Buttons; right column is a preview surface. Uses ReUI Frame, shadcn Empty and Button. For blank dashboards.
Team workspace onboarding empty state with two action buttons and three colored setup-step tiles
empty-state-6
Centered team workspace onboarding empty state pairing two outline action Buttons with three colored clickable setup tiles. Uses ReUI Empty and Item primitives. For workspace setup, first-run onboarding, getting-started checklist.
Workspace member invite empty state with circular icon and dual invite and copy-link buttons
empty-state-7
Centered empty state prompting the first workspace invite, with a ring-framed icon, title, description, and two CTAs (Invite members, Copy invite link). Uses ReUI Empty and Button. For team onboarding, members page, no-members placeholder.
Project settings empty state with line tabs and per-section setup prompts
empty-state-8
Settings header over line-style Tabs (project states, labels); each tab shows a left-aligned Empty with icon, title and Enable button. ReUI IconStack with shadcn Tabs, ScrollArea, Empty, Button. For settings onboarding and zero-states.
Workspace member invite empty state with layered 3D icon-stack illustration and dual invite actions
empty-state-9
Centered empty state prompting the first workspace invite, with a stacked-card icon illustration, title, supporting text, and primary Invite members plus outline Copy invite link buttons. Uses ReUI IconStack, shadcn Empty, Button.
Two-column FAQ with sticky intro, line-tab category filter, and multi-open accordion cards
faq-1
Two-column FAQ: sticky intro plus a line-variant Tabs row that filters questions by category and re-mounts a multiple-mode Accordion of bordered Cards, first answer open. ReUI Badge, shadcn Tabs, Accordion, Card, Button. For help and FAQ pages.
Centered two-column FAQ with multi-open divider accordion and a dot-grid framed support panel
faq-2
Centered two-column marketing FAQ that keeps one answer open per column. Divider-row Accordion over a dot-grid Frame support panel and outline link CTA. ReUI Badge, Frame, FramePanel, shadcn Accordion, Button. For help, support, pricing FAQ, docs.
Open no-accordion FAQ with always-visible two-column answer grid and two-CTA support row
faq-3
Open FAQ section showing every answer at once, no accordion: a hairline-divided two-column question and answer grid that stacks on mobile, plus a support row with two CTAs. Uses shadcn Button, Item, ItemMedia. For help, support, pricing FAQ, docs.
Centered single-column FAQ with help eyebrow and borderless single-open accordion
faq-4
Centered single-column FAQ: help-icon eyebrow over a shadcn Accordion of seven Q&A rows split by thin border dividers (no cards, single-open, first open), with a "Talk to the team" arrow link. For FAQ, help, support, pricing FAQ, onboarding pages.
Two-column FAQ pairing a single-open accordion card with a sticky support-CTA sidecard
faq-5
Two-column marketing FAQ: a single-open Accordion in a Card (hairline rows, first open) beside a sticky dashed support CTA card with a contact link Button and email fallback. ReUI Badge, shadcn Accordion, Card, Button. For help, support, FAQ pages.
Single-column FAQ accordion with built-in contact-support footer inside one stacked ReUI Frame tray
faq-6
One-column Q and A: a single-open Accordion above a muted footer with Read The Docs and Contact Support buttons, boxed in stacked ReUI Frame. Built on shadcn Accordion, Item, Button. For FAQ, help, support, and pricing-questions pages.
Faceted ecommerce product filter sidebar with active filter chips
filter-sidebar-1
Refine a product catalog by category and brand checkboxes with counts, a price range slider, color swatches, and size buttons, with removable active chips plus apply and reset. shadcn Card, Checkbox, Slider, Button. Shop, faceted search, listing.
Product filter sidebar with active chips, price slider, and color swatches
filter-sidebar-2
Ecommerce sidebar to refine listings by category, brand, price range, color swatches, and size, with result counts and removable filter chips. ReUI Frame; shadcn Button, Checkbox, Label, Slider, Separator. For product listing, shop, category browse.
Faceted ecommerce filter sidebar with department pills, price slider, and removable filter chips
filter-sidebar-3
Filter sidebar with department pills, category/material/brand facets, price slider, color swatches, size buttons, star rating, removable chips, and stock/sale toggles. shadcn Checkbox, Slider, Switch; ReUI Rating. For catalog and search results.
Ecommerce product filter sidebar with department pills, color swatches, and removable filter chips
filter-sidebar-4
Faceted product refinement panel with category, material, brand checkboxes, price slider, color swatches, size buttons, star ratings, quick toggles, removable chips. ReUI Frame, Rating; shadcn Checkbox, Slider, Switch. Faceted search, shop sidebar.
Slide-Out Ecommerce Product Filter Panel with Active Filter Chips
filter-sidebar-5
Slide-out filter panel for ecommerce catalogs: departments, categories, materials, brands, colors, sizes, price slider, rating tiers, in-stock toggle, facet counts, removable chips, clear-all. ReUI Badge, Rating; shadcn Sheet, Slider. Faceted search.
Collapsible ecommerce filter sidebar with accordion facets and active filter chips
filter-sidebar-6
Faceted product filter sidebar with collapsible accordion sections, price slider, color swatches, size and brand toggles, and removable active chips. ReUI Rating; shadcn Accordion, Card, Checkbox, Slider, Switch. For catalog, search, shop pages.
Ecommerce Filter Sidebar with Removable Chips and Accordion Facets
filter-sidebar-7
Ecommerce filter sidebar with removable active-filter chips, multi-open Accordion facets, per-section count Badges, price Slider, color swatches, and size options. ReUI Frame, Badge, Rating; shadcn Accordion, Slider, Switch. Shopping catalog refine.
Profile settings card form with completion badge and date-plus-time availability picker
form-1
Profile settings Card form: avatar upload, birth date and availability date-time Calendar pickers, multi-select specialty Combobox chips, visibility Select, available-to-hire Switch, completion Badge. For account settings, edit profile, preferences.
Customer onboarding intake form in a Card with labeled rows and multi-owner combobox
form-10
New-workspace setup form: company, slug, intent radios, team size, launch window, template, data source, owner chips, sample-data toggle, notes. Uses ReUI Badge, shadcn Card, Combobox, RadioGroup, Select, Switch, Textarea. Account setup wizard.
New App Launch Form with Gradient Summary Banner and Label-Control Rows
form-11
App launch form in a Card with a gradient banner that live-mirrors picks. Rows pair a brief Textarea, prefixed App URL InputGroup, name Input, and starter, source, runtime, region Selects. For deploy and project setup wizards.
Ecommerce product creation form with image upload, pricing, inventory, and collections combobox
form-12
Create product form in a Card with label-control rows: multi-image thumbnail dropzone, Select status and category, currency InputGroup pricing, SKU and stock, Switch toggles, multi-select Combobox collections. Product catalog, add product, admin.
Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups
form-2
Configure a hosted checkout: offer type, button copy, and handoff via ReUI Frame and Badge with shadcn Field rows, Select, Checkbox groups, InputGroup, Tooltip, and Button. Settings form, payment config, store admin panel.
Invoice creator form with editable line-items table and live discount, tax, and total summary
form-3
Invoice builder with customer combobox, date pickers, currency and term selects, an editable line-items table, and a live subtotal, discount, tax, and total panel. ReUI Badge with shadcn Card, Table, Combobox, Calendar. For billing and invoicing.
Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy
form-4
Auth method config page: line tabs switch Email, Phone, Password, Passkeys, Protection, and User Model panels of Switch, Select, RadioGroup, and Input rows with Pro/Beta badges, tooltips, alerts, and a save/discard toast footer.
Tabbed user profile settings form with sticky audit rail and activity heatmap
form-5
Admin profile editor with Profile, Organizations, Security tabs, a sticky audit rail of IDs and timestamps, completion Progress, and activity heatmap. ReUI Badge with shadcn Card, Field, Combobox, Switch. For account settings, member detail pages.
Business Verification Review Page with Editable Detail Sections and Dialog Forms
form-6
KYC business verification summary with read-only Frame panels for legal, public, and ownership details, each opening a Dialog edit form. ReUI Frame, Badge plus shadcn Dialog, Field, Select, Tooltip. Account review, onboarding, compliance.
Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips
form-7
Support ticket detail panel where each field edits inline with save, cancel, and async saving toasts. Status, priority, SLA, due-date, tag and owner chips. ReUI Frame, Badge with Select, Combobox, Calendar, Switch. For helpdesk and issue trackers.
API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows
form-8
API keys settings page: copy framework .env snippets, reveal, rotate, or revoke masked keys, plus a create-key dialog with scopes, owners, and expiration. ReUI Frame, Badge, Alert with Dialog, Combobox, Select, InputGroup.
Enterprise member invite form with searchable role permission tree and access guardrails
form-9
Invite teammates and assign scoped workspace roles: email combobox chips, workspace and expiry selects, member-type radios, SSO switches, and a searchable checkbox role tree with privileged badges. ReUI Badge and Tree, shadcn Card. For RBAC.
Drag-and-drop issue tracking kanban board with six status columns and per-task completion rings
kanban-board-1
Bug tracking board: drag tasks across six status columns, reorder columns, with priority, signal dots, owner avatars, due dates, and SVG completion rings. ReUI Kanban, Badge; shadcn Card, Avatar, Button. Sprint board, backlog, task tracker.
Access review kanban board with risk badges, star confidence rating, and reviewer avatars
kanban-board-10
IAM access certification board with draggable cards and columns across Intake, Owner Review, Risk, Exception, Removal, Certified. Risk-tiered cards show request IDs and avatars. ReUI Kanban, Badge, Rating with shadcn Card. Access governance, audit.
Workflow kanban board with collapsible status columns and draggable cards plus columns
kanban-board-2
Drag-and-drop kanban for project and CRM workflows: 8 status columns collapse to vertical rails, reorderable cards and columns, count badges, deal value and assignee avatars. Uses ReUI Kanban and Badge with shadcn Card, Button, Avatar.
Sales pipeline kanban board with draggable deal cards and reorderable stages
kanban-board-3
CRM sales pipeline board with drag-and-drop deals across six stages. Deal cards show company logo, value, next step, owner avatar, star rating, and attachment/comment counts. ReUI Kanban, Badge, Rating, shadcn Card, Avatar, Button.
Feature roadmap kanban board with vote-weighted cards across six delivery stages
kanban-board-4
Drag-and-drop product roadmap board with six status columns and reorderable cards showing votes, vote-trend arrows, progress bars, and impact or ARR. Feature voting, planning board, backlog. ReUI Kanban, Frame, Badge with Progress, Button.
Workflow status kanban board with collapsible column rails and per-task progress rings
kanban-board-5
Drag-and-drop status workflow kanban: reorder cards and columns, collapse columns to vertical rails, with progress rings, owner avatars, and status badges. ReUI Kanban, Badge plus shadcn Card, Item, Avatar. Task board, project tracker, sprint board.
Support escalation kanban board with SLA timer chips, priority badges, and draggable columns
kanban-board-6
Help-desk board with six SLA-state columns. Drag-and-drop ticket cards and reorderable columns show SLA countdown chips, priority badges, and assignee avatars. ReUI Kanban, Badge; shadcn Card, Item, Avatar. For support queue and ticket triage tools.
Customer renewals risk kanban board with ARR, health score, and risk-tier account cards
kanban-board-7
Drag-and-drop renewals board, six risk stages, account cards with ARR, renewal date, days left, color-coded health bar, owner, and Critical/Warning/Clear status. CSM pipeline, churn risk. ReUI Kanban, Badge; shadcn Card, Progress, Avatar.
Release readiness kanban board with risk badges, checklist progress, and drag-and-drop change cards
kanban-board-8
Six-column pipeline (Intake to Shipped) with draggable change cards showing risk badge, service, environment, owner avatar, launch window, and checklist progress. ReUI Kanban, Frame, Badge plus shadcn Item, Avatar, Progress. Deploy and release board.
Recruiting pipeline kanban board with candidate match scores and scorecard status
kanban-board-9
Applicant tracking board: six draggable pipeline stages from Sourced to Offer, candidate cards with match-score progress bars, scorecard badges, and risk flags. ReUI Kanban, Frame, Badge, Progress, Avatar, Button for ATS and hiring boards.
Order Metrics List Card with Icon Tiles and Up Down Trend Badges
list-1
Compact KPI metric list: framed icon tile, large value, colored up/down trend badge, and open-details button per divided row. ReUI Frame, Badge, shadcn Item, Button, Separator. Stats summary, dashboard, finance overview.
Recent Investments Card with Searchable Gain-Loss Table and Company Logos
list-10
Investments card: header with ⌘K search input, fixed table of company logo, name, date, sector, and green or red value change. ReUI Frame, FramePanel; shadcn Table, InputGroup, Item, Kbd.
Top movers list table with company logos, status badges, and up/down trend values
list-11
Top movers leaderboard table: company rows with logo and location, status badges (Active, New, On Hold), and a trend column with gain/loss value and up/down arrow. Header search with Cmd-K hint. ReUI Frame, Badge, shadcn Table, InputGroup, Kbd.
Capital inflows fund leaderboard list with logo badges and a range filter select
list-2
Ranked fund inflow rows with a colored brand-logo badge, name, and Capital In amount, plus a Select to switch Top 3 / Top 5 / All. ReUI Frame, shadcn Select, Item, Separator. For leaderboards, top contributors, investor summary widgets.
Capital Inflows Card with Period Tabs and Ranked Fund List Showing Amount and Share
list-3
Capital inflows widget switching ranked fund rows by period tabs (Weekly, All Time); each row shows logo, name, dollar amount, percentage share. ReUI Frame, shadcn Tabs, Tooltip, Separator. For finance dashboards, top contributors, leaderboards.
Crypto Portfolio Snapshot List with Period Tabs and Per-Asset Trend Badges
list-4
Crypto holdings card switching between Weekly and All Time tabs, listing coins with logo, price, up or down trend badge, value and holdings. ReUI Frame, Badge with shadcn Tabs, Button, Separator. Portfolio, watchlist, asset tracker.
Crypto Transactions List with Color-Coded Credit and Debit Amounts
list-5
Compact crypto transaction history list with directional credit/debit icons, title, date, and color-coded amounts. Uses ReUI Frame plus shadcn Item, Tabs, Separator. For wallet activity feeds and finance dashboards.
Crypto transaction list card with period tabs and dual-token swap amounts
list-6
Wallet activity card listing received, sent, swapped, and failed crypto transfers with token logos, truncated addresses, and color-coded amounts. Weekly and All Time tabs plus a View All footer. Uses ReUI Frame with Tabs, Item, Separator, Button.
Wallet Transactions List with Period Tabs and Color-Coded Category Icons
list-7
Transaction card with Weekly and All Time tabs; each row pairs a colored category icon with title, date, and a signed amount tinted green for credits or red for debits. ReUI Frame, shadcn Tabs, Item, Button. For wallet, banking, fintech feeds.
Integrations directory list with brand logos and per-row Connect buttons
list-8
Integrations directory card listing apps with brand logos, name, description, and a per-row Connect button, plus a See All footer link. ReUI Frame with shadcn Button and Separator. App marketplace, connected accounts, settings.
Manual integrations picker list with icon tiles, per-row add buttons, and Browse More footer
list-9
Integrations picker list with icon tiles, name plus truncated description per row, plus-button add actions, dashed dividers, and a Browse More footer. Uses ReUI Frame with shadcn Item, Button, Separator.
Project workspace navbar with breadcrumb, line tabs, and a collaborator avatar stack
navbar-1
Project workspace header: breadcrumb trail, line tabs with a count Badge, search/star/more actions, an expanding Create New button, and a collaborator Avatar stack. Uses ReUI Badge, shadcn Tabs, Breadcrumb, Avatar, DropdownMenu, Button.
API developer portal navbar with service switcher, HTTP request bar, and account menu
navbar-10
Top bar for an API console or dev portal: brand, service switcher (OpenAI, Stripe, Supabase logos), an inline HTTP method Select with endpoint Input and Send button, and an avatar menu with theme toggle. Uses ButtonGroup, DropdownMenu, Avatar.
Design system manager top navbar with center section tabs, version badge, and sync source switcher
navbar-11
DesignOps app header: brand mark, version Badge, centered Tabs (Patterns, Tokens, Icons, Motion), sync-source DropdownMenu (shadcn, Cursor, Paper), and avatar menu with light/dark/system theme toggle. For design-system, tokens, and admin toolbars.
Marketing navbar with icon mega-menu dropdowns and a sliding-arrow Get Started button
navbar-12
Marketing top bar with two-column mega-menu dropdowns for Product and Company, a Pricing link, and a Get Started button with a hover slide-in arrow. Built on ReUI NavigationMenu, Item, Separator, Button. Use for SaaS site header or landing page nav.
Compact editor action bar navbar with close button, document title, and submit action
navbar-13
Focused-mode bar for an invoice or document editor: close (X) button, vertical Separator, truncating title, a preview collapse toggle, and a submit button that confirms after click. Uses ReUI Button and Separator. For editor toolbar, draft bar.
Sticky workspace navbar with breadcrumb trail, team presence avatars, and filter and sort menus
navbar-2
Slim sticky app bar: breadcrumb trail, team avatar group with invite popover, and filter, sort, and overflow dropdown menus. ReUI Breadcrumb, AvatarGroup, Popover, DropdownMenu, Button. For workspace headers and project toolbars.
Developer platform top navbar with breadcrumb org, project and environment switchers
navbar-3
Header for dev tools and PaaS dashboards: breadcrumb of organization, project and color-dotted environment switchers, docs and settings menus, Upgrade button, avatar menu with light/dark/system theme toggle. ReUI Breadcrumb, DropdownMenu, Avatar.
Admin console top navbar with centered Cmd+K command search and a notifications popover feed
navbar-4
Admin top bar: brand, centered Cmd+K command search Dialog with Kbd hint, notifications Popover feed (avatars, actions, progress, ratings) and a user DropdownMenu with theme toggle. ReUI Badge, Rating.
Compact workflow editor navbar with active toggle, Test Run action, and history
navbar-5
Slim sticky toolbar for a workflow or automation builder: back link, active/inactive Switch, run-history button, Test Run action, and a more-options DropdownMenu (Export JSON, Duplicate, Share, Delete). Uses Button, Switch, Separator, DropdownMenu.
Two-row analytics dashboard navbar with date range picker, compare toggle, and command-K search
navbar-6
Sticky analytics toolbar with breadcrumb title, calendar date range picker, compare toggle, auto-refresh select, share, export/embed dropdown, and command-K search dialog. ReUI Breadcrumb, Popover, Calendar, Select, DropdownMenu, Dialog, Kbd.
CMS editor navbar with co-presence avatars and a split Publish button
navbar-7
Sticky editor toolbar for content apps: back link and breadcrumb, AvatarGroup co-presence, Preview, and a ButtonGroup split Publish with Schedule and Save as draft, plus a more-actions DropdownMenu (duplicate, history, archive, delete).
AI agent marketplace navbar with category filter pills, Deploy CTA, and notifications popover
navbar-8
Sticky AI agent marketplace navbar: centered category filter pills, Deploy CTA, notifications popover (avatar groups, star rating, progress, actions), and avatar dropdown with theme toggle. ReUI Badge, Rating, shadcn ButtonGroup, Popover.
Code editor app header with repo path breadcrumb and branch dropdown selector
navbar-9
Sticky IDE-style navbar for a code collaboration tool: brand tile, org/repo Breadcrumb path, branch-picker DropdownMenu with deploy targets, and Share plus Run Button actions. ReUI Breadcrumb, DropdownMenu, Button, Item, Separator.
Six-step workspace onboarding wizard with stepper progress and a live inbox preview pane
onboarding-1
Multi-step account and workspace setup flow: profile, role, discovery source, workspace, goals, invites, then a success state, with a synced product preview. ReUI Stepper plus shadcn Card, Combobox, RadioGroup, Select, Switch, Field.
Six-step workspace onboarding wizard with left sidebar vertical stepper and animated success state
onboarding-2
Six-step setup wizard (profile, role, source, workspace, goals, invites) with a clickable sidebar stepper, animated transitions, and a success screen. ReUI Frame and Stepper plus shadcn Field, Combobox, RadioGroup, Switch. Onboarding, signup wizard.
Split-screen workspace onboarding wizard with vertical stepper sidebar and animated dot-sphere panel
onboarding-3
Six-step signup: profile, role, source, workspace, goals, invites, plus success screen. Dark sidebar pairs a vertical ReUI Stepper with animated dot-sphere canvas. Field, Combobox, RadioGroup, Checkbox, Switch, Select. Setup wizard, account creation.
Six-step workspace onboarding wizard with top progress bar and success screen
onboarding-4
Multi-step flow to create a team workspace: profile with avatar upload, role and goal pickers, team size, teammate invites, animated top progress bar and ready screen. Uses ReUI Frame, Stepper, Combobox, Select, Field. Onboarding wizard, setup flow.
Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen
onboarding-5
Six-step modal wizard (profile, role, workspace, goals, teammate invites) with clickable dot stepper, animated steps, and a success screen. ReUI Dialog, Field, Combobox, Select, RadioGroup, Switch, Avatar upload, Button. For signup flow, get started.
Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup
onboarding-6
Eight-step workspace onboarding wizard ending in AI agent selection and API key setup with copyable terminal commands. Profile, role, goals, and invite steps. ReUI Stepper, Frame plus shadcn Combobox, RadioGroup, Select. Account setup flow.
Six-step workspace onboarding wizard with top progress bar and screenshot carousel rail
onboarding-7
Multi-step signup flow: profile, role, source, workspace, goals, invites, with a top Stepper progress bar, animated stacked-screenshot rail, and a success state. ReUI Stepper, Badge; shadcn Field, Combobox, RadioGroup, Select, Switch.
Dark 8-step workspace onboarding wizard with progress bar, agent picker, and CLI setup checklist
onboarding-8
Full-page dark onboarding flow: profile, role, workspace, goals, teammate invites, AI agent pick, and Codex CLI setup with a success screen. Animated progress bar, copyable commands. ReUI Stepper, Frame, Badge plus Combobox, Select, RadioGroup.
Six-step workspace onboarding wizard with marketing hero and animated progress bar
onboarding-9
Profile, role, source, workspace, goals, and invite steps beside a marketing hero, with photo upload, goal pickers, timezone Combobox, success state. ReUI Stepper plus shadcn Card, Select, RadioGroup, Switch. First-run setup, getting-started flow.
Apparel Product Grid with Wishlist Toggle and Discount Badges
product-card-1
Centered breadcrumb header over a responsive product grid with image hover, wishlist toggle, content and discount badges, and compare-at pricing. ReUI Badge; shadcn Breadcrumb, Button. Shop, catalog, gallery, ecommerce listing.
Fashion Studio Product Grid with Hover-Reveal Details Panel
product-card-10
Studio-shot fashion product grid where cards reveal a details panel on hover with categories, sizes, pricing, and New/Trending badges. ReUI Badge; shadcn Card, Button, Breadcrumb. For apparel catalogs, lookbooks, storefronts.
Ecommerce product grid with filters, sort, color swatches, and wishlist
product-card-2
Shoppable catalog with category, availability, sale, and color filters, price/newest/featured sort, per-card color swatches with image variants, and wishlist toggle. shadcn Card, Button, Select, Switch; ReUI Badge. Storefronts, apparel, shop pages.
Quick-buy product card with image carousel, sale pricing, and size picker
product-card-3
Horizontal quick-buy ecommerce card with image carousel, low-stock badge, strikethrough sale price, size grid, and add-to-bag plus wishlist actions. ReUI Badge; shadcn Button, Card, Carousel, Checkbox, Field, Tooltip. Shop, store, product page.
Similar products carousel of product cards with wishlist, discount and stock badges
product-card-4
Shoppable carousel of product cards with wishlist toggle, percent-off discount and low-stock urgency badges, page counter, and prev/next controls. Uses ReUI Badge; shadcn Card, Carousel, Button. For related products, recommendations, and cross-sell.
Split Two-Column Product Card with Finish Selector and Wishlist
product-card-5
Wide product card: left panel with stock badge, rating, discounted price, finish picker, add-to-bag and wishlist; right panel a masked image with hover zoom. ReUI Badge, Rating; shadcn Card, Button, Checkbox, Field, Tooltip. For product, store pages.
Masonry product gallery with hover-reveal detail overlay and filter or sort popover toolbar
product-card-6
Image-led shop page: masonry columns of mixed-ratio photos revealing a product detail card on hover or focus, with discount badges, wishlist heart toggle, and a popover filter and sort bar. ReUI Badge, shadcn Popover, Select, Switch.
Latest Products Carousel with Wishlist Toggle and Hover Add-to-Cart
product-card-7
Scrollable product carousel paginating four cards per page with hover image zoom, wishlist toggle, hover add-to-cart, status and discount badges, and arrival windows. ReUI Badge; shadcn Carousel, Card, Button. For store listings and new arrivals.
Filterable e-commerce product grid with sort, ratings, and wishlist
product-card-8
Product listing page with breadcrumb header, a filter popover (category, status, sale-only), sort menu, star ratings, and wishlist toggles. Uses ReUI Badge, Rating; shadcn Breadcrumb, Button, Field, Popover, Select, Switch. For shop, catalog pages.
Four-Column Product Grid with Breadcrumb Header and Star Ratings
product-card-9
Browsable ecommerce product grid with breadcrumb nav, category tags, star ratings, review counts, compare-at pricing, status badges, and add-to-cart buttons. ReUI Badge, Rating; shadcn Breadcrumb, Button. Catalog, shop page, marketplace.
Ecommerce product detail page with image gallery, variant picker, and reviews
product-detail-1
Full product page with breadcrumb nav, carousel gallery, buy box with color and size variants, tabbed specs, shipping, reviews, and related items. ReUI Badge, Rating; shadcn Carousel, Tabs, Table, Card, Button. For storefront, catalog, retail PDP.
Editorial product detail page with filmstrip gallery, story chapters, and reviews
product-detail-2
Full-page showcase: filmstrip gallery, sticky buy box with swatches, rating and discount badge, narrative story chapters, grouped spec tables, and an autoplaying review carousel. ReUI Badge, Rating; shadcn Carousel, Card, Button. Product page, PDP.
Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews
product-detail-3
Ecommerce product page with stacked gallery, sticky buy box (color and connector pickers, quantity stepper), overview, specs table, rating breakdown, and related items. ReUI Badge, Rating; shadcn Breadcrumb, ButtonGroup, Table. Product page, PDP.
Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents
product-detail-4
Editorial book PDP for ebook, audiobook, and bundle editions: captioned Look Inside gallery, sticky buy box with format picker, drop-cap sample, three-part chapter TOC, spec cards, autoplay review carousel. ReUI Rating, Badge, shadcn Card, Carousel.
Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box
product-detail-5
Ecommerce product page: sticky thumbnail gallery, dense buy box with color and size pickers, quantity stepper, Add to Cart, Buy Now, wishlist, specs, rating breakdown and review carousel. ReUI Rating, Badge; shadcn Button, Carousel, Progress.
Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box
product-detail-6
Magazine-style PDP in a narrow centered column: gallery, price, color and size pickers, quantity stepper, Add To Cart, a chapter-numbered story body, specs table, and quote-carousel reviews. ReUI Rating, Badge with shadcn Item, ButtonGroup, Carousel.
Ecommerce Product Grid with Color Swatches, Hover Wishlist, and Sale Price Badges
product-grid-1
Responsive 2x2 product collection grid: square media with hover zoom, hover-revealed wishlist toggle, color swatches that swap the image, and strikethrough compare-at price. ReUI Badge, shadcn Card, Button, Item. For shop, catalog, store listing.
Frame-Panel Product Card Grid with Color Swatch Image Swap and Wishlist Toggle
product-grid-2
Responsive 2-column product collection where each tile is a ReUI Frame split into stacked FramePanels for media and content. Color swatches swap the hero image, a hover wishlist Button toggles, ReUI Badge marks sales. Shop, catalog, category pages.
Frameless ecommerce product grid with per-card Add to Cart and hover wishlist toggle
product-grid-3
Frameless ecommerce product grid for shop and category pages: image tiles with full-width Add to Cart, hover-reveal wishlist toggle, category links, sale badges, star rating, and strikethrough price. Uses ReUI Badge, Rating, shadcn Item, Button.
Editorial product grid with numbered horizontal chapter tiles, story line and 3-up specs
product-grid-4
Editorial product grid of horizontal split tiles: numbered chapter header, square image left, title with price, story line and 3-up specs right. ReUI Badge, shadcn Item and Button, hover-reveal wishlist, sale strikethrough. Collection grid, catalog.
Ecommerce product grid with hover quick-buy panel and in-stock-aware size picker
product-grid-5
Shoppable 3-column product grid; cards reveal a hover quick-buy panel with a stock-aware size picker (sold-out sizes struck through), wishlist toggle, and Add to Bag. ReUI Badge, shadcn Item, Field, Checkbox, Button. Storefront catalog, shop listing.
Apparel 2x2 product grid with hover lifestyle image cross-fade and expanding color swatch pill
product-grid-6
Fashion ecommerce 2x2 product grid where tiles cross-fade product to on-model shots on hover, revealing Add to List and Add to Cart, plus a corner Badge and fan-out swatch pill. ReUI Badge, shadcn Button, Item. Catalog, collection, shop pages.
Account settings shell with vertical sidebar tabs for profile, workspace, team, and billing
profile-1
SaaS account settings page: a vertical Tabs sidebar switching Profile, Workspace, Team, and Billing panels on ReUI Frame and Badge, plus a searchable, filterable, paginated ReUI DataGrid of team members and shadcn Field, Input, Switch, and Combobox.
Admin settings page with line tabs spanning profile, members, permissions, and integrations
profile-2
Tabbed workspace admin settings: profile form, member DataGrid with row actions, permission checkbox matrix, notification and integration toggles. Account settings, team admin, access control. ReUI Tabs, DataGrid, Badge, Alert, shadcn Switch, Card.
Profile settings form with avatar upload, verified email, and regional preferences in a single card
profile-3
Account profile settings page: avatar upload, identity fields (name, verified email, username, role, phone), regional preferences (timezone, week start, language), dismissible sync alert. ReUI Alert, Badge, PhoneInput; shadcn Card, InputGroup.
Outreach inbox account settings page with connected mailboxes, reply routing, and signature toggles
profile-4
Mailbox settings page: account cards with status badges, per-row dropdown actions, connect-provider buttons, and signature toggles. ReUI Badge, shadcn Card, Item, Avatar, DropdownMenu, Switch. For outreach, inbox, and email account settings.
Notification settings with daily digest controls and a per-channel email and in-app alert matrix
profile-5
Notification preferences page: a daily digest stat summary with Progress bars and tooltips, a Switch toggle, plus a per-alert email and in-app delivery matrix. ReUI Badge with Card, Table, Checkbox, Switch, Field, Progress.
Partner referral rewards profile with copy-link share card, reward tier ladder, referral activity
profile-6
Referral and partner rewards page: metric cards with progress, a copy-link InputGroup share card, an unlocked/next/locked reward ladder, next-unlock progress, and a referrals activity list. ReUI Badge, shadcn Card, Progress, Avatar, Tooltip.
Meeting Capture Settings Card with Recording Mode, Consent, Notes Template, and Output Toggles
profile-7
Single-card meeting recording settings: capture mode, consent, and notes template selects, output checkbox group, prompt textarea, auto-share and transcript switches, Reset and Save with toast. ReUI Badge, shadcn Card, Select, Checkbox, Switch.
Billing settings page with plan summary, 3-column usage metrics, and invoice history table
profile-8
Subscription billing settings page: trial alert, plan summary with renewal facts, 3-column usage metrics, billing detail rows with tooltip hints, and an invoice history table. Built with ReUI Alert, Badge, shadcn Card, Table, Field, Tooltip, Button.
Account settings hub with grouped collapsible sidebar navigation and 11 swappable form panels
profile-9
Workspace settings page where a collapsible grouped sidebar switches 11 card-based form panels: authentication, profile, billing, API keys, webhooks, audit. ReUI Badge with shadcn Sidebar, Card, Field, Input, Select, Switch, Checkbox, RadioGroup.
Printable order receipt with paid badge, itemized items, totals breakdown, and shipment tracking
receipt-1
Post-checkout receipt for a completed purchase: Paid badge, Ship/Bill/Payment grid, line items with thumbnails, subtotal-discount-tax-total summary, Download/Email/Print actions. ReUI Badge, shadcn Card, Button, Item. Order confirmation, invoice.
Order receipt with vertical fulfillment Timeline, Paid status hero, and items plus totals breakdown
receipt-2
Order receipt pairing a vertical fulfillment Timeline (placed to delivered, with Track CTA) and a details pane: items, totals, Ship To, Bill To, Payment. ReUI Timeline, Badge; shadcn Card, Button. For order status, shipping tracking, invoice page.
Monospaced Paper Cash-Register Order Receipt Card with Print, Download, and Email Actions
receipt-3
Printable order receipt styled as a narrow monospaced paper slip: order meta, text-only item lines, totals with discount and a double-line TOTAL row, payment, ship-to, tracking. ReUI Card, Button, Item. Order confirmation, invoice, print receipt.
Delivered Order Receipt with Per-Item Review, Buy Again and Return Actions
receipt-4
Post-purchase order receipt with a Delivered hero, totals, and item rows whose action flips between Write Review and Buy Again plus a per-item menu (Return Item, Get Help). Order confirmation, order history. ReUI Badge, Rating, shadcn Card.
Two-column statement-style order receipt with metadata sidebar and itemized line totals
receipt-5
Statement-layout receipt: left sidebar with brand mark, Paid badge, large Total Paid amount and order/payment/address blocks; right pane lists items and totals. ReUI Badge, shadcn Card, Item, Button. Order confirmation, invoice, purchase summary.
Order Receipt Page with Quick-Action Tile Grid, Line Items, Totals, and Shipping or Tracking Details
receipt-6
Post-purchase receipt with a status-badged order summary, line items with thumbnails, totals breakdown, a shipping/payment/tracking grid, and a 4-tile Track/Reorder/Return/Help action grid. Uses ReUI Badge, shadcn Card, Button, Item.
Product reviews carousel with autoplay slides and avatar thumbnail navigation
review-1
Slides one full testimonial at a time with an attribution bar (reviewer, star rating, variant, verified badge) and avatar thumbnails to jump reviews. ReUI Rating, Badge, shadcn Carousel, Avatar, Button. Product pages, testimonials, social proof.
Customer Reviews Section with Sentiment Topic Filter Chips and Two-Column Review Grid
review-2
Product reviews section with topic filter chips showing per-theme confidence percentages and a two-column grid of avatar, star rating, verified badge, and helpful-counter tiles. ReUI Rating, Badge, shadcn Avatar, Button. Testimonials, social proof.
Customer reviews section with rating summary sidebar and sortable review list
review-3
Product reviews layout: summary card with aggregate rating, star-distribution bars and top-mention tags beside a sortable review list with verified badges and helpful counts. ReUI Rating, Badge, shadcn Card, Progress, Select, Avatar. Ratings pages.
Ecommerce Customer Reviews Pull-Quote Highlights Grid With Star Ratings and Avatars
review-4
Product review highlights section: six verified-buyer pull-quote tiles in a responsive grid, each with quote glyph, star Rating, score, avatar and posted date. ReUI Rating, shadcn Avatar, Button. Testimonials, ratings, social proof.
Ecommerce Product Testimonial Carousel with Autoplay and Dot Pagination
review-5
Customer reviews section: looping autoplay carousel of quote cards with star Rating, avatar attribution, and active dot pagination. ReUI Rating, shadcn Carousel, Card, Avatar. Product testimonials, social proof.
Auto-playing customer review carousel with star-rating-led testimonial cards and dot pagination
review-6
Looping testimonial slider for product pages and social proof sections: auto-rotating cards pause on hover, each leads with a star Rating, quote, and reviewer avatar. Uses ReUI Rating with shadcn Carousel, Card, Avatar, Separator.
Schedule with date-picker calendar and filterable day agenda of status events
schedule-1
Two-pane schedule: a month Calendar with event dots beside a status-filterable day agenda of event cards with status Badge, attendee AvatarGroup, time and location. ReUI Frame, Badge plus shadcn Calendar, Select, Avatar. Planner, appointments.
Date and Time Scheduling Popover with Quick Shortcut Rows, Calendar, and Time Slots
schedule-10
Schedule a date and time: quick shortcut rows (Today, Tomorrow, Next week), month and year calendar, and scrollable time-slot column with disabled slots. Uses ReUI Frame, shadcn Calendar, Item, Select, ScrollArea, Button. Due-date / deadline picker.
Session time picker card with start and end Selects, quick-duration presets and live duration
schedule-2
Booking card to pick a meeting or work-session time: ReUI Frame with Avatar header, Select start and end menus, quick-duration preset Buttons, Tooltip and live duration, Cancel and Apply. Schedule, time-slot, duration picker.
Meeting scheduler card with calendar, time-slot list, duration and recurrence selects, and switches
schedule-3
Schedule a meeting: pick a date, choose an available time slot, set duration and recurrence, add title and notes, toggle waiting room and auto-record. Booking form using ReUI Frame, shadcn Calendar, Select, Switch, Input, Textarea, Button.
Calendly-style meeting booking widget with month calendar, availability dots, and time-slot picker
schedule-4
Pick a date on the month calendar (available days dotted), choose a time slot, confirm. Side panel shows host, session type, platform, duration. ReUI Frame with shadcn Calendar, Select, Avatar, ScrollArea. Appointment scheduling, booking pages.
Compact team attendance calendar card with status filter and bar-chart stat rows
schedule-5
Team attendance widget: month Select, status filter DropdownMenu, single-date Calendar with today highlight, AvatarGroup, and Attendance/Absences/Delayed rows with bar sparklines. ReUI Frame, Badge; shadcn Calendar, Avatar, Chart. Presence tracker.
Schedule creation form with member multi-select, date picker, and file upload
schedule-6
Schedule creation form: name input, member multi-select with avatars, date picker, start and end time selects, drag-drop image upload, link and description. ReUI Frame, Combobox, Avatar, Field, Calendar, Select. For meeting and booking forms.
Webinar event detail card with collapsible overview, presenters, and Yes/Skip/Maybe RSVP sections
schedule-7
Event card with three collapsible sections: overview rows with live stream and recording switches, presenters, and agenda with Yes/Skip/Maybe RSVP. ReUI Frame and Badge, shadcn Collapsible, Avatar, Switch, Button. For meeting invites and webinars.
Compact month calendar card with per-day category dots, filter chips, and attendee-avatar agenda
schedule-8
Month calendar card with colored category dots per day, category filter chips, and a scrollable day agenda of events with attendee avatar groups. ReUI Frame, shadcn Calendar, Select, Avatar, ScrollArea. Mini schedule, team agenda widget.
Session booking scheduler with single-date calendar, duration toggle, and scrollable time slots
schedule-9
Appointment booking widget for meetings and consultations. Single-date Calendar with month and year dropdowns, 15m to 90m duration toggle, scrollable time-slot picker, confirm footer. ReUI Frame, shadcn Calendar, Select, ScrollArea, Button.
Import services settings step with selectable integration cards and a 2-pick limit
settings-1
Wizard step to import data from third-party services. Selectable integration cards with logo, status badge, and checkbox, capped at 2 picks via a toast, with back and next. ReUI Badge, Frame; shadcn Card, Checkbox, Button. Connect integrations.
Workspace security settings in Frame cards mixing toggles, a timeout select, and plan-tier badges
settings-10
Security settings page grouping session policy, login methods, and access restrictions into ReUI Frame cards. Rows mix Switch toggles, a timeout Select, and plan-tier Badges (Basic, Business, Enterprise) on shadcn Item. For 2FA, SSO, access controls.
Notification preferences settings with tabbed channel matrix table for Email, Slack, and In-app
settings-11
Notification settings grouping events under Projects, Messages, Reports, and System tabs, each a table with per-row Email/Slack/In-app checkboxes. Uses ReUI Tabs (line), Table, Checkbox. For alert preferences and channel opt-in.
Notification settings page with per-channel delivery modes and collapsible auto-follow toggles
settings-12
Notification preferences page: per-channel delivery-mode Selects for inbox, email, browser, and mobile, Slack, Zoom, and Google Meet connect rows, plus a collapsible auto-follow section. Uses ReUI Badge with shadcn Card, Select, Switch, Collapsible.
Integrations settings gallery, app cards in a grid with connect button and toggle switch
settings-13
Integrations settings page: responsive grid of app cards with brand logo, description, connect/disconnect button and a toggle switch. Connected apps marketplace, integration directory. ReUI Frame with shadcn Item, Button, Switch.
API integrations settings data grid with copyable keys, status switches, and pause-all toggle
settings-14
Sortable, paginated table of connected API integrations: brand logos, copy-to-clipboard API key badges, daily call counts, per-row enable switches, and a pause-all toggle. ReUI DataGrid, Frame, Badge; shadcn Switch. Connected apps, API keys settings.
Workspace settings with grouped preference cards, toggles, badges, and a team avatar row
settings-15
Workspace preferences page grouping AI, publishing, collaboration, and notification settings into Frame cards with Switch toggles, status Badges, action Buttons, and an AvatarGroup team row.
Connected apps integration settings with per-row status badges and connect actions
settings-16
Connected apps panel listing integrations as rows with logo, name, status badge (Connected, Available, Preview), and Configure or Install action. Uses ReUI Frame, Badge, shadcn Item, Button. For integrations, connectors, app directory.
Privacy and preferences settings card with mixed-control rows, switches, buttons and Pro/Beta badges
settings-2
Privacy settings panel of icon rows whose action varies per setting: toggle switch, single button, or a paired Enable all / Disable all control, plus Pro and Beta tags. ReUI Frame, Badge; shadcn Switch, Button, Item. Account privacy, preferences.
General Settings Form with Per-Row Controls, Required and Pro Badges
settings-3
Stacked settings rows in a ReUI Frame, each pairing a labeled description with its own control: Input, prefixed URL InputGroup, Select, ToggleGroup, color swatches, Switch list, plus Required and Pro badges. Preferences, app config, account settings.
App connections settings page with integrations grouped into labeled sections and per-row status
settings-4
Connected apps settings: integration rows grouped into labeled sections, each with brand logo, Connected or Needs review status, and a per-row menu to sync, manage, or disconnect. ReUI Frame, Badge; shadcn Item, DropdownMenu, Button.
Role Permissions Settings Panel with Two-Column Switch Toggle Grid
settings-5
Role-based access settings: a two-column grid of outlined permission cards, each with title, description, and on/off Switch, under a header with a New Permission button. ReUI Frame, Badge; shadcn Item, Switch, Button. For roles, access control, RBAC.
Integrations settings list with brand-logo cards and connect or disconnect toggle buttons
settings-6
Connected apps settings page: per-integration cards with brand logo, name, and Connect/Disconnect button that reveals per-channel notification toggles. ReUI Frame plus shadcn Item, Button, Switch. App connections, integrations, webhooks.
Account settings page with side-tab navigation for profile, security, notifications, and billing
settings-7
Tabbed account settings shell with a side tab rail. Profile with avatar upload, two-step verification, active sessions, delete account, and billing plans. ReUI Alert and Badge with shadcn Tabs, Card, Field, Input, Select, Switch, Item, Avatar.
Webhook endpoints settings list with per-endpoint delivery-health alerts and enable toggle
settings-8
Webhook developer settings managing endpoint routes with delivery-health tooltip alerts, status badges (Delivering, Retrying, Paused), enable Switch, copy URL, rotate-secret and remove actions. ReUI Frame, Badge; shadcn Item, Switch, DropdownMenu.
Workspace Preferences Settings With Collapsible Sections of Select and Switch Rows
settings-9
Workspace settings page grouping preference rows into collapsible General and Display sections, each row mixing select dropdowns and switch toggles with status badges. ReUI Frame, Badge; shadcn Collapsible, Item, Select, Switch, Separator.
Inset right project create Sheet with inline metadata comboboxes and target date picker
sheet-1
Create-project side drawer: name Input and description Textarea over inline Combobox pickers for status, priority, lead, members, milestone, target date, and labels. Uses ReUI Sheet, Combobox, Calendar, Dialog, AvatarGroup. New project or issue form.
Inset right AI assistant chat sheet with prompt suggestions and pinned composer toolbar
sheet-10
Floating right-side AI chat panel with scrollable history, prompt suggestion chips, and a pinned InputGroup composer (attach, voice, send) plus header new-chat and refresh actions. Uses Sheet, ScrollArea, DropdownMenu. Copilot, assistant drawer.
Right-Side Metric Detail Sheet with Target Progress, Owners, Alert Rule, and Changes Timeline
sheet-11
Right drawer for one KPI: current value with delta badge, target progress bar, definition facts, owner avatars, alert rule, and a recent-changes timeline. ReUI Badge, Timeline; shadcn Sheet, Progress, AvatarGroup. Metric detail, analytics drilldown.
Right-side help and support Sheet with search field and grouped guide links
sheet-2
Help center side panel: searchable InputGroup, grouped guide Items with status Badges and Tooltips, scrollable body, footer support links. For in-app help, docs drawers, support menus. Uses ReUI Badge, Sheet, InputGroup, Item, ScrollArea, Tooltip.
Searchable keyboard shortcuts reference in a right inset sheet, grouped by section
sheet-3
Right-side inset Sheet listing app keyboard shortcuts grouped into sections with Kbd key chords, a live search InputGroup, ScrollArea, and empty state. For a shortcuts panel, cheat sheet, or hotkeys help. Sheet, Kbd, InputGroup, ScrollArea, Empty.
Inset right AI assistant sheet with model selector, suggestion chips, and composer toolbar
sheet-4
Floating right-side AI chat panel with a header model-switch Select, user and assistant message bubbles, suggestion chips, and an InputGroup composer toolbar. Uses ReUI Sheet, InputGroup, ScrollArea, Tooltip. AI copilot drawer, chatbot panel.
Inset right comment thread Sheet with reply, react, resolve and open-only filter
sheet-5
Client discussion sheet for collaboration and review apps. Comments with reply, emoji react, resolve and reopen, open-versus-all filter and a composer. ReUI Badge, shadcn Sheet, Item, Avatar, InputGroup, DropdownMenu, ScrollArea, Tooltip.
Inset right view customizer sheet with quick toggles and layout mode picker
sheet-6
Floating right sheet to customize a workspace view: Switch toggles plus a RadioGroup of layout cards with SVG skeleton previews and a hint Tooltip. ReUI Sheet, Field, Switch, RadioGroup, ScrollArea. Settings panel, preferences drawer.
Inset right notifications sheet with unread badge, mark-all-read, and rich activity feed
sheet-7
Floating right-anchored notification panel for in-app activity. Scrollable feed with unread count, mark-all-as-read, approvals, attachments, avatar groups, ratings, and progress. ReUI Badge, Rating; Sheet, Avatar, Button, ScrollArea.
Inset right settings sheet with scrollable two-section form, header and sticky footer
sheet-8
Floating inset right Sheet for relay settings, with scrollable Delivery and Routing sections, Input, Select, and Switch fields, tooltip hints, and a sticky Reset / Save footer. ReUI Sheet, Field, Select, Switch. Settings panel, preferences drawer.
Inset right ticket details Sheet with inline per-row editing and save actions
sheet-9
Right-side ticket panel where each field edits in place via Select, Combobox, Calendar, Switch, or InputGroup, with Badge status, avatar chips, and async save toast. ReUI Badge, shadcn Sheet, Combobox. Ticket detail, issue properties, record drawer.
Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart
shop-hero-1
Ecommerce landing hero pairing shop positioning, dual CTAs and a curator row with a 1-up plus 2-stacked product mosaic, sale and compare-at pricing, per-tile add-to-cart, and a cart counter that updates live. ReUI Badge, shadcn Item, Button, Avatar.
Bento-grid shop hero with featured campaign tile, quick-add product tiles, and sale promo block
shop-hero-2
Ecommerce bento-grid hero: a large campaign tile with eyebrow, headline, and dual CTA, three product tiles with price, compare-at price, badge, and quick Add to Cart, plus an inverted sale promo. ReUI Badge, shadcn Item, Button. Shop hero, storefront
Ecommerce shop hero with full-bleed featured deal banner, countdown, and three promo tiles
shop-hero-3
Sale landing hero: image deal banner with offer headline, live Badge, countdown timer, social proof, dual CTA, plus three promo tiles. ReUI Badge, shadcn Button, Item. Storewide deals, weekly sale, promo page.
Shop By Category ecommerce hero with editorial header and a four-tile image category grid
shop-hero-4
Category-browse hero for shop and storefront homepages: editorial eyebrow, headline, lede, See All link, and four square image tiles with name, count, and hover arrow. Uses shadcn Item. Keywords: shop by category, collections grid, product landing.
Dual-Collection Shop Hero with Two Side-by-Side Full-Image Story Panels
shop-hero-5
Ecommerce shop hero promoting two collections at once: side-by-side full-bleed photo panels, each with eyebrow, headline, star rating, review count, from-price, primary Button CTA and link over a dark gradient. ReUI Badge, shadcn Button, Item.
Editorial split shop hero with brand stamp, dual Shop The Edit and Sale CTAs, and collection image
shop-hero-6
Collection-level storefront hero: split Card with editorial column (brand stamp, headline, release-stats row) and atmospheric image with a New Drop Badge. Dual Shop The Edit and Sale CTAs. ReUI Badge, shadcn Card, Button. Seasonal lookbook.
Collection Switcher Shop Hero with Tabbed Thumbnail Chips and Full-Bleed Editorial Panels
shop-hero-7
Storefront hero that switches collections via Tabs. Thumbnail chip triggers with status dot and piece count swap a full-bleed image panel with eyebrow, headline, lede, and dual CTA. ReUI Tabs, Item, Button. Shop landing, lookbook, drop switcher.
Edge-to-edge 2x2 collection quilt shop hero with full-bleed photo tiles and color-coded status pills
shop-hero-8
Full-width 2x2 grid hero linking four shop collections; each tile is a full-bleed photo with a color-coded status pill, name, and piece-count plus price-range meta over an animated Shop link. For storefront, category, lookbook, drop pages.
Shopping Cart Review With Item List, Free-Shipping Progress, Promo Code, and Order Summary Sidebar
shopping-cart-1
Pre-checkout cart page: item rows with quantity steppers, save and remove, plus free-shipping progress, promo code field, and an Order Summary sidebar (subtotal, tax, discount, checkout). ReUI Badge, Progress, InputGroup. Ecommerce basket review.
Two-Column Shopping Cart Page with Sticky Order Summary Frame and Coupon Field
shopping-cart-2
Cart page: item list with thumbnails, size badges, and quantity steppers beside a sticky order summary with delivery, tax, total, coupon, and checkout. ReUI Frame, Badge plus shadcn Item, ButtonGroup, InputGroup, Empty. Bag, basket, order review.
Data Table Shopping Cart with Column Header Rail, Quantity Steppers, and Order Summary
shopping-cart-3
Full-width pre-checkout cart laid out as a data table: column header rail, thumbnail rows with linked title, color swatch and size, ButtonGroup steppers, line totals, and an order summary with free-shipping Badge. ReUI Badge, Button, Item, Tooltip.
Full-Page Shopping Cart with Per-Item Delivery or Pickup Toggle and Sticky Order Summary
shopping-cart-4
Cart page where each item toggles delivery or pickup with its own date and fee, plus quantity steppers, promo code, and a hero estimated total. ReUI Badge, shadcn ToggleGroup, ButtonGroup, Card, InputGroup. For ecommerce checkout, basket, bag review.
Two-column shopping cart with order summary, coupon field, and payment method tiles
shopping-cart-5
Cart review and checkout page: a thumbnail items Card with ButtonGroup quantity steppers beside a sticky rail of coupon InputGroup, Tooltip-explained Order Summary, and a four-tile payment RadioGroup. ReUI Card, Item, Tooltip, Empty. Order review.
Quick Cart Dropdown Menu with Per-Row Quantity Steppers and Live Subtotal
shopping-cart-6
Mini-cart popover from a Cart button with count Badge: rows with thumbnail, variant, a quantity stepper driving a live subtotal, View Cart, Checkout, and an Empty state. DropdownMenu, ScrollArea, ButtonGroup, Item, Button. For header cart preview.
Mini Cart Slide-Out Sheet Drawer with Just Added Confirmation and Free Shipping Progress
shopping-cart-7
Add-to-cart mini cart drawer highlighting the just-added line with a success Badge, ButtonGroup quantity steppers, free-shipping Progress bar, subtotal, and Checkout. ReUI Badge, Sheet, Item, ScrollArea. Ecommerce side cart, slide-out basket.
AI Agent Operations Dashboard with Run Queue, Throughput Chart and Incident Timeline
solution-agents-1
Full-page console to monitor autonomous agent runs, approval backlogs, tool reliability and incidents. KPI cards, throughput chart, incident timeline, filterable run queue with row actions. ReUI Frame, DataGrid, Badge; shadcn Chart. Agent ops.
Agent run-configuration settings form with picker, validated timeout, and locked policy row
solution-agents-10
Configure how an agent runs: pick an agent, set reasoning model, concurrency, validated timeout and autonomy, toggle sandbox and retry policies plus one locked PII row. ReUI Frame, Badge; shadcn Select, Button, InputGroup, Switch. Agent settings page
Agent Run Queue with Collapsible Status Groups and Attention Filters
solution-agents-2
Triage table for agent runs in collapsible Running, Waiting, Failed, Completed groups with search, attention filter, density toggle, and per-row actions. ReUI DataGrid, Badge; shadcn Button, Avatar, Switch. For agent ops dashboards, run monitoring.
Agent Run Detail with Inline Step Trace and Editable Settings Panel
solution-agents-3
Single-page detail for one agent run: header with live actions, step trace with per-step tool calls and latency, plus a row-editable settings panel. ReUI Frame, Timeline, Badge, Alert; shadcn Avatar, Button. Use: run debugging, ops monitoring.
Agent Tool Access Matrix with Approval Routing and Run Policies
solution-agents-4
Per-agent tool governance: a DataGrid sets each tool's access mode (Auto Run, Approval, Blocked), rate limit, and approver, plus run-policy switches with save or discard. ReUI DataGrid, Filters, Frame; shadcn Switch, Select. Permissions, guardrails.
Agent Action Approval Inbox with Risk-Tiered Queue and Bulk Approve or Reject
solution-agents-5
Full-page console for triaging pending agent actions: filter by risk and status, bulk approve or reject, and inspect payloads in a detail sheet. ReUI DataGrid, Badge, Timeline; shadcn Sheet, Select, Checkbox. Approval inbox, human-in-the-loop queue.
Agent Playbook Builder Wizard with Live Summary Card and Tool Allowlist
solution-agents-6
Five-step wizard to build an agent playbook: trigger, condition rows, tool allowlist, approval gate, then review and publish with a live summary card. ReUI Stepper, Alert, Badge; shadcn Card, Select, RadioGroup. For workflow automation, approvals.
Failed Agent Run Triage Board with Detail Sheet and Retry Ladder
solution-agents-7
Triage failed agent runs in a data grid with metric cards, then open a detail sheet tabbed into error, retry attempts, and payload. ReUI Data Grid, Badge, Alert, Timeline; shadcn Sheet, Card, Button, Tabs. Agent ops, error monitoring, run dashboards.
Agent Evaluation Report with Pass Rate Trend and Release Markers
solution-agents-8
Read-mostly nightly agent eval report: pass rate trend with release markers, per-suite progress, and a regressions table comparing two releases. Period selector, regressions-only toggle, export. ReUI Frame, Badge, Filters; shadcn Chart, Progress.
Agent memory manager with scope rail and confidence-scored entries grid
solution-agents-9
Curate the facts agents retain: a scope rail with per-scope counts beside a confidence-scored grid, with pin, forget, and filter actions. Uses ReUI DataGrid, Badge, Filters, Frame; shadcn Button, Avatar. For agent ops and memory management pages.
AI Operations Dashboard with Provider Failover Timeline and Token Activity Chart
solution-ai-ops-1
Full-page LLM ops dashboard for provider health, token usage, routing rules, and safety drift: metric cards, failover timeline, token activity chart, routing grid. ReUI Frame, Timeline, DataGrid, Badge; shadcn Button, Chart. Admin panel, monitoring.
AI model provider settings page with priority and fallback routing rows
solution-ai-ops-2
Manage AI model provider connections, route priority, fallbacks, and endpoint health with status badges and connect, pause, test, save actions. ReUI Badge, Frame; shadcn Button, Dialog, Dropdown-Menu, Item, Select, Switch. Provider and routing setup.
Tabbed AI Ops Prompt Registry Queue with Table and Card View Toggle
solution-ai-ops-3
AI operations prompt queue with tabs, owner/risk/status filters, table-and-card view switch, display settings, export, and row actions to advance review. Uses ReUI DataGrid, Filters; shadcn Tabs, Card, Button, Select. Operator console, review queue.
Prompt Editor with Configuration and Evaluation Details
solution-ai-ops-4
Full-page prompt editor with tabbed sections for overview, text, safety, evaluations, and access. Status badges, form fields, timeline, save-discard workflow. ReUI Badge; shadcn Button, Tabs. For AI ops dashboards and model operator portals.
AI Ops Routing Rules Settings with Risk-Tiered Policy Toggle Grid
solution-ai-ops-5
Full-page AI routing controls: per-route policy toggle grid, provider fallback Select with validation, and reset confirmation. ReUI Frame, Badge; shadcn Switch, Select, Dialog, Dropdown Menu. AI platform ops, model settings, risk management.
AI Feature Flags Data Grid with Rollout Stage Tabs and Inline Enable Switches
solution-ai-ops-6
Manage AI feature flags by rollout stage with tabs, owner and segment filters, inline enable switches, detail sheet, archive dialog, operations Kanban. ReUI DataGrid, Badge, Filters, Kanban; shadcn Sheet, Switch, Tabs. Flag console, rollout admin.
AI Safety Policy Builder Wizard with Stepper Rail and Policy Rule Coverage Table
solution-ai-ops-7
Four-step wizard to configure, validate, and review AI model safety policies: enforcement modes, risk tiers, evaluators, and a rule coverage table. ReUI Stepper, Alert, Badge; shadcn Card, Table, Select, Dialog. Use for AI governance, model risk.
AI Token Spend Ledger Data Grid with Budget Status and CSV Export
solution-ai-ops-8
Full-page grid auditing token usage and cost by model provider and prompt, with filtering, sorting, CSV export, a row-detail sheet, and budget-alert toggles. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Switch, Sheet. AI ops cost tracking.
AI Ops Cost Dashboard with Spend Pace Chart and Tabbed Provider Cost Grid
solution-ai-ops-9
Tracks AI model spend, token volume, and budget alerts with KPI cards, a spend-vs-budget line chart, provider mix breakdown, and a tabbed cost-event grid. ReUI Badge, Data Grid; shadcn Card, Tabs, Chart. For AI ops, cost monitoring, budgets.
Product Analytics Dashboard with Scored Signal Backlog
solution-analytics-1
Tracks activation, retention, adoption, and backlog risk. Scored signal grid with sparklines, filtering, reporting ranges, health overview, and export. ReUI Badge, Frame, Data-Grid; shadcn Button, Chart, Progress. Product analytics, SaaS dashboard.
Feature Adoption Analytics Report with Trend Chart and Scored Feature Grid
solution-analytics-2
Read-only product analytics report comparing feature adoption by segment and period. Overview metrics, trend chart, and scored feature grid with sparklines and filtering. ReUI DataGrid, Badge, Frame; shadcn Chart, Select, Progress. SaaS usage report.
Activation Funnel Report with Conversion Area Chart and Segment Mix
solution-analytics-3
Tracks workspaces from signup to week 4 retention via a stacked funnel chart, segment mix pie, and risk-flagged cohort grid with period, segment, and export filters. ReUI DataGrid, Badge, Frame; shadcn Button, Select, Tabs. Funnel and cohort reports.
Cohort Retention Analytics Report with Retention Curve Chart and Cohort Table
solution-analytics-4
Period-over-period retention report: 4W-16W curve chart with period tabs, cohort health notes, and a sortable cohort grid by segment and event. ReUI Frame, DataGrid, Badge; shadcn Chart, Tabs, Item. For product analytics, retention, cohort views.
Event Explorer - Analytics Dashboard with Chart Grid
solution-analytics-5
Event catalog with health metrics grid and dense data table. Filtering, sorting, bulk owner reassignment, detail drawer. Built with DataGrid, Select, Checkbox, InputGroup, Button. Use for event audits, catalog management, and quality assessment.
Segment validation workspace with health metrics, review calendar, and weekly rule coverage grid
solution-analytics-6
Analytics segment-validation dashboard with health metric cards and sparklines, a review schedule calendar, and a filterable weekly rule coverage grid. ReUI Frame, DataGrid, Badge; shadcn Tabs, Calendar, Select. For segment management, reporting.
A/B Experiment Report with Ship Decision, Evidence Grid and Guardrails
solution-analytics-7
Read-only experiment analysis: ship-decision verdict card, tabbed evidence grid with period/segment filters and export, rollout plan and guardrails. ReUI Badge, DataGrid; shadcn Card, Tabs, Button. For A/B test reports, variant lift analysis.
Single-Metric Analytics Detail Page with Target-Tracked Trend Chart
solution-analytics-8
Single-metric detail page: health-badge header, four-up KPI rail, trend chart against a target line, cohort breakdown, changes timeline. ReUI Frame, Badge, Timeline; shadcn Chart, Select, Progress. For analytics dashboards, KPI tracking, metrics.
Alert Rules Settings Form with Tabs and Validation
solution-analytics-9
Tabbed settings form for configuring alert thresholds, delivery channels, quiet hours, and escalation with validation and save/discard. ReUI Alert, Badge; shadcn Button, Card, Tabs, Select, Switch. Analytics settings, configuration form.
Billing operator workspace with invoice ledger and past due recovery
solution-billing-1
Review the billing position and recover overdue invoices. Pairs a statement summary card and past due alert with a filterable invoice ledger. Uses ReUI Alert, Badge, DataGrid, Filters; shadcn Card, Button. For accounts receivable and billing pages.
Plan and pricing catalog editor with tiered plan tiles and status toggles
solution-billing-2
Plan catalog editor for billing teams to manage tiered plans, pricing, billing intervals, seats, entitlements, add-ons, and active/draft/archived status. ReUI Frame, Badge, Alert; shadcn Item, Button, Switch. For subscription and pricing settings.
Subscription Management Workspace with Quick-Action Cards and Lifecycle Grid
solution-billing-3
Manage subscriptions across active, trialing, past due, and canceled states. Quick-action cards with budget progress lead a filterable, searchable grid with row actions. ReUI Frame, DataGrid; shadcn Tabs, Select, Avatar. Billing ops, revenue recovery
Customer Billing Account Detail with Tabbed Invoices, Subscription, and Activity Rail
solution-billing-4
Single-account billing detail: identity header, tabbed invoice history, subscription, and payment methods beside a scoped activity timeline. shadcn Card, Tabs, Table, Button; ReUI Badge. Account detail, billing management, subscription page.
Four-step invoice builder wizard with a live receipt-style review preview
solution-billing-5
Guided invoice composer: pick a customer, edit line items with per-line tax and discount, then send. Live receipt review with draft and sent states. ReUI Stepper, Alert, Badge; shadcn Card, Table, Combobox, Select. For billing and invoicing pages.
Expandable Dunning Queue for SaaS Failed Payment Recovery
solution-billing-6
Sortable, filterable dunning queue for SaaS billing operators to recover failed charges. Expands inline to retry timeline. Features ReUI DataGrid, Frame, Filters; shadcn Button, Separator. Payment recovery, dunning list, failed billing.
Metered usage event ledger with tree meter scope selection
solution-billing-7
Audit metered events by meter and period with tree sidebar nav filtering, date picker, and export. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Calendar, Breadcrumb. Usage based billing, consumption tracking, subscription auditing.
Subscription Plan Change Wizard with Live Proration Preview
solution-billing-8
Stepped wizard to move a subscription to a new tier with a proration rail recomputing credit, charge, and due-today as plan and timing change. ReUI Stepper, Badge, Alert; shadcn Card, Button, RadioGroup, Item, Avatar. For plan upgrades, downgrades.
Coupon and promotion manager with inline redemption rule editor
solution-billing-9
Manage coupon and promo codes; each row expands inline to edit discount type, duration, redemption limits, and eligible plans. ReUI Badge, Frame; shadcn Button, Collapsible, Dialog, Select. Discount admin, promo codes, billing settings.
Salon Front-Desk Booking Dashboard with Appointment Queue and Chair Capacity
solution-bookings-1
Front-desk surface for daily salon scheduling: KPI cards, a chair-capacity donut, and a searchable appointment queue with status badges and no-show tracking. ReUI Frame, Badge, DataGrid; shadcn Avatar. Booking dashboard, appointment scheduler.
Salon Appointment Calendar with Day/Week Views and Double-Book Alerts
solution-bookings-2
Full-page booking calendar for salon operators: month grid with category dots, Day/Week toggle, staff filter, double-book conflict alerts. ReUI Alert, Badge; shadcn Calendar, Card, Select, ToggleGroup. Schedule, staff roster, appointment booking.
Appointment Detail Sheet with Deposit Payment and Booking Timeline
solution-bookings-3
Inset right sheet over an appointment list showing client, service, staff, deposit-progress payment, internal note, and a booking activity timeline. Uses ReUI Badge, Timeline; shadcn Avatar, Button, Item, Progress, ScrollArea, Sheet, Textarea.
Sales Pipeline CRM Dashboard with Metric Charts and Open-Deals Grid
solution-crm-1
Sales pipeline command center tracking pipeline value, forecast, and win rate via metric charts, plus a dense open-deals grid for search, sort, stage filters, and row actions. ReUI Badge, DataGrid; shadcn Card, Button, Avatar. CRM sales dashboard.
CRM deal pipeline kanban board with risk signals and confidence scores
solution-crm-2
Sales pipeline board tracking deals across six stages by risk signal, value, close date, confidence, and owner. ReUI Kanban, Badge, IconStack; shadcn Card, Avatar, Progress, Button. Deal pipeline, CRM dashboard, sales board.
CRM Contacts Grid with Bulk Owner Assignment and Detail Sheet
solution-crm-3
Full-page contacts directory for sales teams. Sort and filter rows, multi-select for bulk owner assignment or add-to-list, open a contact detail sheet. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Avatar, Sheet, Select. CRM, leads, accounts.
CRM Deal Detail Sheet with Inline Stage Select and Win Probability
solution-crm-4
Right-side sheet to inspect and advance a deal: inline stage Select drives win-probability Progress, deal team avatars, activity Timeline, and tasks. ReUI Badge, Timeline; shadcn Sheet, Select, Avatar, Progress. For pipeline and deal management.
CRM Activity Timeline with Day Buckets, Type and Owner Filters
solution-crm-5
Chronological sales activity log grouped by day buckets (Today, Yesterday, This week) with type and owner filters, collapsible detail panels, and outcome badges. ReUI Badge, Frame, Timeline; shadcn ToggleGroup, Select. Activity log, deal tracker.
Five-Step CRM CSV Import Wizard with Column Mapping and Validation
solution-crm-6
Guides bulk CSV uploads into CRM contacts and deals via column mapping, row validation counts, and duplicate handling. ReUI Frame, Stepper, Badge, Alert; shadcn Select, RadioGroup, Table, Switch. Data import, bulk upload, onboarding wizard.
SKU Inventory Operations Dashboard with Stock-Health Bar and Tabbed SKU Grid
solution-inventory-1
Full-page inventory ops dashboard: KPI stat tiles, stock-health status bar, velocity chart, low-stock alerts, and a tabbed, filterable SKU table. ReUI Frame, Badge, DataGrid; shadcn Button, Tabs, Chart. For warehouse, stock, and ecommerce ops.
Create Shipping Label
solution-inventory-10
Create shipping label dialog: a wide centered dialog with a sticky header carrying the title + close action, a two-column scrollable body, and a sticky footer with terms link plus Cancel / Buy Shipping Label actions. Left column stacks a pickup-to-destination route + order meta card, a Products card with per-item Weight inputs (kg), and a Packaging card with Custom Package / Carrier Package line tabs containing package name, type select, total weight, length/width/height + unit dropdown, and a save-for-future checkbox. Right column carries a Summary card (Shipping to + address + price details + total) followed by a Shipping Date input with calendar affordance and a Send Shipping Info to Customer checkbox.
Order Details
solution-inventory-11
Order details sheet: a right-anchored fulfillment review surface that reuses the solution-inventory-7 sheet shell. Header carries an Order Details title row, the order id + Shipped badge, a Created / Customer meta line, and a vertically-centered Delete / Order Tracking / View Shipping Label action cluster. The scrollable two-column body pairs an Order Data Frame (Items, Total Price, Shipping Priority, Delivery Method), a Products Frame with Item-based rows (image + name + SKU/color, inline weight input on the right), and a title-less Shipping Frame combining a vertical route Timeline, a UPS Global carrier chip, a Separator, and a four-step Picking / Packed / Shipping / Delivered status stepper. The right rail is a Summary Frame with shipping-to address, price details (Subtotal / Shipping / Tax / Total), and a separated total row. All frames use `dense spacing="sm"` for an operator-density default. The footer mirrors the header action cluster with a Read Shipping Terms & Conditions link on the left.
Full-Page SKU Inventory Ledger with Stock Health Metrics
solution-inventory-2
Stock ledger with KPI and health bar, filterable SKU grid (search, category, supplier, location, status), row actions, bulk operations, and detail sheet. ReUI DataGrid, Frame, Badge; shadcn Button, Select. Inventory management and warehouse tracking.
Low Stock Reorder Queue with At-Risk Value KPI and Bulk Create PO DataGrid
solution-inventory-3
At-risk value KPI and urgency bar over a searchable, filterable SKU DataGrid with multi-select bulk Create PO and a reorder detail sheet. ReUI DataGrid, Frame, Badge; shadcn Button, Select, InputGroup. For procurement and inventory dashboards.
Purchase Order Receiving Page with Line-Item Tracking and Activity Timeline
solution-inventory-4
Full-page purchase order detail for receiving stock against a PO: supplier and terms form, line-item receive table with backorders, costs, totals, and a note timeline. ReUI Badge, Timeline; shadcn Card, Table, Input. PO receiving, inventory intake.
Shop Activity Dashboard
solution-inventory-5
Inventory dashboard: 4 KPI stat tiles + inventory velocity bar chart + top categories list + tabbed shop activity table (Products / Recent activities / Orders). Composed by adapting existing application blocks (stats-1, chart-29, list-1) into a single shop-management surface.
Stock Health Grid
solution-inventory-6
Inventory overview block: total asset value KPI + segmented stock health bar (in stock / low / out of stock) above a filterable product DataGrid with search, date range, category and supplier filters, row selection, and pagination.
Stock Planner
solution-inventory-7
Stock planner sheet: a wide right-anchored sheet built on the sheet-6 shell. Header carries title, product name + Live badge, SKU/created/updated meta, and the Customer View / Remove / Edit Product action cluster. Scrollable two-column body pairs left-side Inventory KPIs, an Analytics card with two sparkline area charts, and a Variants table (size/color/price/availability/on-hand) with a right-side product gallery + thumbnails + spec list (category, fit, color swatches, sizes, star rating + reviews).
Stock Detail
solution-inventory-8
Per-product stock detail sheet: a wide right-anchored Sheet (inset, sheet-6 anatomy) with a Current Stock + Reorder Now row, an Inventory Rules Frame (threshold / safe / reorder / lead-time inputs + status / delta / velocity / next-reorder / updated-by stats + Auto Reorder switch in the header), a Shipping Frame (Custom / Carrier tabs + package name, type, weight, dimensions + save-package checkbox), and a right-side product summary (image, name, description, SKU / category / rating / price). Footer: Print Label · Cancel · Save.
Track Shipping
solution-inventory-9
Track Shipping sheet: a right-anchored single-column Sheet (sheet-6 + solution-inventory-7 anatomy) showing a shipment header (id + Shipped badge + placed-date / Order ID link meta + Cancel Order / Notify Customer actions), an origin-to-destination route with a carrier chip, a 4-step horizontal progress stepper (Picking / Packed / Shipping / Delivered with done / active / pending states), a Shipping Data summary (Total Time, Dep. Time, Exp. Arrival, Tracking No.), and a vertical Shipping Log timeline. Full-width Close button in the footer.
Workspace Members Directory Grid with Roles, SSO/2FA Status, and Bulk Role Actions
solution-users-1
Full-page admin console for workspace members: sort/filter rows, multi-select bulk role changes, SSO/2FA columns, member detail sheet. ReUI DataGrid, Frame, Filters, Badge; shadcn Button, Sheet. For user management, access control, team admin.
Member Detail Page with Sidebar Tabs for Access, Authentication, and Sessions
solution-users-2
Full-page admin screen to manage one member's roles, teams, MFA factors, sessions, activity, and a danger zone via a vertical tab rail. ReUI Badge; shadcn Avatar, Tabs, Select, AlertDialog. User management, permissions, account security.
Workspace roles and permissions access matrix with locked Owner column and grouped scope toggles
solution-users-3
Full-page matrix mapping workspace roles to grouped permission scopes: per-cell toggles, locked Owner access, group tabs, and a dirty save bar. ReUI DataGrid, Frame, Badge, Alert; shadcn Button, Tabs, Dialog. Admin panel, role management, RBAC.
Invitations Queue Data Grid with Status Filter and Bulk Resend or Revoke
solution-users-4
Full-page invitations grid tracking pending, accepted, expired, and revoked invites with search, status filter, bulk resend or revoke, and an invite people dialog. ReUI DataGrid, Badge; shadcn Button, Select, InputGroup. Admin panel, team management.
Just-in-Time Access Request Queue with Inline Approvals and Policy Review
solution-users-5
Admin grid to review, approve, or deny just-in-time access requests with inline decisions, bulk approve, and status/approver filters, plus a policy-check detail sheet. ReUI DataGrid, Badge; shadcn Sheet, Button. Access control, permission approval.
Day-Grouped Audit Log Timeline with Expandable Event Details and CSV Export
solution-users-6
Full-page audit timeline grouping access events by day with severity badges, expandable details, type filters, and CSV export. ReUI Timeline, Frame, Badge; shadcn Avatar, Button, Collapsible, Select, ToggleGroup. Activity log, compliance, access.
Enterprise SSO and SCIM Security Settings Page with Policy Controls
solution-users-7
Workspace admin page to manage SSO providers, SCIM provisioning, 2FA and password policy, session timeouts, and allowed domains, with status rows and a dirty-state save bar. ReUI Frame, Alert, Badge; shadcn Button, Select, Switch. Security settings.
KPI stat card grid with up or down trend badges and a per-card overflow action menu
stats-1
Responsive four-column KPI cards: large formatted metric, colored up or down delta badge, vs-last-month line, plus a per-card overflow menu. Uses ReUI Frame and Badge with shadcn DropdownMenu, Button, Separator. Stats overview, metrics, analytics.
Total Revenue stat card with trend badge, dropdown actions menu, and supporting metric rows
stats-10
Single KPI revenue card: large currency figure, USD label, red trend Badge for quarter-over-quarter change, and stacked metric rows. Built on ReUI Frame and Badge with shadcn Button and DropdownMenu actions. For dashboards, analytics, finance.
API call quota usage card with progress bar, billed cost, and renewal date
stats-11
Single-stat usage card tracking API calls against a monthly quota: Progress bar for used vs total, dollar cost, remaining free calls, and a renewal-date footer. ReUI Frame, shadcn Progress and Button. Usage meter, billing, plan limit.
Support metrics stat card grid with colored icon tiles and status badges
stats-12
Three-column support KPI grid: each Frame card pairs a colored bordered icon tile with a bold value, label, and status Badge (tickets, resolved rate, satisfaction). Uses ReUI Frame, Badge, Item. For support dashboards and service overview stats.
Compliance checks stat card with segmented bar gauge and overflow actions menu
stats-13
Single-metric card tracking compliance checks passing with a segmented filled-block gauge, percentage readout, and actions dropdown. Built on ReUI Frame plus shadcn Button and DropdownMenu. For security, audit, and status dashboard widgets.
Feature adoption stat card with segmented stacked indigo bar chart and actions dropdown
stats-14
Single metric card showing a large 84% adoption rate over a segmented bar chart of graduated indigo blocks, plus a header actions menu. ReUI Frame with shadcn Button and DropdownMenu. For KPI, analytics, and feature usage dashboards.
Three color-filled hero stat cards with metric, summary, and dark CTA action bar
stats-15
Three full-bleed colored metric cards, each with an icon, large KPI value, title, summary line, and a dark bottom CTA bar with a sliding arrow. Built on ReUI Card. For dashboards, KPI highlights, and stats callouts.
Color-block KPI stat cards with delta badge, vs-last-month row, and overflow menu
stats-2
Four KPI metric cards on solid color backgrounds with delta arrow badge, vs-last-month comparison, and per-card overflow menu. Built with ReUI Badge, shadcn Card, Button, DropdownMenu. Dashboard stats, KPI tiles, scorecard.
Subscription stats card with plan-tier segmented bar and expiring-soon renewal list
stats-3
Subscription metrics card: revenue and subscriber counts, a stacked Free/Pro/Enterprise tier bar with legend, and an Expiring Soon list with plan badges, days left, and renew links. ReUI Badge, shadcn Card, Select, Tooltip. For SaaS billing.
Leads overview stats card with range filter, progress bar and segmented returning-leads meter
stats-4
Lead summary card with a time-range Select, new vs returning counts, percent Badge, Progress bar and a 30-segment meter, plus top source and conversion rate Tooltip. ReUI Frame, Badge; shadcn Progress, Select, Tooltip. For CRM, marketing dashboards.
Dark balance stat card with segmented multi-currency allocation bar and topup action
stats-5
Wallet balance card with total amount, positive percent change, and a color-coded segmented bar splitting holdings by currency (USD, GBP, EUR) plus a Topup button. Uses shadcn Card and Button. For finance dashboards, crypto and banking apps.
Staff performance card with KPI trend grid, pipeline progress bar, and activity feed
stats-6
Sales rep performance summary: a 3-up KPI grid with up/down trend deltas, a pipeline progress bar, a recent activity list, and a quarter filter. ReUI Frame, Badge with shadcn Progress, Select, DropdownMenu, Button. For dashboards and scorecards.
Three-column stats panel with divided cells, large metric values and trend badges
stats-7
Bordered ReUI Frame panel split into three divided cells, each with a title, large metric value, colored trend Badge and period comparison subtext. KPI overview, dashboard stats, sales and churn metrics row.
Three-column KPI stat cards with icon tiles, trend badges, and date range footer
stats-8
Responsive 1 to 3 column metric grid; each card pairs a colored icon tile with a value, label, up/down trend Badge, and reporting date range. ReUI Frame, Badge, shadcn Item. For dashboards, analytics overview, KPI summary.
Tasks overview stat card with animated completion progress bar and AI finish-time prediction
stats-9
Task summary card: animated Tasks Done Progress bar, range Select filter, 3-column Backlog/In Progress/In Review buckets with colored counts, and AI prediction footer. ReUI Frame, shadcn Progress, Select. Project dashboard, productivity stats widget.
Vertical customer activation timeline with collapsible milestone cards and status indicators
timeline-1
Customer onboarding timeline where each activation milestone is a collapsible card with owner, priority and status badges, assignee avatars and due date. ReUI Timeline, Frame, Badge plus shadcn Avatar, Collapsible, Spinner. Onboarding tracker.
Vertical Account Rollout Timeline with Owner, Status Badges, Star Rating and File Attachments
timeline-2
Vertical activity timeline of onboarding milestones, each with date, action title, owner, colored status and risk badges, optional star rating and downloadable attachment. ReUI Timeline, Badge, Rating. Customer success, audit log, milestone feed.
Finance activity timeline with avatar nodes, status badges, attachments, and inline actions
timeline-3
Vertical finance feed of payouts, risk flags, invoices, and ledger updates. Avatar nodes, dot plus colored status Badges, attachments, participant AvatarGroup, inline action Buttons. ReUI Timeline, Badge, Avatar, Button. Audit log, activity feed.
Team activity feed timeline with avatars, attachments, progress, ratings, and per-event action menu
timeline-4
Vertical activity stream mixing actor avatars, attachment downloads, participant avatar groups, status badges, progress bars, star ratings, and a per-event action menu. Uses ReUI Timeline, Badge, Rating, Avatar, Progress, DropdownMenu.
Release changelog timeline with side date rail and color-coded type, impact, and change badges
timeline-5
Vertical changelog feed: each release shows a version title, summary, and tagged badges for type (New, Fixed), impact, and changes, with a left date rail. ReUI Timeline, Badge. Release notes, product updates, version history.
Horizontal scrolling approval workflow timeline with file attachments, ratings, and owner avatars
timeline-6
Horizontal scrollable timeline tracking approval steps, each with a phase status badge, attachment download, star rating, action button, and owner avatar. ReUI Timeline, Badge, Rating with shadcn Avatar, Button, ButtonGroup. For approval flows.
Account rollout activity dropdown with scrollable vertical timeline and per-step badges
timeline-7
Dropdown holding a scrollable vertical timeline of rollout steps, each with date, owner, status badge, dot-meta badge, attachment and star rating. ReUI Timeline, Badge, Rating with shadcn DropdownMenu, ScrollArea. Activity feed, audit log.
Slide-out team activity timeline panel in a right sheet with avatars, badges, and progress
timeline-8
Right-side activity feed panel listing team events as timeline entries with avatars, status badges, progress bars, attachments, ratings, and a per-item action menu. ReUI Timeline, Badge, Rating with shadcn Sheet, Avatar, DropdownMenu, ScrollArea.
Inset right sheet with a scrollable finance activity feed timeline and avatar indicators
timeline-9
Floating right sheet with a scrollable activity feed of payouts, risk reviews, and ledger entries with avatar indicators, status badges, attachment downloads, and inline actions. ReUI Timeline, Badge; shadcn Sheet, Avatar. Audit log, notifications.
Wishlist List View With Multi-Select Bulk Actions, Stock Status, and Price-Drop Signal Badges
wishlist-1
Saved-items wishlist as selectable rows with thumbnail, brand, variant, stock dot, and price. Select-all toolbar morphs into bulk Add to Cart, Remove, Clear; per-row Notify Me. ReUI Badge, shadcn Checkbox, Button, Item. Account and saved-items pages.
Saved-items wishlist grid with price-drop and restock signal badges plus status tabs
wishlist-2
Ecommerce wishlist that flags saved products with price-drop, restock, almost-gone, or unavailable badges, filters by status tabs, and bulk-adds in-stock items to cart. ReUI Badge, shadcn Tabs, Item, Button. Saved items, favorites, watchlist.
Wishlist Grid With Stock and Price-Drop Signal Badges and Tab Filters
wishlist-3
Saved-items wishlist grid where each card shows a stock or price signal badge, Move To Cart or Notify When Restocked, and hover remove. Line Tabs filter by signal with live counts. ReUI Badge, shadcn Tabs, Button, Item, Empty. For favorites, saved.
Wishlist Collections Grid with 2x2 Cover Mosaic Cards and Filter Tabs
wishlist-4
Account wishlist as named boards with 2x2 mosaic cover cards, +N overflow, item count, updated time, Shared badge, hover share/delete. Line Tabs filter All, Recently Updated, Shared, plus a dashed New Collection tile. ReUI Badge, shadcn Tabs, Item.
Priority-Grouped Wishlist with Stock Status and Savings Summary
wishlist-5
Saved-items page grouping products into Must Have, Save For Later, Maybe buckets with per-item stock status, price savings, a total, and lock-on-add cart actions. ReUI Badge; shadcn Button, Empty, Item, Tooltip. Wishlist, favorites, saved items.
Multi-Collection Wishlist with Cover-Stacked Collection Rail
wishlist-6
Saved products in selectable collections: a left rail of cover-stacked tiles with count and total, plus a product pane with brand, price, savings, and bulk add-to-cart. shadcn Breadcrumb, Button, Empty, Item. Wishlist, favorites, lookbook.
Three-step billing setup wizard card with horizontal stepper, per-step validation, review summary
wizard-1
Multi-step account and payment onboarding wizard in a Card: ReUI Stepper nav gates locked steps, validates each step, then shows a review summary with Badge. Uses Field, Input, InputGroup, Select, Switch, Button. For billing, checkout, onboarding.
Three-step procurement vendor onboarding wizard with per-step validation and review summary
wizard-2
Multi-step vendor KYC intake: company details, compliance with repeatable beneficial owners and tax ID, then a document checklist and review summary. Per-step validation. ReUI Stepper, Frame, Badge plus shadcn Field, Input, Select, Checkbox, Tooltip.
Invoice send wizard with step progress bar, line-item table, and live tax and discount totals
wizard-3
Four-step invoice send flow with progress Stepper, editable line-item Table, and live subtotal, tax, discount, and total. ReUI Stepper, Badge, Combobox; shadcn Card, Select, Calendar, Table, Tooltip. For billing, checkout, invoicing wizards.
Four-step billing upgrade wizard with live invoice preview sidebar and due-today total
wizard-4
Plan, seats, payment, and review flow that recalculates seat subtotal, annual discount, and support fee into a draft invoice. Uses ReUI Stepper, Badge, Alert plus Card, RadioGroup, Slider, Select, and Calendar. For checkout and seat upgrade screens.
Three step team invitation wizard with per-row role assignment and pre-send review
wizard-5
Add member emails with inline validation and per-row roles, set sender and expiry, then review a recipients table and send-readiness checks before queuing. ReUI Stepper, Frame, Badge plus shadcn Table, Select, Avatar. For onboarding and seat invites.
Five-step ecommerce product creation wizard with variant options and SKU matrix
wizard-6
Add-product flow across details, image gallery, variant option groups, pricing, and a per-variant SKU matrix table. ReUI Stepper, Badge, Alert with shadcn Card, Select, Switch, Table, Dialog. Product setup wizard, multi-step form.
Four-step fund transfer wizard with payee search, currency combobox, and balance checks
wizard-7
Money transfer flow over a 4-step Stepper: pick payee, set amount and funding source, review, authorize with a 6-digit code. Recent-payee grid, searchable saved accounts, multi-currency Combobox, low-balance Alert. ReUI Stepper plus shadcn Combobox.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, and user menu
app-shell-1
Dashboard app shell with an icon-collapsible sidebar: workspace switcher, nested platform nav with count badges, pinned resources with row action menus, theme toggle, breadcrumb header. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar, Breadcrumb.
AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich Notifications
app-shell-10
Inset sidebar shell for an AI agents console: command-K search, collapsible agent nav, projects with progress rings, usage-limit card, org and theme switcher, notifications popover. ReUI Frame, Badge, Rating; shadcn Sidebar, Popover, DropdownMenu.
Operations app shell with four toggleable regions and a resizable bottom workbench sheet
app-shell-11
Dense operations console: collapsible nav, resizable split panes, an expandable bottom workbench sheet, and a right calendar and agenda rail. ReUI Badge, Frame, Rating with shadcn Sidebar, Resizable, Tabs, Calendar. Admin shell, SaaS dashboard.
Icon-rail sidebar app shell with command-K search, notifications feed, apps grid, and theme menu
app-shell-12
Dashboard shell: collapsible icon-rail sidebar with nested nav, Soon badges, and project progress rings, plus a header command-K search, rich notifications feed, apps grid, and theme account menu. ReUI Badge, Rating; shadcn Sidebar, Popover, Dialog.
Community feed app shell with full-width header above a collapsible icon-rail sidebar
app-shell-13
Full-width header over a collapsible icon-rail sidebar for community feed apps. Search, Create button, avatar menu, theme toggle, grouped nav with badges, nested Manage Feeds dropdown. ReUI Badge, shadcn Sidebar, Button, Card, DropdownMenu, Avatar.
Mini icon-rail app shell with per-section secondary nav and a tabbed workspace toolbar
app-shell-14
Three-region workspace shell: icon rail, a toggleable secondary nav that swaps per section, and a toolbar with List, Kanban, Calendar, Dashboard tabs plus Sort, View, Filter, Search. ReUI Badge, shadcn Sidebar, Tabs, DropdownMenu, Avatar.
Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites
app-shell-15
Dashboard shell with a fixed dark topbar over an icon-collapsible sidebar: workspace switcher, pin/unpin nav with badges, favorites group, gradient Upgrade menu, team avatars. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar, Button, Card.
Dual sidebar app shell with icon rail and collapsible secondary navigation panel
app-shell-16
Two-level dashboard layout: icon rail plus a toggleable secondary nav that swaps per section, with workspace switcher, breadcrumb header, search, and account menu with theme toggle. ReUI Badge, shadcn Sidebar, DropdownMenu, Avatar.
AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer
app-shell-17
AI chat workspace: floating collapsible sidebar with a GPT-4/Claude/Gemini model picker, pinned and recent threads, a welcome canvas, and an InputGroup composer. shadcn Sidebar, DropdownMenu, Avatar, ReUI Badge. LLM assistant, chatbot, copilot UI.
Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel
app-shell-18
Three-panel to-do shell: floating Sidebar with task lists, count Badges, color tags and a Progress focus card, plus a toggleable AI chat panel (in-flow at desktop, Sheet on mobile). Built on ReUI Badge, shadcn Sidebar, Dialog, DropdownMenu.
Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week/Month view switcher
app-shell-19
Calendar app layout: inset Sidebar with a Calendar date picker, up-next agenda, calendars menu, account menu, and a header Day/Week/Month switcher. ReUI Badge, shadcn Sidebar, Calendar, DropdownMenu, Avatar. For scheduling apps and planners.
Floating icon-collapsible sidebar shell with command-K search, nested nav, and workspace switcher
app-shell-2
App shell with a floating collapsible-to-icon Sidebar, command-K search Dialog, nested Platform nav with a live status pulse, workspace switcher Dropdown, and Breadcrumb header. Uses Sidebar, Breadcrumb, Avatar, Dialog, Kbd. Dashboard, admin panel.
Mail client app shell with folder sidebar, split list and reading panes, and icon app rail
app-shell-20
Email workspace: inset Sidebar with account menu, compose dialog, folders, labels and contacts, a search and category-filter message list, a reading pane, and a right icon rail. shadcn Sidebar, Card, Empty, Dialog, ReUI Badge. Mail inbox, webmail UI.
Inset sidebar app shell with per-project progress rings and a multi-type notifications popover
app-shell-3
Inset collapsible sidebar dashboard shell with workspace switcher, command search, project donut progress rings, usage limit meter, and notifications popover. ReUI Frame, Badge, Rating plus shadcn Sidebar, Popover, DropdownMenu, Progress, Avatar.
Mail inbox app shell with icon folder rail, wide message list, and selected-message action header
app-shell-4
Mail and inbox shell: folder icon rail plus a wide 440px message list with live search, filter tabs, rich preview rows, and a selected-message action header (reply, star, delete). ReUI Badge, shadcn Sidebar, Tabs, Avatar, DropdownMenu.
Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels
app-shell-5
Calendar workspace with a dual-pane icon-rail Sidebar swapping mini-Calendar accounts, date-grouped Schedule, searchable Contacts, and Notifications. Uses ReUI Badge with shadcn Sidebar, Calendar, Avatar, DropdownMenu.
Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel
app-shell-6
Three-column workspace shell: dark collapsible nav rail with command search, team list and usage meter, breadcrumb header, and a slide-in right Calendar panel with agenda and account toggles. ReUI Frame, Badge, Rating plus shadcn Sidebar, Calendar.
Breadcrumb-switcher app shell with org/app/environment dropdowns and a live system monitor popover
app-shell-7
Header-first shell with a breadcrumb of org, app, and environment switcher dropdowns, a live system monitor popover with resource sparklines, command-palette search, and collapsible nested sidebar nav. ReUI Badge, Kbd, shadcn Sidebar, DropdownMenu.
Inset icon-rail app shell with per-section secondary nav, org/app/env switchers, and notifications
app-shell-8
Two-level dashboard shell: icon rail plus a per-section secondary nav with live-metric/storage footers, org/app/env switchers, command-K search, and notifications drawer. ReUI Badge, Rating; shadcn Sidebar, Sheet, Dialog. Inventory, ops admin.
Dark inset-sidebar team workspace shell with member presence rail and notifications feed
app-shell-9
Dark collapsible-sidebar team shell: presence member rail, notifications feed, command search, AI-credit usage card, workspace switcher. ReUI Frame, Badge; shadcn Sidebar, Avatar, DropdownMenu, Progress. For SaaS dashboards and team apps.
Split-screen login page with animated grid backdrop and editorial image panel
auth-1
Sign-in page pairing an email or username and password form with show/hide toggle and Google plus Apple buttons over a masked animated grid and a full-height photo. Uses ReUI Field, InputGroup, Separator, Button, Card. Login, auth, sign in screen.
Split magic-link sign-in with a framed testimonial and customer logo wall trust sidebar
auth-10
Split passwordless login: magic-link email field plus Google, Apple, and GitHub SSO, beside a Frame trust card with a star-rated testimonial and brand logo wall. ReUI Frame; shadcn Field, Input, Button, Avatar. Login, social auth, SaaS onboarding.
Split-screen login with testimonial sidebar and animated dot backdrop
auth-11
Two-column login: email or username plus password with show/hide toggle, Google and Apple buttons, and a sidebar with a star-rated testimonial and trust-brand wordmarks over a twinkling dot canvas. ReUI Field, InputGroup, Button, Separator, Avatar.
Split login method picker with passkey, SAML SSO, and a framed brand-logo testimonial sidebar
auth-12
Login with Google, email, WebAuthn passkey, SAML SSO, and backup code, a two-step email reveal, and a framed sidebar with an animated brand-logo grid and rotating star testimonials. ReUI Alert; shadcn Button, Field, Input, Avatar. Sign-in, SSO.
Split-screen magic-link sign-in with left image sidebar and social login buttons
auth-13
Magic-link login page: work email field sends a secure sign-in link, plus Google, Apple, and GitHub social buttons. Two-column split with a full-cover image sidebar. ReUI Frame, shadcn Field, Input, Button, Separator.
Split-screen workspace sign-in with animated stacked media panel and social SSO
auth-14
Two-column workspace login page: email and password with show/hide toggle, forgot-password, and Google, Apple, GitHub SSO buttons beside an auto-cycling stacked photo panel. Uses Field, Input, InputGroup, Button, Separator.
Centered magic-link email login with logo, social sign-in buttons, and legal footer
auth-15
Passwordless email login that sends a magic link, plus Google, Apple, and GitHub sign-in and a terms and copyright footer. Built with ReUI InputGroup, Field, Button, Separator. For login, SSO, passwordless auth screens.
Full-page sign-in with app header, SSO and email-continue form, and customer logo trust strip footer
auth-16
Single-column sign-in: app header with create-workspace link, centered Google, GitHub, and SSO buttons over one work-email Continue field, plus a footer customer logo wall. shadcn Button, Field, Input, Separator. Login, social auth, SaaS onboarding.
Centered login method picker with WebAuthn passkey sign-in and email reveal step
auth-17
Two-step sign-in: a centered method picker (Google, email, SAML SSO, passkey, backup code) that reveals an email field, with real WebAuthn passkey auth and toasts. Uses shadcn Button, Input, Field, Item and ReUI Alert. Login / auth page.
Split-screen sign-in with testimonial sidebar, social login, and password show/hide toggle
auth-18
Two-column login: email or username field, password Input with show/hide toggle, Google and Apple buttons, plus a testimonial and trust-brand sidebar. Uses ReUI Field, InputGroup, Avatar, Item, Separator, Button. For login and sign-in pages.
Passwordless workspace sign-in page with magic-link work email and Google plus GitHub login
auth-19
Full-page login screen that emails a secure sign-in link to an approved work address, with Google and GitHub OAuth buttons above an or divider. Built from ReUI Card, Field, InputGroup, Separator, Button. For SSO, magic link, passwordless signin.
Split-screen login with an autoplay founder testimonial carousel and Trustpilot rating panel
auth-2
Email or username and password sign-in with show/hide toggle and Google, Apple, GitHub buttons, beside a dark panel with an autoplay founder testimonial carousel and Trustpilot rating. ReUI Carousel, Card, Field, InputGroup. Login, social auth, SaaS.
Centered sign-in card with Google and Apple buttons, password visibility toggle, and email login
auth-20
Login page with social sign-in (Google, Apple), an email or username field, and a show or hide password toggle, plus forgot-password and create-account links. Built on ReUI Card, Field, Input, InputGroup, Button, and Separator.
Split-screen magic-link sign-in with testimonial and trust-brand sidebar on a dot-grid canvas
auth-3
Passwordless magic-link sign-in with a single work-email field and Google, Apple, GitHub buttons, beside a testimonial and trust-brand sidebar on a twinkling dot canvas. ReUI Field, Input, Button, Avatar, Separator. Login, passwordless auth.
Framed password sign-in card with email or username, social provider row, and footer nav
auth-4
Login on a noise-textured background: ReUI Frame card with email-or-username and password fields, show/hide toggle, full-width submit, plus a Google/Apple/GitHub row and footer nav. shadcn Field, Input, InputGroup, Button. Sign in / log in page.
Split-screen marketing trial signup page with animated gradient blob background and social login
auth-5
Full-page registration with a marketing hero, OAuth buttons (Google, GitHub), email and show/hide password fields, and a brand logo trust strip over drifting gradient blobs. ReUI Frame, shadcn Button, Field, InputGroup, Separator.
Split-screen login with social OAuth and testimonial sidebar over an animated grid background
auth-6
Two-column sign-in page: email or username, password with show/hide toggle, Forgot password, and Google/Apple/GitHub OAuth, beside a customer testimonial and brand-logo panel on an animated grid. Uses Button, Input, InputGroup, Field, Separator.
Blueprint-framed passwordless sign-in card with magic-link email and customer trust logos
auth-7
Centered dark magic-link sign-in: email field sends a sign-in link, with Google, Apple and GitHub OAuth, a dashed crosshair-cornered frame, and a customer logo trust strip. Uses Button, Field, InputGroup. For login and auth pages.
Centered Frame login card over a softened photo backdrop with social provider sign-in
auth-8
Single-card sign-in centered on a blurred Unsplash photo with noise grain: email or username and password fields, show/hide toggle, Forgot password, and Google, Apple, GitHub buttons. ReUI Frame; shadcn Field, InputGroup, Button. Login page.
Split magic-link sign-in with an animated brand-logo grid sidebar and rotating star testimonial
auth-9
Split passwordless login: a work-email field emails a 15-minute magic link, with Google, Apple, GitHub buttons, beside a sidebar of brand logos animating in a grid under a rotating star testimonial. ReUI Field, Input, Button, Avatar. Login, auth.
Blog index with cover-image post cards in a responsive three-column grid and author footers
blog-1
Blog listing on a responsive 1/2/3-column grid of Cards: 16:10 cover, date and read-time, clamped title and excerpt, author footer with Avatar and Read link. Built on Card, CardContent, Avatar. For blog index, article archive, news, or changelog.
Full-image blog post cards with titles overlaid on covers, hover zoom, and pill category badges
blog-2
Blog index of three full-bleed cover-image cards with a gradient scrim, title and tone label overlaid on the photo, a white pill category Badge, and hover zoom. ReUI Badge, shadcn Card. For articles index, news grid, insights, or journal pages.
Blog article carousel with cover cards, circular prev/next controls and a progress-line indicator
blog-3
Featured-article blog carousel with circular prev/next buttons and a 1px progress line as position indicator. Cover scales on hover; category badge and read time. ReUI Carousel, Progress, AspectRatio, Badge, Card. Article slider, featured posts.
Three-column blog index with stacked Frame cards, grayscale hover-zoom covers, and author footers
blog-4
Blog index listing posts as stacked ReUI Frame cards in a three-column row: grayscale cover that zooms on hover, category, date, title, excerpt, and an author footer with shadcn Avatar and Read link. For news, insights, and article listings.
Blog post detail page with gradient overlay image hero, byline, pull quote, and related posts list
blog-5
Reading page for one blog post, news, changelog, or case study. Cover with gradient scrim, overlaid title and category badge, byline, sections, pull quote, author bio, and text-only related posts. Uses ReUI Card, AspectRatio, Avatar, Badge, Item.
Single-column blog post detail page with breadcrumb, author byline, topic badges, Read Next grid
blog-6
Centered max-w-3xl blog post detail page: breadcrumb, headline, author byline, cover image, body sections, topic badges, and a two-up Read Next grid of related posts. Built on ReUI Breadcrumb, Card, Item, Avatar, Badge, Separator. For release notes.
A basic single-expand accordion
c-accordion-1
A basic single-expand accordion
Accordion with rotating arrow indicator
c-accordion-10
Accordion with rotating arrow indicator
Accordion component for onboarding or setup steps with icons, badges, and QR codes
c-accordion-11
Accordion component for onboarding or setup steps with icons, badges, and QR codes
Accordion with plus/minus indicators
c-accordion-2
Accordion with plus/minus indicators
Accordion with borders and rounded corners
c-accordion-3
Accordion with borders and rounded corners
Accordion embedded within a Card
c-accordion-4
Accordion embedded within a Card
Accordion with disabled items and highlighted state
c-accordion-5
Accordion with disabled items and highlighted state
Advanced accordion with custom icons and badges
c-accordion-6
Advanced accordion with custom icons and badges
Accordion items integrated within Frame and FramePanel
c-accordion-7
Accordion items integrated within Frame and FramePanel
Nested accordion example with bordered items
c-accordion-8
Nested accordion example with bordered items
User list accordion with avatars and role indicators
c-accordion-9
User list accordion with avatars and role indicators
Basic alert
c-alert-1
Basic alert
Alert with icon and action buttons
c-alert-10
Alert with icon and action buttons
Alert with description and action buttons
c-alert-11
Alert with description and action buttons
Alert integrated within a Frame with reset borders
c-alert-12
Alert integrated within a Frame with reset borders
Stacked alerts within a Frame
c-alert-13
Stacked alerts within a Frame
Alert with actions integrated within a Frame
c-alert-14
Alert with actions integrated within a Frame
Inverted alert variant
c-alert-15
Inverted alert variant
Urgent billing notice
c-alert-16
Urgent billing notice
Service status summary stacked within a frame
c-alert-17
Service status summary stacked within a frame
Feature discovery alert
c-alert-18
Feature discovery alert
User message notification alert
c-alert-19
User message notification alert
Alert with icon
c-alert-2
Alert with icon
User message notification alert
c-alert-20
User message notification alert
Alert with icon and action buttons
c-alert-3
Alert with icon and action buttons
Destructive alert with icon and action buttons
c-alert-4
Destructive alert with icon and action buttons
Info alert with icon and action buttons
c-alert-5
Info alert with icon and action buttons
Success alert
c-alert-6
Success alert
Warning alert
c-alert-7
Warning alert
Error alert
c-alert-8
Error alert
Invert alert
c-alert-9
Invert alert
Basic alert dialog with title, description, and action buttons
c-alert-dialog-1
Basic alert dialog with title, description, and action buttons
Confirmation for successful e-ticket registration
c-alert-dialog-10
Confirmation for successful e-ticket registration
System update notification requiring application restart
c-alert-dialog-11
System update notification requiring application restart
Billing warning for expired subscriptions or failed payments
c-alert-dialog-12
Billing warning for expired subscriptions or failed payments
Logout confirmation dialog
c-alert-dialog-13
Logout confirmation dialog
Advanced security audit confirmation
c-alert-dialog-14
Advanced security audit confirmation
Small size alert dialog for quick confirmations
c-alert-dialog-2
Small size alert dialog for quick confirmations
Alert dialog with icon
c-alert-dialog-3
Alert dialog with icon
Small size alert dialog with media (icon)
c-alert-dialog-4
Small size alert dialog with media (icon)
Destructive alert dialog for irreversible actions like deletion
c-alert-dialog-5
Destructive alert dialog for irreversible actions like deletion
Alert dialog nested within a standard Dialog component
c-alert-dialog-6
Alert dialog nested within a standard Dialog component
Task success confirmation
c-alert-dialog-7
Task success confirmation
Account deactivation confirmation
c-alert-dialog-8
Account deactivation confirmation
Warning for unsaved changes when navigating away
c-alert-dialog-9
Warning for unsaved changes when navigating away
16:9 widescreen aspect ratio
c-aspect-ratio-1
16:9 widescreen aspect ratio
4:3 standard aspect ratio
c-aspect-ratio-2
4:3 standard aspect ratio
1:1 square aspect ratio
c-aspect-ratio-3
1:1 square aspect ratio
21:9 ultrawide aspect ratio
c-aspect-ratio-4
21:9 ultrawide aspect ratio
9:16 portrait aspect ratio
c-aspect-ratio-5
9:16 portrait aspect ratio
3:2 classic photography aspect ratio
c-aspect-ratio-6
3:2 classic photography aspect ratio
4:5 social media portrait aspect ratio
c-aspect-ratio-7
4:5 social media portrait aspect ratio
16:10 computer monitor aspect ratio
c-aspect-ratio-8
16:10 computer monitor aspect ratio
Basic autocomplete control
c-autocomplete-1
Basic autocomplete control
Small autocomplete
c-autocomplete-10
Small autocomplete
Large autocomplete
c-autocomplete-11
Large autocomplete
Form integration
c-autocomplete-12
Form integration
Disabled state
c-autocomplete-2
Disabled state
Auto highlight option as you type
c-autocomplete-3
Auto highlight option as you type
Control with label
c-autocomplete-4
Control with label
With clear button
c-autocomplete-5
With clear button
With trigger button
c-autocomplete-6
With trigger button
With clear and trigger buttons
c-autocomplete-7
With clear and trigger buttons
With groups and labels
c-autocomplete-8
With groups and labels
With search results
c-autocomplete-9
With search results
Basic avatar
c-avatar-1
Basic avatar
Basic avatar group
c-avatar-10
Basic avatar group
Avatar group with numerical count
c-avatar-11
Avatar group with numerical count
Avatar group with an icon count
c-avatar-12
Avatar group with an icon count
Avatar with a distinct border ring
c-avatar-13
Avatar with a distinct border ring
Avatar with light background color fallback
c-avatar-14
Avatar with light background color fallback
Avatar with a solid background color fallback
c-avatar-15
Avatar with a solid background color fallback
Avatar with user details and badge
c-avatar-16
Avatar with user details and badge
Avatar with grayscale image filter
c-avatar-17
Avatar with grayscale image filter
Avatar group with online status on one
c-avatar-18
Avatar group with online status on one
Avatar inside small outline button
c-avatar-19
Avatar inside small outline button
Avatar with fallback
c-avatar-2
Avatar with fallback
Avatar social proof with text label
c-avatar-20
Avatar social proof with text label
Compact social proof with initials
c-avatar-21
Compact social proof with initials
Avatar group with hover tooltips and lift effect
c-avatar-22
Avatar group with hover tooltips and lift effect
Avatar group with hover effect
c-avatar-23
Avatar group with hover effect
Avatar group with hover effect and tooltips
c-avatar-24
Avatar group with hover effect and tooltips
Avatar group with numerical count
c-avatar-25
Avatar group with numerical count
Pilled small outline button with avatar
c-avatar-26
Pilled small outline button with avatar
Pilled small button with avatar
c-avatar-27
Pilled small button with avatar
Avatar inside an empty state example
c-avatar-28
Avatar inside an empty state example
Avatar group with icon count and button
c-avatar-29
Avatar group with icon count and button
Avatars with different sizes
c-avatar-3
Avatars with different sizes
Avatar with loading state demonstration
c-avatar-30
Avatar with loading state demonstration
Avatar with custom badge
c-avatar-31
Avatar with custom badge
Avatar with ring animation
c-avatar-32
Avatar with ring animation
Avatar with gradient animated ring
c-avatar-33
Avatar with gradient animated ring
Avatar with multiple badges
c-avatar-34
Avatar with multiple badges
Compact avatar dropdown menu
c-avatar-35
Compact avatar dropdown menu
Avatars with different border radiuses
c-avatar-4
Avatars with different border radiuses
Avatars with custom sizes
c-avatar-5
Avatars with custom sizes
Avatar with an online status badge
c-avatar-6
Avatar with an online status badge
Avatar with badge icon
c-avatar-7
Avatar with badge icon
Avatar with different badge positions
c-avatar-8
Avatar with different badge positions
Avatar with different badge positions
c-avatar-9
Avatar with different badge positions
Default badge
c-badge-1
Default badge
Info outline badge
c-badge-10
Info outline badge
Success outline badge
c-badge-11
Success outline badge
Warning outline badge
c-badge-12
Warning outline badge
Primary light badge
c-badge-13
Primary light badge
Destructive light badge
c-badge-14
Destructive light badge
Success light badge
c-badge-15
Success light badge
Info light badge
c-badge-16
Info light badge
Warning light badge
c-badge-17
Warning light badge
Badge size variations
c-badge-18
Badge size variations
Badge with full radius (radius="full")
c-badge-19
Badge with full radius (radius="full")
Secondary badge
c-badge-2
Secondary badge
Badge with an icon
c-badge-20
Badge with an icon
Badge with a dismiss button
c-badge-21
Badge with a dismiss button
Badge with a status dot
c-badge-22
Badge with a status dot
Badge rendered as a link
c-badge-23
Badge rendered as a link
Badge with avatar
c-badge-24
Badge with avatar
Badge with flag image
c-badge-25
Badge with flag image
Destructive badge
c-badge-3
Destructive badge
Success badge
c-badge-4
Success badge
Info badge
c-badge-5
Info badge
Warning badge
c-badge-6
Warning badge
Outline badge
c-badge-7
Outline badge
Primary outline badge
c-badge-8
Primary outline badge
Destructive outline badge
c-badge-9
Destructive outline badge
Basic breadcrumb
c-breadcrumb-1
Basic breadcrumb
Pill-style breadcrumb inside frame
c-breadcrumb-10
Pill-style breadcrumb inside frame
Breadcrumb items containing badge with count
c-breadcrumb-11
Breadcrumb items containing badge with count
Breadcrumb starting with home icon item
c-breadcrumb-12
Breadcrumb starting with home icon item
Breadcrumb with a custom separator
c-breadcrumb-13
Breadcrumb with a custom separator
Button-style breadcrumb
c-breadcrumb-14
Button-style breadcrumb
Breadcrumb with project, user and document info
c-breadcrumb-15
Breadcrumb with project, user and document info
Breadcrumb with dropdown menu
c-breadcrumb-2
Breadcrumb with dropdown menu
Breadcrumb with Next.js link
c-breadcrumb-3
Breadcrumb with Next.js link
Breadcrumb with a custom slash separator
c-breadcrumb-4
Breadcrumb with a custom slash separator
Breadcrumb with icons for each item
c-breadcrumb-5
Breadcrumb with icons for each item
Breadcrumb with ellipsis for long paths
c-breadcrumb-6
Breadcrumb with ellipsis for long paths
Breadcrumb items with avatars
c-breadcrumb-7
Breadcrumb items with avatars
Breadcrumb with double chevron separators
c-breadcrumb-8
Breadcrumb with double chevron separators
Breadcrumb inside card
c-breadcrumb-9
Breadcrumb inside card
Default button
c-button-1
Default button
Disabled button
c-button-10
Disabled button
Icon button
c-button-11
Icon button
Button with an icon on the right
c-button-12
Button with an icon on the right
Button in a loading state
c-button-13
Button in a loading state
Button with an icon on the left
c-button-14
Button with an icon on the left
Button with an invalid state highlight
c-button-15
Button with an invalid state highlight
Secondary button with an icon on the left
c-button-16
Secondary button with an icon on the left
Secondary button with an icon on the right
c-button-17
Secondary button with an icon on the right
Outline button with an icon on the left
c-button-18
Outline button with an icon on the left
Outline button with an icon on the right
c-button-19
Outline button with an icon on the right
Secondary button
c-button-2
Secondary button
Ghost button with an icon on the left
c-button-20
Ghost button with an icon on the left
Ghost button with an icon on the right
c-button-21
Ghost button with an icon on the right
Destructive button with an icon on the left
c-button-22
Destructive button with an icon on the left
Destructive button with an icon on the right
c-button-23
Destructive button with an icon on the right
Extra small icon button
c-button-24
Extra small icon button
Small icon button
c-button-25
Small icon button
Large (lg) icon-only button
c-button-26
Large (lg) icon-only button
Button rendered as a Next.js Link
c-button-27
Button rendered as a Next.js Link
Link button with an icon on the left
c-button-28
Link button with an icon on the left
Link button with an icon on the right
c-button-29
Link button with an icon on the right
Outline button
c-button-3
Outline button
Large button with an icon on the left
c-button-30
Large button with an icon on the left
Large button with an icon on the right
c-button-31
Large button with an icon on the right
Outline button with an invalid state
c-button-32
Outline button with an invalid state
Ghost button with an invalid state
c-button-33
Ghost button with an invalid state
Button with an icon on the left
c-button-34
Button with an icon on the left
Ghost button with more/less toggle
c-button-35
Ghost button with more/less toggle
Social login buttons with Remix Icons
c-button-36
Social login buttons with Remix Icons
Outline like button with count
c-button-37
Outline like button with count
Star button with count
c-button-38
Star button with count
Button with an unread badge
c-button-39
Button with an unread badge
Ghost button
c-button-4
Ghost button
Button with icon, label, and shortcut keys
c-button-40
Button with icon, label, and shortcut keys
Copy button with feedback
c-button-41
Copy button with feedback
Icon-only copy button with feedback
c-button-42
Icon-only copy button with feedback
Animated hamburger / close toggle button
c-button-43
Animated hamburger / close toggle button
Async action button with loading and success states
c-button-44
Async action button with loading and success states
Outline button with inline count badge
c-button-45
Outline button with inline count badge
Button with status dot badge
c-button-46
Button with status dot badge
Ghost button with a status badge
c-button-47
Ghost button with a status badge
Icon button with notification badge
c-button-48
Icon button with notification badge
Go back link button
c-button-49
Go back link button
Destructive button
c-button-5
Destructive button
Go back link button with animation
c-button-50
Go back link button with animation
Expanding button from icon to label
c-button-51
Expanding button from icon to label
Multi-line button with icon, title & description
c-button-52
Multi-line button with icon, title & description
Sliding Icon Button (Hover reveal)
c-button-53
Sliding Icon Button (Hover reveal)
Shortcut Tooltip Button (Kbd hints)
c-button-54
Shortcut Tooltip Button (Kbd hints)
Button with avatar
c-button-55
Button with avatar
Outline button with avatar
c-button-56
Outline button with avatar
Small button with avatar
c-button-57
Small button with avatar
Small outline button with avatar
c-button-58
Small outline button with avatar
Social login buttons with Remix icons
c-button-59
Social login buttons with Remix icons
Link button variant
c-button-6
Link button variant
Social icon-only buttons with Remix icons
c-button-60
Social icon-only buttons with Remix icons
Theme toggle button with animated moon and sun icons
c-button-61
Theme toggle button with animated moon and sun icons
Extra small button
c-button-7
Extra small button
Small button
c-button-8
Small button
Large button
c-button-9
Large button
Basic button group with two buttons
c-button-group-1
Basic button group with two buttons
Button group used for standard pagination
c-button-group-10
Button group used for standard pagination
Pagination split into page numbers and navigation arrows
c-button-group-11
Pagination split into page numbers and navigation arrows
Button group for editor text alignment controls
c-button-group-12
Button group for editor text alignment controls
Vertical button group orientation
c-button-group-13
Vertical button group orientation
Nested vertical button group for complex tool palettes
c-button-group-14
Nested vertical button group for complex tool palettes
Star button group with count and dropdown
c-button-group-15
Star button group with count and dropdown
Search input with filter menu and clear button
c-button-group-16
Search input with filter menu and clear button
Button group with comprehensive action menu
c-button-group-17
Button group with comprehensive action menu
Advanced git toolbar with branch selection and split commit button
c-button-group-18
Advanced git toolbar with branch selection and split commit button
Button group with dropdown menu and input group
c-button-group-19
Button group with dropdown menu and input group
Button group with button followed by input
c-button-group-2
Button group with button followed by input
Button group with input group and button
c-button-group-20
Button group with input group and button
Button group with dropdown menu and input group
c-button-group-21
Button group with dropdown menu and input group
Basic button group with disabled button
c-button-group-22
Basic button group with disabled button
Button group buttons with separators
c-button-group-23
Button group buttons with separators
View switcher for dashboard layouts
c-button-group-24
View switcher for dashboard layouts
Rating scale using numerical buttons
c-button-group-25
Rating scale using numerical buttons
Button group with user selection select
c-button-group-26
Button group with user selection select
Button group with select status addon
c-button-group-27
Button group with select status addon
Volume controller with plus/minus actions
c-button-group-28
Volume controller with plus/minus actions
Button group with follower count
c-button-group-29
Button group with follower count
Button group with buttons and badge
c-button-group-3
Button group with buttons and badge
Active state button group with count
c-button-group-30
Active state button group with count
Horizontal button group with primary and secondary labels
c-button-group-31
Horizontal button group with primary and secondary labels
Button group with dropdown menu and view toggle
c-button-group-32
Button group with dropdown menu and view toggle
Button group with select controls
c-button-group-33
Button group with select controls
Segmented control with dropdown inside button group
c-button-group-34
Segmented control with dropdown inside button group
Pagination button group
c-button-group-35
Pagination button group
View switcher button group
c-button-group-36
View switcher button group
Zoom controls button group
c-button-group-37
Zoom controls button group
Media player controls button group
c-button-group-38
Media player controls button group
Split button with dropdown trigger
c-button-group-39
Split button with dropdown trigger
Button group with dropdown menu
c-button-group-4
Button group with dropdown menu
Vertical button group
c-button-group-40
Vertical button group
Model selector with tier badges
c-button-group-41
Model selector with tier badges
Segmented order type selector
c-button-group-42
Segmented order type selector
Buy sell hold toggle group
c-button-group-43
Buy sell hold toggle group
Pipeline stage mover with dropdown
c-button-group-44
Pipeline stage mover with dropdown
Environment switcher with indicator
c-button-group-45
Environment switcher with indicator
Compact time interval selector
c-button-group-46
Compact time interval selector
Review actions split button
c-button-group-47
Review actions split button
Toolbar filter with export and view toggle
c-button-group-48
Toolbar filter with export and view toggle
Vertical nav links with icons
c-button-group-49
Vertical nav links with icons
Team activity and collaboration group
c-button-group-5
Team activity and collaboration group
Toolbar filter sort and more
c-button-group-50
Toolbar filter sort and more
New button with create dropdown
c-button-group-51
New button with create dropdown
Refresh share and export dropdown
c-button-group-52
Refresh share and export dropdown
Publish controls with split button and overflow
c-button-group-53
Publish controls with split button and overflow
API service environment and version selectors
c-button-group-54
API service environment and version selectors
Payout release controls with amount context
c-button-group-55
Payout release controls with amount context
Attachment button group with download action
c-button-group-56
Attachment button group with download action
Agent mode selector with credit cap dropdown
c-button-group-57
Agent mode selector with credit cap dropdown
Button group using icons for visual actions
c-button-group-6
Button group using icons for visual actions
Dropdown menu with status indicator
c-button-group-7
Dropdown menu with status indicator
Button group styled as a like button with a counter
c-button-group-8
Button group styled as a like button with a counter
Nested button groups for complex action sets
c-button-group-9
Nested button groups for complex action sets
Basic calendar
c-calendar-1
Basic calendar
Display week numbers
c-calendar-10
Display week numbers
Current month button
c-calendar-11
Current month button
Today button
c-calendar-12
Today button
Custom navigation with year view
c-calendar-13
Custom navigation with year view
Preset time selection
c-calendar-14
Preset time selection
Calendar with presets
c-calendar-15
Calendar with presets
Range calendar with presets
c-calendar-16
Range calendar with presets
Calendar with pricing
c-calendar-17
Calendar with pricing
Calendar with presets
c-calendar-18
Calendar with presets
Appointment calendar
c-calendar-19
Appointment calendar
Range calendar
c-calendar-2
Range calendar
Display 2 months
c-calendar-20
Display 2 months
Display 2 months with range picker
c-calendar-21
Display 2 months with range picker
Calendar with event list
c-calendar-22
Calendar with event list
Localize calendar
c-calendar-23
Localize calendar
Calendar with date picker
c-calendar-24
Calendar with date picker
Calendar with date range picker
c-calendar-25
Calendar with date range picker
Calendar with date picker and year view
c-calendar-26
Calendar with date picker and year view
Calendar with date and appointment picker
c-calendar-27
Calendar with date and appointment picker
Calendar with date picker and presets
c-calendar-28
Calendar with date picker and presets
Range calendar with date picker and presets
c-calendar-29
Range calendar with date picker and presets
Disabled dates
c-calendar-3
Disabled dates
Calendar with date and time range picker
c-calendar-30
Calendar with date and time range picker
Multiple day selection
c-calendar-4
Multiple day selection
Custom select day style
c-calendar-5
Custom select day style
Custom select range style
c-calendar-6
Custom select range style
Right navigation
c-calendar-7
Right navigation
Month and year selection
c-calendar-8
Month and year selection
Year select with navigation
c-calendar-9
Year select with navigation
Basic card
c-card-1
Basic card
Full card with image and shadow fade effect
c-card-10
Full card with image and shadow fade effect
Card with stacked depth effect
c-card-11
Card with stacked depth effect
Advanced clean login form card
c-card-12
Advanced clean login form card
Expandable billing usage card
c-card-13
Expandable billing usage card
Deployment status summary card
c-card-14
Deployment status summary card
Stat card with trend and overflow menu
c-card-15
Stat card with trend and overflow menu
Card with header badge and actions
c-card-16
Card with header badge and actions
Card with icon, title and link
c-card-17
Card with icon, title and link
Card with header label and link
c-card-18
Card with header label and link
Card header with border
c-card-2
Card header with border
Card with border separation
c-card-3
Card with border separation
Card with header and footer
c-card-4
Card with header and footer
Card with link
c-card-5
Card with link
Card with dropdown menu
c-card-6
Card with dropdown menu
Card with image
c-card-7
Card with image
Card with image scale hover effect
c-card-8
Card with image scale hover effect
Card with full image
c-card-9
Card with full image
Basic carousel with single item
c-carousel-1
Basic carousel with single item
Carousel with overlay thumbnail navigation
c-carousel-10
Carousel with overlay thumbnail navigation
Carousel with dots navigation and content overlays
c-carousel-11
Carousel with dots navigation and content overlays
Vertical carousel orientation
c-carousel-2
Vertical carousel orientation
Carousel with multiple items visible
c-carousel-3
Carousel with multiple items visible
Carousel with responsive basis
c-carousel-4
Carousel with responsive basis
Carousel with autoplay plugin
c-carousel-5
Carousel with autoplay plugin
Carousel with centered slide alignment
c-carousel-6
Carousel with centered slide alignment
Carousel with custom spacing
c-carousel-7
Carousel with custom spacing
Carousel with images and overlays
c-carousel-8
Carousel with images and overlays
Carousel with thumbnail navigation
c-carousel-9
Carousel with thumbnail navigation
Basic bar chart
c-chart-1
Basic bar chart
Duotone gradient bar chart
c-chart-10
Duotone gradient bar chart
Animated monochrome bar chart
c-chart-11
Animated monochrome bar chart
Vertical bar chart
c-chart-12
Vertical bar chart
Gradient area chart with stripe overlay
c-chart-13
Gradient area chart with stripe overlay
Stacked area chart with dashed strokes
c-chart-14
Stacked area chart with dashed strokes
Step area chart with dotted pattern fill
c-chart-15
Step area chart with dotted pattern fill
Area chart with glowing dot markers
c-chart-16
Area chart with glowing dot markers
Forecast line chart with stripe pattern zone
c-chart-17
Forecast line chart with stripe pattern zone
Stacked area chart with crosshatch pattern fill
c-chart-18
Stacked area chart with crosshatch pattern fill
Donut chart with center total
c-chart-19
Donut chart with center total
Multi-dataset bar chart
c-chart-2
Multi-dataset bar chart
Donut chart with center stats
c-chart-20
Donut chart with center stats
Bug priority pie with stripe patterns
c-chart-21
Bug priority pie with stripe patterns
Active segment donut with center label
c-chart-22
Active segment donut with center label
Radar chart with gradient fill
c-chart-23
Radar chart with gradient fill
Filled radar with glowing stroke
c-chart-24
Filled radar with glowing stroke
Lighthouse scores radial with labels
c-chart-25
Lighthouse scores radial with labels
Diagonal stripe bar chart
c-chart-3
Diagonal stripe bar chart
Dotted pattern bar chart
c-chart-4
Dotted pattern bar chart
Striped and solid bar chart
c-chart-5
Striped and solid bar chart
3D gradient bar chart
c-chart-6
3D gradient bar chart
Gradient bar chart
c-chart-7
Gradient bar chart
3D isometric bar chart
c-chart-8
3D isometric bar chart
Dotted and solid bar chart
c-chart-9
Dotted and solid bar chart
Basic checkbox with label
c-checkbox-1
Basic checkbox with label
Checkbox group in a frame
c-checkbox-10
Checkbox group in a frame
Card checkbox group with icons
c-checkbox-11
Card checkbox group with icons
Card checkbox group with icons
c-checkbox-12
Card checkbox group with icons
Custom positioned checkbox
c-checkbox-13
Custom positioned checkbox
Custom positioned checkbox
c-checkbox-14
Custom positioned checkbox
Avatar based card checkbox
c-checkbox-15
Avatar based card checkbox
Nested checkbox group
c-checkbox-16
Nested checkbox group
Payment method card checkbox
c-checkbox-17
Payment method card checkbox
Checkbox with label and tooltip info
c-checkbox-18
Checkbox with label and tooltip info
Checkbox group with badge
c-checkbox-19
Checkbox group with badge
Disabled checkbox
c-checkbox-2
Disabled checkbox
Checkbox with label and tooltip info
c-checkbox-20
Checkbox with label and tooltip info
Inline horizontal checkbox group
c-checkbox-21
Inline horizontal checkbox group
Checkbox with feature badge
c-checkbox-22
Checkbox with feature badge
Invalid checkbox
c-checkbox-3
Invalid checkbox
Indeterminate checkbox
c-checkbox-4
Indeterminate checkbox
Checkbox with label and description
c-checkbox-5
Checkbox with label and description
Colored checkbox
c-checkbox-6
Colored checkbox
Circle checkbox
c-checkbox-7
Circle checkbox
Checkbox group
c-checkbox-8
Checkbox group
Card checkbox with group
c-checkbox-9
Card checkbox with group
Basic collapsible
c-collapsible-1
Basic collapsible
Tree view with file actions
c-collapsible-10
Tree view with file actions
Collapsible with checkbox settings
c-collapsible-2
Collapsible with checkbox settings
Collapsible animated card
c-collapsible-3
Collapsible animated card
Collapsible card with bottom trigger
c-collapsible-4
Collapsible card with bottom trigger
Collapsible form fields
c-collapsible-5
Collapsible form fields
Collapsible frame
c-collapsible-6
Collapsible frame
Nested collapsible list with actions
c-collapsible-7
Nested collapsible list with actions
Collapsible User profile
c-collapsible-8
Collapsible User profile
Multi-level collapsible menu
c-collapsible-9
Multi-level collapsible menu
A basic combobox with a list of options
c-combobox-1
A basic combobox with a list of options
A combobox rendered inside a popup
c-combobox-10
A combobox rendered inside a popup
A combobox used within a form
c-combobox-11
A combobox used within a form
A multi-select combobox
c-combobox-12
A multi-select combobox
A disabled multi-select combobox
c-combobox-13
A disabled multi-select combobox
A multi-select combobox in an invalid state
c-combobox-14
A multi-select combobox in an invalid state
A multi-select with chips that cannot be removed
c-combobox-15
A multi-select with chips that cannot be removed
A combobox with custom item rendering
c-combobox-16
A combobox with custom item rendering
A combobox used within a dialog
c-combobox-17
A combobox used within a dialog
A combobox with a custom trigger icon
c-combobox-18
A combobox with a custom trigger icon
A multi-select combobox with user tags
c-combobox-19
A multi-select combobox with user tags
A disabled combobox
c-combobox-2
A disabled combobox
Invisible combobox with member tags
c-combobox-20
Invisible combobox with member tags
A status change combobox
c-combobox-21
A status change combobox
A priority change combobox
c-combobox-22
A priority change combobox
A lead selection combobox
c-combobox-23
A lead selection combobox
A multi-member selection combobox
c-combobox-24
A multi-member selection combobox
A date selection combobox with an optional custom picker dialog
c-combobox-25
A date selection combobox with an optional custom picker dialog
A multi-label selection combobox with a no-label mode
c-combobox-26
A multi-label selection combobox with a no-label mode
A team selection combobox
c-combobox-27
A team selection combobox
An assignee selection combobox
c-combobox-28
An assignee selection combobox
A combobox in an invalid state
c-combobox-3
A combobox in an invalid state
A combobox with a clear button
c-combobox-4
A combobox with a clear button
A combobox with auto-highlight enabled
c-combobox-5
A combobox with auto-highlight enabled
A combobox with grouped options
c-combobox-6
A combobox with grouped options
A combobox with grouped options and separators
c-combobox-7
A combobox with grouped options and separators
A combobox with a large list of options
c-combobox-8
A combobox with a large list of options
A combobox with an icon addon
c-combobox-9
A combobox with an icon addon
Basic command
c-command-1
Basic command
Command with shortcuts
c-command-2
Command with shortcuts
Command with groups
c-command-3
Command with groups
Command with many groups
c-command-4
Command with many groups
File search command palette
c-command-5
File search command palette
User search command with avatars
c-command-6
User search command with avatars
Action palette with keyboard shortcuts
c-command-7
Action palette with keyboard shortcuts
Command with recent and favorites sections
c-command-8
Command with recent and favorites sections
Basic context menu.
c-context-menu-1
Basic context menu.
Context menu used inside a dialog component.
c-context-menu-10
Context menu used inside a dialog component.
Context menu with icons for common actions.
c-context-menu-2
Context menu with icons for common actions.
Context menu with keyboard shortcuts.
c-context-menu-3
Context menu with keyboard shortcuts.
Context menu with nested submenus.
c-context-menu-4
Context menu with nested submenus.
Context menu labels and separators.
c-context-menu-5
Context menu labels and separators.
Context menu with checkbox items.
c-context-menu-6
Context menu with checkbox items.
Context menu with radio items.
c-context-menu-7
Context menu with radio items.
Context menu with destructive actions.
c-context-menu-8
Context menu with destructive actions.
Context menu with different alignment sides.
c-context-menu-9
Context menu with different alignment sides.
Data grid with pagination
c-data-grid-1
Data grid with pagination
Data grid with column icons
c-data-grid-10
Data grid with column icons
Data grid with sortable columns
c-data-grid-11
Data grid with sortable columns
Data grid with movable columns
c-data-grid-12
Data grid with movable columns
Data grid with draggable columns
c-data-grid-13
Data grid with draggable columns
Data grid with draggable rows
c-data-grid-14
Data grid with draggable rows
Data grid with column resizing
c-data-grid-15
Data grid with column resizing
Data grid with pinnable columns
c-data-grid-16
Data grid with pinnable columns
Data grid with sticky header
c-data-grid-17
Data grid with sticky header
Data grid with column controls
c-data-grid-18
Data grid with column controls
Data grid with card container
c-data-grid-19
Data grid with card container
Data grid with cell border
c-data-grid-2
Data grid with cell border
Data grid with column visibility controls
c-data-grid-20
Data grid with column visibility controls
Data grid with loading skeleton
c-data-grid-21
Data grid with loading skeleton
Data grid with CRUD features
c-data-grid-22
Data grid with CRUD features
Data grid with CRUD in frame container
c-data-grid-23
Data grid with CRUD in frame container
Data grid with column totals footer
c-data-grid-24
Data grid with column totals footer
Data grid with summary stats footer
c-data-grid-25
Data grid with summary stats footer
Data grid with per-column aggregate footer
c-data-grid-26
Data grid with per-column aggregate footer
Data grid with local infinite scroll
c-data-grid-27
Data grid with local infinite scroll
Data grid with remote infinite scroll
c-data-grid-28
Data grid with remote infinite scroll
Data grid with row pinning support
c-data-grid-29
Data grid with row pinning support
Data grid with dense layout
c-data-grid-3
Data grid with dense layout
Data grid without table borders
c-data-grid-4
Data grid without table borders
Data grid with striped rows
c-data-grid-5
Data grid with striped rows
Data grid with auto width table layout
c-data-grid-6
Data grid with auto width table layout
Data grid with row selection
c-data-grid-7
Data grid with row selection
Data grid with expandable rows
c-data-grid-8
Data grid with expandable rows
Data grid with sub table
c-data-grid-9
Data grid with sub table
Basic date selector
c-date-selector-1
Basic date selector
Date selector with popover
c-date-selector-2
Date selector with popover
Date selector with dialog
c-date-selector-3
Date selector with dialog
Date selector with dropdown menu
c-date-selector-4
Date selector with dropdown menu
Basic dialog
c-dialog-1
Basic dialog
Dialog with full width button
c-dialog-10
Dialog with full width button
Dialog with scrollable content
c-dialog-2
Dialog with scrollable content
Dialog with scrollable content and sticky footer.
c-dialog-3
Dialog with scrollable content and sticky footer.
Dialog without a close button.
c-dialog-4
Dialog without a close button.
Dialog with custom close button
c-dialog-5
Dialog with custom close button
Full-screen fluid dialog with sticky header and footer
c-dialog-6
Full-screen fluid dialog with sticky header and footer
Confirmation dialog with destructive action
c-dialog-7
Confirmation dialog with destructive action
Cookie consent dialog
c-dialog-8
Cookie consent dialog
Dialog with keyboard shortcuts list
c-dialog-9
Dialog with keyboard shortcuts list
A basic drawer with scrollable content
c-drawer-1
A basic drawer with scrollable content
A drawer that opens from the right side
c-drawer-2
A drawer that opens from the right side
A drawer that opens from the left side
c-drawer-3
A drawer that opens from the left side
A drawer that opens from the top side
c-drawer-4
A drawer that opens from the top side
Drawers opening from different sides
c-drawer-5
Drawers opening from different sides
Basic dropdown menu
c-dropdown-menu-1
Basic dropdown menu
Workspace switcher dropdown menu
c-dropdown-menu-10
Workspace switcher dropdown menu
Notifications dropdown menu
c-dropdown-menu-11
Notifications dropdown menu
Actions dropdown menu
c-dropdown-menu-12
Actions dropdown menu
Share and export dropdown menu
c-dropdown-menu-13
Share and export dropdown menu
User profile dropdown menu with theme toggle and status selector
c-dropdown-menu-14
User profile dropdown menu with theme toggle and status selector
User and create menu
c-dropdown-menu-15
User and create menu
Quick action menu
c-dropdown-menu-16
Quick action menu
Notifications dropdown with items
c-dropdown-menu-17
Notifications dropdown with items
AI model selector with provider icons
c-dropdown-menu-18
AI model selector with provider icons
Dropdown menus opening positions
c-dropdown-menu-2
Dropdown menus opening positions
Dropdown menu with icons
c-dropdown-menu-3
Dropdown menu with icons
Dropdown menu with keyboard shortcuts
c-dropdown-menu-4
Dropdown menu with keyboard shortcuts
Dropdown menu with nested submenus
c-dropdown-menu-5
Dropdown menu with nested submenus
Dropdown menu with checkboxes
c-dropdown-menu-6
Dropdown menu with checkboxes
Dropdown menu with radio groups
c-dropdown-menu-7
Dropdown menu with radio groups
Advance dropdown menu
c-dropdown-menu-8
Advance dropdown menu
User profile dropdown menu
c-dropdown-menu-9
User profile dropdown menu
Basic empty state
c-empty-1
Basic empty state
No data analytics empty state
c-empty-10
No data analytics empty state
Bookmarks empty state
c-empty-11
Bookmarks empty state
Tasks empty state
c-empty-12
Tasks empty state
No automations empty state with toggle illustration
c-empty-13
No automations empty state with toggle illustration
Comments empty state with isometric board illustration
c-empty-14
Comments empty state with isometric board illustration
No products empty state with stacked cards and blur effect
c-empty-15
No products empty state with stacked cards and blur effect
Search empty state with stacked file cards illustration
c-empty-16
Search empty state with stacked file cards illustration
No messages empty state with chat bubbles illustration
c-empty-17
No messages empty state with chat bubbles illustration
No payments empty state with credit card illustration
c-empty-18
No payments empty state with credit card illustration
No integrations empty state with connected nodes illustration
c-empty-19
No integrations empty state with connected nodes illustration
Search empty state
c-empty-2
Search empty state
No events empty state with calendar illustration
c-empty-20
No events empty state with calendar illustration
Empty state with search input
c-empty-3
Empty state with search input
Empty state with add button
c-empty-4
Empty state with add button
Document empty state
c-empty-5
Document empty state
Dashed upload empty state
c-empty-6
Dashed upload empty state
Inbox empty state
c-empty-7
Inbox empty state
Team members empty state
c-empty-8
Team members empty state
No notifications empty state
c-empty-9
No notifications empty state
Fields with input groups
c-field-1
Fields with input groups
Notification preferences form
c-field-10
Notification preferences form
Form with validation errors
c-field-11
Form with validation errors
Field with input and textarea
c-field-2
Field with input and textarea
Field with select control
c-field-3
Field with select control
Field with radio groups and checkboxes
c-field-4
Field with radio groups and checkboxes
Filed with slider and switch
c-field-5
Filed with slider and switch
Field with OTP input
c-field-6
Field with OTP input
Settings form with validation
c-field-7
Settings form with validation
Permission settings with checkboxes
c-field-8
Permission settings with checkboxes
Responsive field layout
c-field-9
Responsive field layout
Basic file upload
c-file-upload-1
Basic file upload
Cover image upload.
c-file-upload-10
Cover image upload.
Avatar upload
c-file-upload-2
Avatar upload
Basic drag and drop file upload
c-file-upload-3
Basic drag and drop file upload
Gallery file upload
c-file-upload-4
Gallery file upload
Progress file upload
c-file-upload-5
Progress file upload
Table file upload
c-file-upload-6
Table file upload
Image upload
c-file-upload-7
Image upload
Image upload with sorting.
c-file-upload-8
Image upload with sorting.
Card file upload.
c-file-upload-9
Card file upload.
Filters with various field types
c-filters-1
Filters with various field types
Filters with input validation
c-filters-2
Filters with input validation
Filters with custom trigger button
c-filters-3
Filters with custom trigger button
Filters with small size controls
c-filters-4
Filters with small size controls
Filters with large size controls
c-filters-5
Filters with large size controls
Filters with custom controls
c-filters-6
Filters with custom controls
Filters with data grid
c-filters-7
Filters with data grid
Filters with data grid and async mode
c-filters-8
Filters with data grid and async mode
Filters with i18n support
c-filters-9
Filters with i18n support
Basic frame
c-frame-1
Basic frame
Frame with small spacing
c-frame-10
Frame with small spacing
Frame with default spacing
c-frame-11
Frame with default spacing
Frame with large spacing
c-frame-12
Frame with large spacing
Frame with small border radius
c-frame-13
Frame with small border radius
Frame with medium border radius
c-frame-14
Frame with medium border radius
Frame with large border radius
c-frame-15
Frame with large border radius
Frame with default border radius
c-frame-16
Frame with default border radius
Frame with extra large border radius
c-frame-17
Frame with extra large border radius
Frame with content-only panels
c-frame-18
Frame with content-only panels
Frame with stacked content-only panels
c-frame-19
Frame with stacked content-only panels
Frame with separated panels
c-frame-2
Frame with separated panels
Frame with stacked panels
c-frame-3
Frame with stacked panels
Frame with stacked panels and dense style
c-frame-4
Frame with stacked panels and dense style
Frame with collapsible panels
c-frame-5
Frame with collapsible panels
Frame with ghost variant
c-frame-6
Frame with ghost variant
Frame with dense layout
c-frame-7
Frame with dense layout
Frame with stacked panels
c-frame-8
Frame with stacked panels
Frame with extra small spacing
c-frame-9
Frame with extra small spacing
Basic hover card.
c-hover-card-1
Basic hover card.
Hover card with positions.
c-hover-card-2
Hover card with positions.
Hover card with profile information.
c-hover-card-3
Hover card with profile information.
Hover card with icon
c-hover-card-4
Hover card with icon
Hover card with an image and text content.
c-hover-card-5
Hover card with an image and text content.
Hover card inside a dialog.
c-hover-card-6
Hover card inside a dialog.
Timestamp hover card with active relative time
c-hover-card-7
Timestamp hover card with active relative time
Hover card with paginated release notes
c-hover-card-8
Hover card with paginated release notes
Isometric icon stack
c-icon-stack-1
Layered isometric icon
Icon stack sizes
c-icon-stack-2
Responsive icon stack sizes
Icon stack colors
c-icon-stack-3
Semantic icon stack colors
Icon badge stack
c-icon-stack-4
Icon stack with badge overlay
Empty state illustration
c-icon-stack-5
Shadcn empty state illustration
Item media stack
c-icon-stack-6
Icon stack in shadcn item
Basic input
c-input-1
Basic input
Input with number type
c-input-10
Input with number type
Input with date type
c-input-11
Input with date type
Input with file type
c-input-12
Input with file type
Input with required indicator
c-input-13
Input with required indicator
Input with time type
c-input-14
Input with time type
Complex input form with multiple fields
c-input-15
Complex input form with multiple fields
Input label with tooltip
c-input-16
Input label with tooltip
Input label with badge
c-input-17
Input label with badge
Input label with optional badge
c-input-18
Input label with optional badge
Input label with link and visibility toggle
c-input-19
Input label with link and visibility toggle
Input with label
c-input-2
Input with label
Input with horizontal orientation
c-input-20
Input with horizontal orientation
Input with multiple error messages
c-input-21
Input with multiple error messages
Basic password strength with dynamic hint and icons
c-input-22
Basic password strength with dynamic hint and icons
Advanced password strength indicator with progress
c-input-23
Advanced password strength indicator with progress
Input with pulsed background animation
c-input-24
Input with pulsed background animation
Input with custom focus ring
c-input-25
Input with custom focus ring
Input with subtle background
c-input-26
Input with subtle background
Input with bottom border only
c-input-27
Input with bottom border only
Color input
c-input-28
Color input
Range input with value indicator
c-input-29
Range input with value indicator
Input with description
c-input-3
Input with description
Pill-shaped input
c-input-30
Pill-shaped input
Minimal input without borders or background
c-input-31
Minimal input without borders or background
Disabled input
c-input-4
Disabled input
Input with error message
c-input-5
Input with error message
Input with character counter
c-input-6
Input with character counter
Input with password type
c-input-7
Input with password type
Input with phone type
c-input-8
Input with phone type
Input with URL type
c-input-9
Input with URL type
Basic input group
c-input-group-1
Basic input group
Input group with action button addon
c-input-group-10
Input group with action button addon
Input group with icon button action
c-input-group-11
Input group with icon button action
Input group with dropdown menu selection
c-input-group-12
Input group with dropdown menu selection
Input group with keyboard shortcut (Kbd)
c-input-group-13
Input group with keyboard shortcut (Kbd)
Input group with tooltip action
c-input-group-14
Input group with tooltip action
Input group with loading spinner
c-input-group-15
Input group with loading spinner
Input group with block-start addon
c-input-group-16
Input group with block-start addon
Textarea input group with dynamic character limit
c-input-group-17
Textarea input group with dynamic character limit
AI Chat textarea with rich toolbar actions
c-input-group-18
AI Chat textarea with rich toolbar actions
AI Chat interface with file and context attachments
c-input-group-19
AI Chat interface with file and context attachments
Input group in disabled state
c-input-group-2
Input group in disabled state
Input group demonstrating label usage
c-input-group-20
Input group demonstrating label usage
Input group with multiple icons/buttons at the end
c-input-group-21
Input group with multiple icons/buttons at the end
Input group with popover trigger addon
c-input-group-22
Input group with popover trigger addon
Input group with Sparkles icon and complex Kbd shortcut
c-input-group-23
Input group with Sparkles icon and complex Kbd shortcut
Input group with success indicator circle
c-input-group-24
Input group with success indicator circle
Input group with search results count
c-input-group-25
Input group with search results count
Textarea input group with action buttons
c-input-group-26
Textarea input group with action buttons
Input group wrapped in a button group with text prefixes/suffixes
c-input-group-27
Input group wrapped in a button group with text prefixes/suffixes
Input group with a menu button (three dots) at the end
c-input-group-28
Input group with a menu button (three dots) at the end
Pill-shaped input group with a category dropdown at the end
c-input-group-29
Pill-shaped input group with a category dropdown at the end
Input group in invalid state
c-input-group-3
Input group in invalid state
Input group with inline addons (no separating borders)
c-input-group-30
Input group with inline addons (no separating borders)
Input group with inline start and block-end addon
c-input-group-31
Input group with inline start and block-end addon
Member row with avatar, email and role selection
c-input-group-32
Member row with avatar, email and role selection
Project save interface with status and action buttons
c-input-group-33
Project save interface with status and action buttons
Pill-shaped AI prompt bar with voice and audio icons
c-input-group-34
Pill-shaped AI prompt bar with voice and audio icons
Password input with visibility toggle
c-input-group-35
Password input with visibility toggle
API request input with method selector and send action
c-input-group-36
API request input with method selector and send action
Order search input with status filter
c-input-group-37
Order search input with status filter
Company search input with region selector
c-input-group-38
Company search input with region selector
Contact search input with filter and actions menu
c-input-group-39
Contact search input with filter and actions menu
Input group with prefix icon
c-input-group-4
Input group with prefix icon
Share link input with visibility selector and copy action
c-input-group-40
Share link input with visibility selector and copy action
Input group with suffix icon
c-input-group-5
Input group with suffix icon
Input group with both prefix and suffix icons
c-input-group-6
Input group with both prefix and suffix icons
Input group with prefix text addon
c-input-group-7
Input group with prefix text addon
Input group with suffix text addon
c-input-group-8
Input group with suffix text addon
Input group with both prefix and suffix text addons
c-input-group-9
Input group with both prefix and suffix text addons
Basic OTP input.
c-input-otp-1
Basic OTP input.
OTP input with numeric digits.
c-input-otp-2
OTP input with numeric digits.
OTP input with multiple separators.
c-input-otp-3
OTP input with multiple separators.
OTP input with letters and numbers.
c-input-otp-4
OTP input with letters and numbers.
OTP input for PIN codes.
c-input-otp-5
OTP input for PIN codes.
OTP input verification code.
c-input-otp-6
OTP input verification code.
Basic item with title and description
c-item-1
Basic item with title and description
Item with header and footer sections
c-item-10
Item with header and footer sections
Integration items with connect actions
c-item-11
Integration items with connect actions
Activity feed items with avatars and actions
c-item-12
Activity feed items with avatars and actions
Items with icon media and action buttons
c-item-2
Items with icon media and action buttons
User item with avatar, info, and follow button
c-item-3
User item with avatar, info, and follow button
Clickable navigation items with icons and chevron
c-item-4
Clickable navigation items with icons and chevron
Item group with status badges
c-item-5
Item group with status badges
File items with icon media, size, and actions
c-item-6
File items with icon media, size, and actions
Items with keyboard shortcuts
c-item-7
Items with keyboard shortcuts
Small-size items with badges
c-item-8
Small-size items with badges
Team members with roles and multiple actions
c-item-9
Team members with roles and multiple actions
Kanban board with placeholder overlay
c-kanban-1
Kanban board with placeholder overlay
Kanban board with dynamic overlay
c-kanban-2
Kanban board with dynamic overlay
Kanban board with frame columns
c-kanban-3
Kanban board with frame columns
Minimal kanban with stacked frame
c-kanban-4
Minimal kanban with stacked frame
Feature roadmap kanban with progress
c-kanban-5
Feature roadmap kanban with progress
Basic keyboard keys.
c-kbd-1
Basic keyboard keys.
Keyboard keys grouped together.
c-kbd-2
Keyboard keys grouped together.
Keyboard keys combined with icons.
c-kbd-3
Keyboard keys combined with icons.
Keyboard key within an input.
c-kbd-4
Keyboard key within an input.
Keyboard shortcut in a tooltip.
c-kbd-5
Keyboard shortcut in a tooltip.
Keyboard shortcuts reference list
c-kbd-6
Keyboard shortcuts reference list
Basic label.
c-label-1
Basic label.
Label with helper description text
c-label-10
Label with helper description text
Label with error state
c-label-11
Label with error state
Label with inline edit toggle
c-label-12
Label with inline edit toggle
Label with status indicator dot
c-label-13
Label with status indicator dot
Label paired with a checkbox.
c-label-2
Label paired with a checkbox.
Label for a textarea field.
c-label-3
Label for a textarea field.
Label in a disabled state.
c-label-4
Label in a disabled state.
Label with required indicator
c-label-5
Label with required indicator
Label with optional indicator
c-label-6
Label with optional indicator
Label with tooltip info icon
c-label-7
Label with tooltip info icon
Label with badge indicator
c-label-8
Label with badge indicator
Label with character counter
c-label-9
Label with character counter
Basic menubar.
c-menubar-1
Basic menubar.
Menubar with dropdown submenus.
c-menubar-2
Menubar with dropdown submenus.
Menubar with checkbox & radio items.
c-menubar-3
Menubar with checkbox & radio items.
Menubar with icons.
c-menubar-4
Menubar with icons.
Menubar for formatting and media.
c-menubar-5
Menubar for formatting and media.
Basic native select.
c-native-select-1
Basic native select.
Native select with options grouped.
c-native-select-2
Native select with options grouped.
Small native select.
c-native-select-3
Small native select.
Native select embedded within a field.
c-native-select-4
Native select embedded within a field.
Disabled native select.
c-native-select-5
Disabled native select.
Invalid native select.
c-native-select-6
Invalid native select.
Basic navigation menu.
c-navigation-menu-1
Basic navigation menu.
Navigation menu with grid layout.
c-navigation-menu-2
Navigation menu with grid layout.
Navigation menu with icons.
c-navigation-menu-3
Navigation menu with icons.
Navigation menu with grid layout and learn more button.
c-navigation-menu-4
Navigation menu with grid layout and learn more button.
Basic number field
c-number-field-1
Basic number field
Basic number field
c-number-field-2
Basic number field
Basic number field
c-number-field-3
Basic number field
Number filed with buttons on right
c-number-field-4
Number filed with buttons on right
Number field with spinner buttons
c-number-field-5
Number field with spinner buttons
Number field in form
c-number-field-6
Number field in form
Basic pagination.
c-pagination-1
Basic pagination.
Pagination with ellipsis indicator
c-pagination-10
Pagination with ellipsis indicator
Pagination with outline style buttons
c-pagination-11
Pagination with outline style buttons
Rows per page select with range info and first/prev/next/last icons
c-pagination-12
Rows per page select with range info and first/prev/next/last icons
Pagination with page select dropdown and first/last navigation
c-pagination-13
Pagination with page select dropdown and first/last navigation
Numbered pagination with go-to-page input
c-pagination-14
Numbered pagination with go-to-page input
Pagination with page info, numbered pages, ellipsis, and per-page select
c-pagination-15
Pagination with page info, numbered pages, ellipsis, and per-page select
Pagination without labels.
c-pagination-2
Pagination without labels.
Pagination with hover effect.
c-pagination-3
Pagination with hover effect.
Pagination with circle buttons.
c-pagination-4
Pagination with circle buttons.
Pagination with go-to-page input
c-pagination-5
Pagination with go-to-page input
Numbered pagination in card
c-pagination-6
Numbered pagination in card
Pagination with arrows buttons
c-pagination-7
Pagination with arrows buttons
Pagination with page info on center
c-pagination-8
Pagination with page info on center
Pagination with page info on left
c-pagination-9
Pagination with page info on left
Basic phone input
c-phone-input-1
Basic phone input
Small phone input
c-phone-input-2
Small phone input
Large phone input
c-phone-input-3
Large phone input
Disabled phone input
c-phone-input-4
Disabled phone input
Phone input with preset value
c-phone-input-5
Phone input with preset value
Phone input with error state
c-phone-input-6
Phone input with error state
Phone input with specific default country
c-phone-input-7
Phone input with specific default country
Read-only phone input
c-phone-input-8
Read-only phone input
Basic popover.
c-popover-1
Basic popover.
Popover with controls
c-popover-10
Popover with controls
Popover with navigation
c-popover-11
Popover with navigation
Popovers opening from different sides.
c-popover-2
Popovers opening from different sides.
Popover with form.
c-popover-3
Popover with form.
Popover alignment positions.
c-popover-4
Popover alignment positions.
Popover within a dialog.
c-popover-5
Popover within a dialog.
Popover with user profile details.
c-popover-6
Popover with user profile details.
Popover with custom content
c-popover-7
Popover with custom content
Popover with media preview.
c-popover-8
Popover with media preview.
Relative time popover with timezone details
c-popover-9
Relative time popover with timezone details
Basic progress.
c-progress-1
Basic progress.
Small progress.
c-progress-2
Small progress.
Large progress.
c-progress-3
Large progress.
Progress bar with status messages.
c-progress-4
Progress bar with status messages.
File upload list with progress & status.
c-progress-5
File upload list with progress & status.
Progress bar with slider.
c-progress-6
Progress bar with slider.
Multi-step progress indicator
c-progress-7
Multi-step progress indicator
Progress bar with custom colors.
c-progress-8
Progress bar with custom colors.
Basic radio group
c-radio-group-1
Basic radio group
Radio group in frame
c-radio-group-10
Radio group in frame
Radio group with grid layout
c-radio-group-11
Radio group with grid layout
Avatar based card radio group
c-radio-group-12
Avatar based card radio group
Payment method radio cards
c-radio-group-13
Payment method radio cards
Radio group with tooltip info
c-radio-group-14
Radio group with tooltip info
Radio group with badges
c-radio-group-15
Radio group with badges
Inline horizontal radio group
c-radio-group-16
Inline horizontal radio group
Pricing plan radio cards
c-radio-group-17
Pricing plan radio cards
Disabled radio group
c-radio-group-2
Disabled radio group
Radio with description
c-radio-group-3
Radio with description
Invalid radio group
c-radio-group-4
Invalid radio group
Colored radio group
c-radio-group-5
Colored radio group
Radio group with legend and description
c-radio-group-6
Radio group with legend and description
Card radio group with descriptions
c-radio-group-7
Card radio group with descriptions
Radio group in card with separators
c-radio-group-8
Radio group in card with separators
Radio group in card with icons
c-radio-group-9
Radio group in card with icons
Basic rating.
c-rating-1
Basic rating.
Rating with decimal value.
c-rating-2
Rating with decimal value.
Rating with show value.
c-rating-3
Rating with show value.
Rating with editable.
c-rating-4
Rating with editable.
Rating with size.
c-rating-5
Rating with size.
Rating with review summary
c-rating-6
Rating with review summary
Interactive half-star rating
c-rating-7
Interactive half-star rating
Emoji reaction rating
c-rating-8
Emoji reaction rating
Rating with review text input
c-rating-9
Rating with review text input
Horizontal resizable layout
c-resizable-1
Horizontal resizable layout
State-tracked resizable layout.
c-resizable-10
State-tracked resizable layout.
Vertical resizable layout.
c-resizable-2
Vertical resizable layout.
Nested mixed-direction resizable layout.
c-resizable-3
Nested mixed-direction resizable layout.
Nested resizable
c-resizable-4
Nested resizable
Handle with animated pill indicator
c-resizable-5
Handle with animated pill indicator
Handle pill with spring scale on drag
c-resizable-6
Handle pill with spring scale on drag
Handle with large capsule expansion on drag
c-resizable-7
Handle with large capsule expansion on drag
Nested layout with animated pill handles
c-resizable-8
Nested layout with animated pill handles
Three-panel layout with animated pill handles
c-resizable-9
Three-panel layout with animated pill handles
Basic scroll area
c-scroll-area-1
Basic scroll area
Scroll area with horizontal scrollbar
c-scroll-area-2
Scroll area with horizontal scrollbar
Scroll area with both scrollbars
c-scroll-area-3
Scroll area with both scrollbars
Scroll area with fade effect
c-scroll-area-4
Scroll area with fade effect
Scroll area with scrollbar gutter
c-scroll-area-5
Scroll area with scrollbar gutter
Basic scrollspy
c-scrollspy-1
Basic scrollspy
Basic scroll area
c-scrollspy-2
Basic scroll area
A basic select component with a list of options
c-select-1
A basic select component with a list of options
Select component in a disabled state
c-select-10
Select component in a disabled state
Select component inside a Dialog
c-select-11
Select component inside a Dialog
Select component with multiple selection
c-select-12
Select component with multiple selection
Select component inline with Input
c-select-13
Select component inline with Input
Select component with Button side by side
c-select-14
Select component with Button side by side
Select component with item alignment enabled
c-select-15
Select component with item alignment enabled
Select with custom access level descriptions
c-select-16
Select with custom access level descriptions
Select with colored bullets for status
c-select-17
Select with colored bullets for status
Select with user avatars
c-select-18
Select with user avatars
Select with status badges
c-select-19
Select with status badges
Select with icons and placeholder state
c-select-2
Select with icons and placeholder state
Select with indicator on the left side
c-select-20
Select with indicator on the left side
Select with clear button
c-select-21
Select with clear button
Select with custom chevrons up down icon
c-select-22
Select with custom chevrons up down icon
Multi-select with overlapping dots
c-select-23
Multi-select with overlapping dots
Select with grouped options and separators
c-select-24
Select with grouped options and separators
Country picker select with flag emojis
c-select-25
Country picker select with flag emojis
Status filter select with colored dots
c-select-26
Status filter select with colored dots
Select with description text per option
c-select-27
Select with description text per option
Timezone select with UTC offsets
c-select-28
Timezone select with UTC offsets
Select with avatar items for team member assignment
c-select-29
Select with avatar items for team member assignment
Select component with grouped options and labels
c-select-3
Select component with grouped options and labels
Priority select with colored badges
c-select-30
Priority select with colored badges
Font family select with preview
c-select-31
Font family select with preview
Select with icon-labeled categories
c-select-32
Select with icon-labeled categories
Size variant select with small trigger
c-select-33
Size variant select with small trigger
Select component with a large list of options
c-select-4
Select component with a large list of options
Select component with small trigger size
c-select-5
Select component with small trigger size
Select component with a subscription plan style
c-select-6
Select component with a subscription plan style
Select component with item alignment disabled
c-select-7
Select component with item alignment disabled
Select component within a Field with label and description
c-select-8
Select component within a Field with label and description
Select component in an invalid state
c-select-9
Select component in an invalid state
Horizontal separator for content sections.
c-separator-1
Horizontal separator for content sections.
Vertical separator for inline elements.
c-separator-2
Vertical separator for inline elements.
Vertical separator groups related menu items.
c-separator-3
Vertical separator groups related menu items.
Horizontal separator between items in a list.
c-separator-4
Horizontal separator between items in a list.
Separator with centered text label
c-separator-5
Separator with centered text label
Order summary with separators
c-separator-6
Order summary with separators
Sheet containing a form for editing profile information.
c-sheet-1
Sheet containing a form for editing profile information.
Sheet containing a form for editing profile information.
c-sheet-2
Sheet containing a form for editing profile information.
Sheets that open from any side.
c-sheet-3
Sheets that open from any side.
Sheet with scrollable content
c-sheet-4
Sheet with scrollable content
Skeleton loader for avatars and user info.
c-skeleton-1
Skeleton loader for avatars and user info.
Skeleton loader for chat messages
c-skeleton-10
Skeleton loader for chat messages
Skeleton loader for a card component.
c-skeleton-2
Skeleton loader for a card component.
Skeleton loader for text and paragraphs.
c-skeleton-3
Skeleton loader for text and paragraphs.
Skeleton loader for a form.
c-skeleton-4
Skeleton loader for a form.
Skeleton loader for a data table.
c-skeleton-5
Skeleton loader for a data table.
Skeleton loader for a dashboard stats row
c-skeleton-6
Skeleton loader for a dashboard stats row
Skeleton loader for a list with actions
c-skeleton-7
Skeleton loader for a list with actions
Skeleton loader for a card grid
c-skeleton-8
Skeleton loader for a card grid
Skeleton loader for a full profile page
c-skeleton-9
Skeleton loader for a full profile page
Basic slider.
c-slider-1
Basic slider.
Slider with tick marks
c-slider-10
Slider with tick marks
Slider with dynamic tooltip indicator
c-slider-11
Slider with dynamic tooltip indicator
Rating slider with emoji feedback
c-slider-12
Rating slider with emoji feedback
Disabled slider
c-slider-2
Disabled slider
Slider with multiple discrete values
c-slider-3
Slider with multiple discrete values
Vertical slider with range selection
c-slider-4
Vertical slider with range selection
Slider with controlled value tracking
c-slider-5
Slider with controlled value tracking
Slider with range selection
c-slider-6
Slider with range selection
Slider synced with number input
c-slider-7
Slider synced with number input
Color temperature slider
c-slider-8
Color temperature slider
Slider with reference labels
c-slider-9
Slider with reference labels
Basic toast notification.
c-sonner-1
Basic toast notification.
Toast with upload progress simulation
c-sonner-10
Toast with upload progress simulation
Toast with status alert markup
c-sonner-11
Toast with status alert markup
Custom accent border toast
c-sonner-12
Custom accent border toast
Custom invert success toast
c-sonner-13
Custom invert success toast
Custom invert error toast with details
c-sonner-14
Custom invert error toast with details
Custom invert info toast with avatar
c-sonner-15
Custom invert info toast with avatar
Custom invert warning toast with countdown
c-sonner-16
Custom invert warning toast with countdown
Multi-action invert toast with avatar group
c-sonner-17
Multi-action invert toast with avatar group
Toast with close button on top-right
c-sonner-18
Toast with close button on top-right
Toast with custom icon
c-sonner-19
Toast with custom icon
Toast notification with description.
c-sonner-2
Toast notification with description.
Custom integration toast
c-sonner-20
Custom integration toast
Updatable toast with ID
c-sonner-21
Updatable toast with ID
Toast positions
c-sonner-3
Toast positions
Toast variants with colored icons
c-sonner-4
Toast variants with colored icons
Toast duration options
c-sonner-5
Toast duration options
Toast with action button
c-sonner-6
Toast with action button
Promise toast with loading state
c-sonner-7
Promise toast with loading state
Toast with custom close and cancel buttons
c-sonner-8
Toast with custom close and cancel buttons
Toast with custom rich content
c-sonner-9
Toast with custom rich content
Sortable list of items with drag-and-drop
c-sortable-1
Sortable list of items with drag-and-drop
Sortable list of items with grid layout
c-sortable-2
Sortable list of items with grid layout
Sortable list of items with nested layout
c-sortable-3
Sortable list of items with nested layout
Sortable playlist with frame
c-sortable-4
Sortable playlist with frame
Sortable settings priority with frame
c-sortable-5
Sortable settings priority with frame
Sortable sidebar navigation with frame
c-sortable-6
Sortable sidebar navigation with frame
Sortable image gallery grid with frame
c-sortable-7
Sortable image gallery grid with frame
Basic spinner.
c-spinner-1
Basic spinner.
Animated loading dots
c-spinner-10
Animated loading dots
Spinner overlay on card
c-spinner-11
Spinner overlay on card
Spinner color variants
c-spinner-12
Spinner color variants
Spinners in buttons.
c-spinner-2
Spinners in buttons.
Spinners in badges.
c-spinner-3
Spinners in badges.
Spinner in input group.
c-spinner-4
Spinner in input group.
Spinner in empty state.
c-spinner-5
Spinner in empty state.
Button loading states
c-spinner-6
Button loading states
Overlay loading spinner
c-spinner-7
Overlay loading spinner
Full page loading state
c-spinner-8
Full page loading state
Inline loading text with spinner
c-spinner-9
Inline loading text with spinner
Basic stepper
c-stepper-1
Basic stepper
Stepper with content for each step
c-stepper-10
Stepper with content for each step
Stepper with progress bar and titles
c-stepper-11
Stepper with progress bar and titles
Stepper with segmented progress bar
c-stepper-12
Stepper with segmented progress bar
Stepper with vertical orientation and descriptions
c-stepper-13
Stepper with vertical orientation and descriptions
Stepper with vertical orientation
c-stepper-14
Stepper with vertical orientation
Stepper with vertical orientation and titles
c-stepper-15
Stepper with vertical orientation and titles
Stepper with completed state
c-stepper-2
Stepper with completed state
Stepper with loading state
c-stepper-3
Stepper with loading state
Controlled stepper
c-stepper-4
Controlled stepper
Stepper with title and indicator
c-stepper-5
Stepper with title and indicator
Stepper with progress bar indicator
c-stepper-6
Stepper with progress bar indicator
Stepper with icons and badges
c-stepper-7
Stepper with icons and badges
Stepper with descriptions
c-stepper-8
Stepper with descriptions
Stepper with inline titles
c-stepper-9
Stepper with inline titles
Basic switch.
c-switch-1
Basic switch.
Switch with badges
c-switch-10
Switch with badges
Colored switches
c-switch-11
Colored switches
Destructive switch with confirmation text
c-switch-12
Destructive switch with confirmation text
Compact settings table with switches
c-switch-13
Compact settings table with switches
Switch with descriptions in card grid
c-switch-14
Switch with descriptions in card grid
Switch with description.
c-switch-2
Switch with description.
Disabled switch.
c-switch-3
Disabled switch.
Switch in different sizes.
c-switch-4
Switch in different sizes.
Switch group
c-switch-5
Switch group
Switch list in card with separators
c-switch-6
Switch list in card with separators
Switch list in card with icons
c-switch-7
Switch list in card with icons
Switch in frame
c-switch-8
Switch in frame
Switch with tooltip info
c-switch-9
Switch with tooltip info
Basic table.
c-table-1
Basic table.
Subscriptions table with plan badges and billing info
c-table-10
Subscriptions table with plan badges and billing info
Product inventory table with stock badges and prices
c-table-11
Product inventory table with stock badges and prices
API keys table with permission badges and actions
c-table-12
API keys table with permission badges and actions
File manager table with owners and sharing badges
c-table-13
File manager table with owners and sharing badges
Issues table with priority, assignee, and labels
c-table-14
Issues table with priority, assignee, and labels
Leaderboard table with rank, score, and level badges
c-table-15
Leaderboard table with rank, score, and level badges
Vertical table with employee profile details
c-table-16
Vertical table with employee profile details
Vertical table with server configuration details
c-table-17
Vertical table with server configuration details
Table with footer.
c-table-2
Table with footer.
Table in card with status badges.
c-table-3
Table in card with status badges.
Table card with actions column.
c-table-4
Table card with actions column.
Table with interactive elements.
c-table-5
Table with interactive elements.
Team members table with avatars, roles, and status
c-table-6
Team members table with avatars, roles, and status
Orders table with customer info and payment status
c-table-7
Orders table with customer info and payment status
Projects table with team avatars and status
c-table-8
Projects table with team avatars and status
Activity log table with user avatars and timestamps
c-table-9
Activity log table with user avatars and timestamps
Basic tabs.
c-tabs-1
Basic tabs.
Tabs with line variant.
c-tabs-2
Tabs with line variant.
Tabs with vertical orientation.
c-tabs-3
Tabs with vertical orientation.
Tabs with vertical orientation and line variant.
c-tabs-4
Tabs with vertical orientation and line variant.
Tabs with icons.
c-tabs-5
Tabs with icons.
Tabs with icons
c-tabs-6
Tabs with icons
Tabs with badge counts
c-tabs-7
Tabs with badge counts
Tabs with icons and line variant
c-tabs-8
Tabs with icons and line variant
Segmented control tabs
c-tabs-9
Segmented control tabs
Basic textarea.
c-textarea-1
Basic textarea.
Invalid textarea.
c-textarea-2
Invalid textarea.
Textarea with label.
c-textarea-3
Textarea with label.
Textarea with description.
c-textarea-4
Textarea with description.
Disabled textarea.
c-textarea-5
Disabled textarea.
Auto-resize textarea with character count
c-textarea-6
Auto-resize textarea with character count
Basic timeline.
c-timeline-1
Basic timeline.
Deployment log timeline
c-timeline-10
Deployment log timeline
Activity feed timeline with user avatars
c-timeline-11
Activity feed timeline with user avatars
Compact horizontal milestone timeline
c-timeline-12
Compact horizontal milestone timeline
Timeline with roadmap.
c-timeline-2
Timeline with roadmap.
Timeline with order status.
c-timeline-3
Timeline with order status.
Timeline with git activity.
c-timeline-4
Timeline with git activity.
Timeline with milestones.
c-timeline-5
Timeline with milestones.
Timeline with pipeline steps.
c-timeline-6
Timeline with pipeline steps.
Timeline with roadmap items.
c-timeline-7
Timeline with roadmap items.
Vertical timeline
c-timeline-8
Vertical timeline
Horizontal timeline with leading labels
c-timeline-9
Horizontal timeline with leading labels
Basic toggle.
c-toggle-1
Basic toggle.
Toggle with text label that changes
c-toggle-10
Toggle with text label that changes
Social media reaction toggles
c-toggle-11
Social media reaction toggles
Toggle with tooltip
c-toggle-12
Toggle with tooltip
Disabled toggle states
c-toggle-13
Disabled toggle states
Toggle as mute/unmute button
c-toggle-14
Toggle as mute/unmute button
Toggle buttons with outline variant.
c-toggle-2
Toggle buttons with outline variant.
Toggle buttons in different sizes.
c-toggle-3
Toggle buttons in different sizes.
Toggle with button and icon.
c-toggle-4
Toggle with button and icon.
Disabled toggle.
c-toggle-5
Disabled toggle.
Toggle with icon.
c-toggle-6
Toggle with icon.
Toggle with notification count badge
c-toggle-7
Toggle with notification count badge
Toggle size variants showcase
c-toggle-8
Toggle size variants showcase
Toggle with icon swap on press
c-toggle-9
Toggle with icon swap on press
Basic toggle group.
c-toggle-group-1
Basic toggle group.
Toggle group for color theme
c-toggle-group-10
Toggle group for color theme
Toggle group for font size
c-toggle-group-11
Toggle group for font size
Toggle group for time range filter
c-toggle-group-12
Toggle group for time range filter
Toggle group for notification channels
c-toggle-group-13
Toggle group for notification channels
Toggle group for layout columns
c-toggle-group-14
Toggle group for layout columns
Toggle group for sort direction
c-toggle-group-15
Toggle group for sort direction
Toggle group for pricing tier
c-toggle-group-16
Toggle group for pricing tier
Toggle group with outline variant.
c-toggle-group-2
Toggle group with outline variant.
Toggle groups in different sizes.
c-toggle-group-3
Toggle groups in different sizes.
Toggle group with custom spacing.
c-toggle-group-4
Toggle group with custom spacing.
Toggle group with filter control.
c-toggle-group-5
Toggle group with filter control.
Toggle group with vertical orientation.
c-toggle-group-6
Toggle group with vertical orientation.
Toggle group for text alignment
c-toggle-group-7
Toggle group for text alignment
Toggle group for view mode switching
c-toggle-group-8
Toggle group for view mode switching
Vertical toggle group for settings
c-toggle-group-9
Vertical toggle group for settings
Basic tooltip.
c-tooltip-1
Basic tooltip.
Tooltip with feature badge and upgrade link
c-tooltip-10
Tooltip with feature badge and upgrade link
Tooltip with avatar and role badge
c-tooltip-11
Tooltip with avatar and role badge
Tooltip on disabled button with wrapper
c-tooltip-12
Tooltip on disabled button with wrapper
Tooltip with online status indicator
c-tooltip-13
Tooltip with online status indicator
Tooltip with file info and badges
c-tooltip-14
Tooltip with file info and badges
Tooltip with label badges
c-tooltip-15
Tooltip with label badges
Tooltip with action button inside
c-tooltip-16
Tooltip with action button inside
Tooltips opening from different sides.
c-tooltip-2
Tooltips opening from different sides.
Tooltip with icon trigger.
c-tooltip-3
Tooltip with icon trigger.
Tooltip with keyboard shortcut.
c-tooltip-4
Tooltip with keyboard shortcut.
Tooltip on notification bell with badge count
c-tooltip-5
Tooltip on notification bell with badge count
Tooltip with status badge
c-tooltip-6
Tooltip with status badge
Tooltip with icon and description
c-tooltip-7
Tooltip with icon and description
Toolbar with tooltip actions
c-tooltip-8
Toolbar with tooltip actions
Tooltip with warning badge
c-tooltip-9
Tooltip with warning badge
Basic tree.
c-tree-1
Basic tree.
Tree with indented lines.
c-tree-2
Tree with indented lines.
Tree with custom indent.
c-tree-3
Tree with custom indent.
Tree with custom indent.
c-tree-4
Tree with custom indent.
File explorer tree with type icons
c-tree-5
File explorer tree with type icons
Organization chart tree with avatars
c-tree-6
Organization chart tree with avatars
Permissions tree with checkboxes
c-tree-7
Permissions tree with checkboxes
Brand logo grid card with centered icon tile and linked name per company
card-1
Responsive grid of compact brand cards, each centering a company logo in a bordered tile over a linked name. ReUI Frame plus shadcn Item, ItemMedia. For integrations, partners, tech stack, or logo wall.
Color-tinted stacked Frame cards with date header, actions menu, and category badges
card-10
Responsive card grid of pastel stacked Frames, each with an uppercase date, ReUI Frame and Badge plus shadcn DropdownMenu, Button, and Separator. For reports, updates, announcements, and activity feeds.
Minimal text-only notice card grid with accent label and faded dot-pattern background
card-11
Responsive container-query grid of text-only notice cards built on the ReUI Frame, each pairing an accent-colored label with a description over a faded dotted SVG pattern. For reminders, tips, alerts, status callouts.
Compact icon-and-title link card grid, no description text, built on ReUI Frame
card-12
Responsive grid of clickable cards, each a link with a top icon and title only and no body copy, with hover and focus-ring states. Uses ReUI Frame and FramePanel. For category tiles, quick-link menus, dashboard navigation, and feature shortcuts.
Two-column card grid with link title, description, and a row of bordered logo chips
card-13
Showcase sponsors, affiliates, or integration partners: each card pairs a hover link heading and muted description with a wrap of bordered brand logo badges. Built with ReUI Frame and shadcn Item.
Delivery tracking card with icon-labeled detail rows, status badge, header menu, and notes section
card-14
Single order delivery card showing address, ETA, and tracking number as icon rows with a Home badge, a notes block, and a header actions menu. Built with ReUI Frame and Badge plus shadcn Item, DropdownMenu, Button. Order tracking, shipment status.
Meeting cards grid with attendee avatars, duration badge, and a Join Meeting link
card-15
Two-column grid of agenda meeting cards: title, time, duration badge, attendee AvatarGroup with overflow count, kebab menu, and a Google Meet Join link. ReUI Frame, Badge with shadcn Avatar, DropdownMenu, Button. For calendars, schedules, agendas.
Dark integration app card with patterned header, status badge, ellipsis menu and avatar group
card-16
Integration card for app marketplaces: patterned dark header with status Badge and ellipsis DropdownMenu, brand logo, title, description, user AvatarGroup and full-width outline Button. Uses ReUI Frame, Badge with shadcn Avatar, Button, DropdownMenu.
Shortcut cards grid with colored icon tiles, dotted canvas backdrop, and a labeled action link
card-17
Responsive grid of navigation shortcut cards, each with a colored rounded icon tile, a masked dot-pattern canvas background, title, description, and a chevron action link. ReUI Frame, FramePanel with shadcn Item. Quick links, hub, launcher, jump-to.
Compact info card grid with icon-label header, description, and source link in framed panels
card-18
Responsive 3-column grid of compact info cards using ReUI Frame, FrameHeader, and FramePanel. Each card pairs an icon-and-label header with a short description and an underlined source link. For stat tiles, resource lists, or dashboard cards.
Crypto asset price card with ticker, large quote, percent-change delta and Follow plus Trade actions
card-19
Asset overview card showing a market ticker, large price quote, green percent-change delta, last-updated time, and outline Follow plus primary Trade buttons. ReUI Frame, shadcn Button. For crypto, stock, watchlist, and trading dashboards.
Feature highlights grid of icon-tile cards with a faded dot-pattern background
card-2
Container-query feature cards that scale from one to four columns, each pairing a bordered icon tile, linked title, and muted blurb over a dotted backdrop. ReUI Frame, shadcn Item. For benefits, services, capabilities sections.
Help center guide cards grid with colored icon badge and bordered article link list
card-20
Three-up help center grid where each ReUI Frame card pairs a colored icon badge, title, and summary with a bordered list of guide links carrying arrow icons. Docs hub, knowledge base, resource directory. Built with ReUI Frame and shadcn Item.
Project task cards grid with client name, due-date countdown, and share action
card-21
Three-column grid of project cards, each with an icon badge, project title link, client name, and a Due countdown. Built with ReUI Frame, shadcn Button and Item. For project lists, task boards, deadlines.
Centered promo card with overlapping tilted image pair, pill badge, and rounded CTA button
card-22
Vertical promo card pairing two rotated, overlapping square thumbnails with an outline Badge, heading, subtext, and icon Button. For upsell, demo, feature highlight, or onboarding tiles. Built with ReUI Frame plus shadcn AspectRatio, Badge, Button.
AI monitoring promo card with stacked Frame, 24/7 uptime metric, integration logo tiles, and CTA
card-23
Stacked two-panel ReUI Frame promo: a large 24/7 monitoring metric over a faded grid with AI integration logo tiles, plus a headline, blurb, and shadcn Button CTA. For uptime, monitoring, and SaaS marketing cards.
Recommended job role card with company logo, location, work mode, and salary meta row
card-24
Job recommendation card with company logo tile, role title, and an icon meta row for location, work mode, and salary, plus a description and Quick Apply / View Details buttons. ReUI Frame, shadcn Button, Separator. Job board, careers, hiring.
Account balance summary card grid with colored icon tiles and signed percent-change indicators
card-25
Multi-account balance overview: per-account cards showing balance, type label, and color-coded gain/loss delta with a colored icon tile. Built on ReUI Frame, FramePanel, and shadcn Item. For wallet, treasury, and finance dashboards.
Three-column metric card grid with icon-and-label headers and linked titles in framed panels
card-26
Responsive 3-up grid of compact stat cards built on the ReUI Frame, each with an icon and label header plus a panel holding a clickable title link and muted description. For dashboard metrics, KPI summaries, and overview tiles.
Horizontal application summary card with labeled metadata columns, status dot, and team avatar group
card-27
Single-row record card with details in labeled columns (created, status, mobile, email, domain, team), a green status dot, info Badge, and overflow avatar group on a faded dot grid. ReUI Frame, Badge, shadcn Avatar group. Account summary row.
KPI metric card grid with two-tone numeric values and per-panel trend Badge with period label
card-28
Responsive 1 to 4 column stat grid where each panel shows a large two-tone value with faint decimals, a metric label, and an up or down trend Badge with percent and period. ReUI Frame, FramePanel, Badge. Dashboard KPIs, analytics tiles.
KPI metric stat grid in a bordered frame with per-cell area charts and trend badges
card-29
Dashboard KPI stat grid: bordered Frame splits into metric cells, each with an icon, large value, delta Badge, and an area chart. ReUI Frame, FramePanel, Badge. Analytics overview, stats cards, metric tiles.
Investor profile card with availability badge, stats strip, and ranked funding sources list
card-3
Investor profile card: avatar, name, status badge, three-column stats strip, and a ranked funding sources list with colored icon tiles and amounts. ReUI Frame, Badge plus shadcn Item, AspectRatio, Button. For fundraising, VC, fund directory cards.
Stat card grid with icon tile, actions menu, and trend badge per metric
card-30
Responsive metric card grid (1 to 4 columns); each tile has an icon, large value, label, colored status badge with trend arrow, and an actions dropdown (Edit, Copy, Delete). KPI dashboard, analytics summary. ReUI Frame, Badge; shadcn DropdownMenu.
KPI stat cards in a responsive grid with faded line-grid backgrounds and glossy colored icon tiles
card-31
Four-up metric cards showing a big number, label, and a colored icon tile over a masked square-mesh grid pattern. Built on ReUI Frame and FramePanel. For dashboards, analytics overviews, and KPI stat summaries.
Horizontal stats summary card with labeled metric columns, status icons, and a team avatar group
card-32
Single-row summary splitting metrics across divided columns, each with a colored status icon, value, and unit, plus an overflow team avatar column. Built with ReUI Frame and shadcn Avatar, AvatarGroup. For compliance, security, or KPI overview cards.
Inventory stat card grid with gradient icon badge, dotted backdrop, and per-card actions menu
card-33
Responsive four-up grid of inventory stat cards, each with a gradient icon badge, dotted backdrop, linked title, value, and an ellipsis menu (Edit, Copy link, Delete). Uses ReUI Frame, shadcn DropdownMenu, Item, Button. Dashboard KPIs and stats.
KPI metric cards with bold value, faint decimal fraction, and up or down trend badge per period
card-34
Responsive grid of compact stat cards: each shows a metric label, large value with a faded decimal tail, and a colored trend Badge (up or down) with a period label. Built on ReUI Frame, FramePanel, Badge. For dashboards, analytics, KPI summaries.
KPI stat card grid with metric label, large value, and halftone dot-pattern backdrop
card-35
Responsive grid of compact metric cards, each pairing a muted label with a bold value over a masked halftone dot pattern. Built on the ReUI Frame and FramePanel. For dashboard KPI tiles, stats overview, and analytics summary cards.
KPI stat card grid with big metric over label and a masked dot-grid backdrop
card-36
Responsive container-query grid of compact KPI stat cards, each pairing a large metric value with a muted label over a masked dot-grid pattern. Built on ReUI Frame and FramePanel for dashboards, analytics, and metrics overviews.
Compact KPI stat tile grid with muted labels and green metric icons
card-37
Responsive 3-column grid of compact KPI tiles, each a muted label over a green icon plus bold metric value (MRR, revenue, growth). Built on ReUI Frame and FramePanel for stats summaries, metric cards, company snapshots.
Horizontal stat strip card with divided metric columns and a dotted accent cell
card-38
Horizontal KPI strip in a ReUI Frame: equal stat columns with bold value over muted label, hairline dividers, and a dotted-texture final cell. Profile or dashboard summary stats, metric row.
Icon-badge resource card grid linking to help, docs, and platform sections
card-39
Responsive grid of clickable resource cards, each with an icon badge, title link, and short blurb. Built on ReUI Frame and FramePanel with shadcn Item and ItemMedia. For docs hubs, help centers, onboarding, and platform overview sections.
Colorful dark KPI stat cards with trend badge, grid-mesh background, and footer report link
card-4
Grid of dark metric cards on colored panels, each with a big value, an up-trend Badge with percent, an icon tile, and a footer report link. Built with ReUI Frame and Badge plus shadcn Item for KPI, stats, and analytics dashboards.
Compact two-column metric stat grid with large value, unit, and muted label tiles
card-40
Two-column grid of metric tiles, each pairing a large value with a small unit and a muted label, for KPI summaries, fitness and activity stats, and dashboard quick stats. Built on ReUI Frame and FramePanel.
Topic Link Card Grid with Colored Icon Tiles and Hover Title Links
card-41
Responsive grid of compact topic cards, each a colored icon tile, linked title, and one-line summary. Built on ReUI Frame with shadcn Item and ItemMedia. For help center topics, quick links, resource and feature shortcuts.
Profile card with verified name, online badge, team avatar group, stats row, and connect button
card-42
Profile card with avatar, online status badge, verified name, company and email, team avatar group, 3-column stats row, and a Connected button. ReUI Frame with shadcn Avatar, AvatarGroup, Item, Separator, Button. For team, contact, or account cards.
Profile card with cover banner, verified avatar, and horizontal project portfolio rail
card-43
Profile card with a desaturated cover banner, ring avatar with status badge and verified check, and a horizontal-scrolling portfolio rail of project thumbnails. Built with ReUI Frame, Avatar, ScrollArea, Button. For team or contributor profiles.
Integration Cards with Brand Logo, Connector Diagram, and Tier Badge over a Dotted Backdrop
card-5
Integration cards pairing a brand logo (Resend, PayPal, Supabase) with flanking icons on a dashed connector line over a dotted canvas, plus a title link, tier Badge, and blurb. ReUI Frame, Badge, shadcn Item. Marketplace, connectors, plugins.
Numbered setup-step card grid with ordinal labels and a responsive one to four column Frame layout
card-6
Onboarding or setup walkthrough showing numbered steps (0.1 to 0.4) as titled, hover-linked cards in a responsive container-query grid that flows one to four columns. Built on ReUI Frame and FramePanel. For getting-started and how-it-works sections.
Detail stat card grid with label, value, and swappable logo, badge, or avatar group accent
card-7
Responsive grid of compact detail cards, each with a labeled value plus a trailing brand logo, status Badge, or stacked Avatar group. Uses ReUI Frame, Badge and shadcn Avatar. For dashboards, company, profile, and metric cards.
Service status card grid with icon box, linked title, color-coded status dot and timestamp
card-8
Three-column grid of status cards, each pairing an icon box, a linked title, a color-coded status dot and label (Online, Synced, Idle) and a timestamp on a dot-pattern panel. ReUI Frame, FramePanel, Item. For infrastructure and uptime monitoring.
Applicant profile card with detail columns, copy-action contact fields, and skill badges
card-9
Horizontal candidate summary card: labeled columns for role, location, and contact with copy-icon buttons, plus a wrapped skill-badge row over a dot-pattern panel. ReUI Frame, Badge, shadcn Button. For ATS, recruiting, and applicant detail views.
Shop by Category Grid with Hover Browse Buttons and Badges
category-card-1
Four-column image grid for browsing product categories. Each card has a photo with hover-reveal browse button, optional badge, name, and item count. ReUI Badge, shadcn Button, Breadcrumb. Shop-by-category, product taxonomy, ecommerce catalog.
Curated collection browse page with multi-filter toolbar and pagination
category-card-2
Filterable collection grid with search, category, availability, and fit filters, sort, and pagination. Cards show clipped image with badge, title, tags, and count. ReUI Badge; shadcn Button, Select, Switch, Popover, Breadcrumb, Pagination.
Carousel collection filter with color-tinted category cards and hover browse buttons
category-card-3
Paginated carousel for browsing product collections. Color-tinted cards with image zoom on hover, a reveal browse button, and page-count badge. ReUI Badge; shadcn Card, Button, Carousel. Category filter, shop landing, ecommerce browsing.
Ecommerce catalog page with featured department and scrollable category index
category-card-4
Catalog landing pairing a large featured department hero with a scrollable sidebar of category tiles, breadcrumb header, item and price counts. ReUI Badge; shadcn Breadcrumb, Button, ScrollArea. For shop home, category browse, department directory.
Collection Guides Browser with Image-Led List Rows and Category Links
category-card-5
Ecommerce collection guides browser with single-column image-led rows, status badges, item count and budget metadata, tag links, and per-collection actions. Uses ReUI Badge; shadcn Breadcrumb, Button. For product discovery and category guides.
Seasonal Category Grid with Full-Card Hover Reveal and Breadcrumb Header
category-card-6
Image-first two-column category grid; each card reveals item count, description, and a shop button on hover, with a resting label and Badge. Uses ReUI Badge; shadcn Breadcrumb, Button. For collection, catalog, and category browsing pages.
Inventory KPI summary card with period tabs and per-metric sparkline trends
chart-1
Catalog health overview: Week/Month/Year tabs switch four inventory KPIs (in stock, out-of-stock, restock, slow movers), each with a recharts sparkline and tone-coded delta. ReUI Frame and Badge; shadcn Tabs, Chart, Button. Stats dashboard widget.
Heart rate metric card with segmented zone bar and large bpm readout
chart-10
Compact health stat card showing a big bpm value, heart icon tile, and a 4-segment heart-rate zone meter (rest to peak) with one active band. Built on ReUI Frame and shadcn Button. For fitness, wearable, and vitals dashboards.
Distance Metric Card with Week, Month, Year Tabs and Dotted Sparkline Fill
chart-11
Cycling distance KPI card that swaps a dotted area sparkline and value across Week, Month, and Year tabs. Built with ReUI Frame and shadcn Tabs for fitness, activity, or analytics stat panels and metric widgets.
Capital inflows semicircular gauge card with source breakdown and range switcher
chart-12
Half-donut radial gauge of capital inflows by source, with center total, a range switcher (week, month, quarter), and per-source metric breakdown. Built with ReUI Card, DropdownMenu, Item, Separator, and a recharts PieChart. For finance dashboards.
Capital inflows donut chart card with Week, Month, Year tabs and a per-source legend
chart-13
Donut chart card breaking down capital inflows by source, with Week/Month/Year tabs, center total, and a legend of each source's amount and percent share. ReUI Frame plus shadcn Chart (recharts pie), Tabs, Tooltip. For finance and revenue breakdowns.
Portfolio Allocation Card with Week/Month/Year Tabs and Segmented Bar Meter
chart-14
Finance allocation card: percentage metric with up delta, a segmented vertical-bar meter, equities exposure, and a member avatar stack. Card, Tabs, Tooltip, Avatar. For portfolio, investment, fund dashboards.
Three KPI stat cards with gradient sparkline area charts and hover tooltips
chart-15
Responsive row of metric cards, each pairing an icon, label, period and big value with a compact gradient area sparkline and hover tooltip. ReUI Frame, Recharts AreaChart. KPI dashboard, revenue and user stats overview.
Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector
chart-16
Ecommerce funnel as a stacked area chart over visits, product views, add to cart, and checkout, with four KPI tiles (value plus trend), a 7d/30d/90d/12m period selector, and custom tooltip. ReUI Frame, shadcn ChartContainer and Select.
Compact campaign analytics card with gradient area chart and 5D to 6M period tabs
chart-17
Marketing impressions card: total stat with +42% trend, gradient AreaChart (recharts), and period tabs (5D, 2W, 1M, 6M) that swap the dataset. ReUI Frame plus shadcn Tabs, Item, Tooltip, Button, Chart. For analytics dashboard, campaign KPI widget.
Orders overview card with period tabs, stat tiles, and animated gradient area chart
chart-18
Analytics overview card with Day, Week, Month, Year range Tabs, three stat tiles showing delta changes, and a recharts area chart with animated reveal and dark tooltip. ReUI Frame, shadcn Tabs, Item. For dashboard revenue or sales summary panels.
Dark finance metric card with composed area-and-line chart and day, week, month period tabs
chart-19
Dark DeFi-style stats card pairing Total Value Locked, Deposits and Borrowed KPIs with a Recharts composed chart of two gradient areas, monotone lines and a custom tooltip. Day, week, month switch via ReUI Card, Tabs. Crypto dashboard.
Four-column KPI stat row with corner line sparklines and trend badges
chart-2
Bordered row of compact KPI stat cards, each pairing a big value with a top-right line sparkline (hover tooltip) and an up/down trend badge. Built with ReUI Frame and Badge plus shadcn Chart over Recharts. For dashboard metric strips and analytics.
Sales vs goals composed line and area chart with vertical reference line marker
chart-20
Sales overview card plotting actual vs goal lines over a gradient area fill, with a dashed vertical reference marker, dollar-to-millions axis, custom tooltip, and Export/Filter/Share dropdown. ReUI Card, Button, DropdownMenu. For revenue dashboards.
Cashflow area and line chart card with period range selector and total plus percentage trend
chart-21
Cashflow chart card pairing a gradient Area with a dotted Line, a 6m/12m/2y range Select, a total with a green percentage trend, and a custom tooltip. Built with ReUI Frame, shadcn Select and ChartContainer. For finance and analytics dashboards.
Revenue performance card with line chart and period tabs (5D / 2W / 1M)
chart-22
Compact revenue KPI card with a single-series recharts line chart, a total computed from the active period, and 5D / 2W / 1M tab switching. Uses ReUI Card, Tabs, Button, Item, ChartContainer. For analytics, finance, and sales reporting widgets.
Multi-line social media activity chart with platform comparison and time-range selector
chart-23
Multi-line chart comparing Facebook, Instagram and LinkedIn activity over a selectable time range, with custom tooltip and dot legend. ReUI Frame and Select, shadcn ChartContainer, Recharts LineChart. For analytics dashboards and engagement trends.
Dual-axis e-commerce sales vs views line chart with period selector and KPI trend badges
chart-24
Plots sales and views on two independent Y-axes as solid and dashed recharts lines, with a 30 vs 90 day Select, KPI totals plus trend Badges, and a dark custom tooltip in a ReUI Frame. For e-commerce analytics and revenue vs traffic dashboards.
Order Metrics List Card with Per-Row Line Sparklines and Trend Badges
chart-25
Vertical KPI metrics list: each row pairs a value, suffix, and up or down trend Badge with a compact line sparkline over a grid. Uses ReUI Frame, Badge and shadcn ChartContainer, Separator. For orders, spend and finance dashboards.
Dark floor price analytics card with period tabs and monotone line chart
chart-26
Crypto and NFT floor price tracker on a dark Card: Month / Max Tabs toggle, recharts monotone LineChart, large current price with percent change. For asset dashboards, token price and portfolio widgets. Uses ReUI Card, Tabs, Button, Chart.
Browser usage donut chart card with 5D, 2W and 1M period tabs and total visitors KPI
chart-27
Donut chart of visitor share across browsers with a 5D/2W/1M tab switcher, total visitors stat, trend badge and slice labels. Uses ReUI Frame and Badge plus shadcn Tabs, Item, Button and recharts Pie. For analytics dashboards and traffic widgets.
Operational KPI metric cards with segmented bar gauge for utilization and capacity tracking
chart-28
Three operational KPI cards in a responsive grid, each with an icon, title, large value over total, and a 40-segment bar gauge showing utilization. Built with ReUI Frame, recharts BarChart, shadcn Item and Button. For dashboards and capacity metrics.
Inventory velocity bar chart card with diagonal hatched bars and dotted backdrop
chart-29
Vertical bar chart in a card showing warehouse turnover by category, with diagonal hatched-pattern bars, dotted grid backdrop, grow-up reveal animation, and a custom tooltip. Uses ReUI Frame, Badge, recharts. Analytics, dashboard, KPI.
Portfolio Balance Cards with Bottom-Anchored Line Charts on a Dotted Bed
chart-3
Three-column grid of balance cards, each with an icon tile, total value, up or down percent change, and a full-width line chart over a dotted background. Built with ReUI Frame and shadcn ChartContainer for wallet, fund, and portfolio dashboards.
Grouped air vs sea freight bar chart with hover-dimmed bars and live region readout
chart-30
Grouped bar chart comparing air vs sea freight transit days across global regions, with hover that dims other bars, a live region readout, custom tooltip, and trend badge. ReUI Frame, Badge; shadcn Chart on Recharts. Logistics shipping dashboard.
Account Balance Line Chart with Reference Line, Peak Dots and Stat Header
chart-4
Portfolio balance tracker: a stat header (balance, trend, High, Low, Change) over a recharts line chart with a date reference line and custom dots on peaks and troughs. ReUI Frame, FramePanel, shadcn ChartContainer. For finance, trading dashboards.
Finance KPI metric grid with delta badges, brand logo stacks and mini area sparklines
chart-5
Finance overview KPI grid: net worth, portfolio, investments and cashflow cards with delta badges, brand logo stacks, and mini area-chart sparklines. Uses ReUI Frame and Badge plus shadcn Chart. For wealth, fintech, crypto dashboards.
Metric-switcher line chart card with clickable KPI tabs and pulsing animated dots
chart-6
Platform analytics card where four KPI tabs (orders, response, revenue, users) with percent-change badges switch a single dashed line series. ReUI Frame, Badge, shadcn Button, ChartContainer, recharts LineChart. Metrics dashboard, trend chart.
Two metric panels with semicircular segmented arc gauges and reviewer avatar stacks
chart-7
Side-by-side metric cards showing uptime and code coverage as SVG segmented arc gauges with status label, value, and overlapping reviewer avatars. ReUI Frame, shadcn Avatar group, Button. KPI dashboard, gauge widget.
Three-column KPI metric row with radial segmented gauges and trend indicators
chart-8
Stat card row for API and ops monitoring: each metric pairs a segmented radial gauge with a value, unit, and up or down trend delta. Built on ReUI Frame and FramePanel with shadcn Button. Use for dashboard KPI strips, metrics overview, and stats.
Capital Inflows fund breakdown card with segmented distribution bar and range filter
chart-9
Fund inflow card: compact total with success trend Badge, a segmented distribution bar of each fund's share, and a logo, name, capital-in list. Top 3 to All filter via Select. ReUI Frame, Badge, shadcn Select. For treasury dashboards.
Multi-Step Checkout with Stepper Progress and Sticky Order Summary
checkout-1
Four-step purchase flow for contact, address, delivery speed, and card/PayPal/Apple Pay payment, with promo code, validation, and a sticky order summary. Uses ReUI Stepper, Badge, Alert; shadcn Combobox, RadioGroup. For cart, order, checkout pages.
Multi-step checkout form with stepper and sticky order summary
checkout-2
Four-step checkout (contact, delivery, payment, review) with order summary, promo codes, saved addresses, and card, PayPal, or Apple Pay payment. ReUI Stepper, Badge, Alert; shadcn Card, RadioGroup, Combobox. For e-commerce checkout and payment pages
Multi-step AI token credit checkout with stepper and auto top-up controls
checkout-3
Three-step wizard to buy prepaid AI token credits: pick a provider, choose a bundle with auto top-up and usage alerts, then pay. ReUI Stepper, Frame, Alert, Badge; shadcn RadioGroup, Field, Input, Switch. Credit top-up, token billing, AI marketplace.
Two-pane express checkout with saved details and order summary rail
checkout-4
Express checkout with saved contact, address, and card review rows, a CVV security field, and a collapsible new-card form beside a live order summary. ReUI Badge; shadcn Card, Button, Field, InputGroup, Separator. Payment, order review.
Four-step ecommerce checkout with stepper and order summary sidebar
checkout-5
Four-step ecommerce checkout (contact, delivery, payment, review) with animated stepper, saved addresses, delivery and payment options, and promo codes. ReUI Frame, Stepper, Badge; shadcn Button, Combobox, RadioGroup. Use for: payment flow, checkout.
Two-column checkout with order summary and payment form
checkout-6
Ecommerce checkout with order summary and payment form. Product list with totals, shipping details, card input with Apple Pay button and card logos. Uses ReUI Badge; shadcn Button, Card, Checkbox, Field, Input, Item, Select, Separator, Tooltip.
Multi-step checkout with stepper navigation and live order summary
checkout-7
Stepper-driven checkout for contact, shipping, delivery method, and payment, plus promo code discount, tax, and a live order summary. ReUI Stepper, Badge, Alert; shadcn RadioGroup, Select, Input, Button. For checkout page, payment, order review.
Side-by-side product comparison table with grouped specs and sticky labels
comparison-1
Compare products column by column with grouped feature rows, star ratings, hint tooltips, badges, pricing, and removable columns over a sticky-label scroll area. ReUI Badge; shadcn Button, Tooltip, Scroll Area. Specs table, product picker.
Two-Product Comparison with Auto Winner Indicators
comparison-2
Side-by-side product comparison with swappable selector cards, multi-group feature table, and automatic winner highlighting. ReUI Badge; shadcn Button, Select, Tooltip. Perfect for purchase decisions, ecommerce comparison pages, product spec lookups.
Editor's pick comparison cards with ratings, feature checklist and add-to-cart
comparison-3
Three recommendation cards labeled best value, editor's choice and top premium, each with a badge, star rating, price, feature checklist, key specs and add-to-cart. ReUI Badge; shadcn Button, Item. For product picks, comparison, buying guides.
Ranked product scorecard carousel with per-dimension score bars
comparison-4
Carousel paging six products 3-up, ranked by overall 0-10 score across five dimensions with best-in-class bar highlights, top-pick ribbon, star ratings, and add-to-cart. ReUI Badge; shadcn Carousel, Button. Product comparison, buying guide, rankings.
Product Comparison with Focused Hero Card and Swappable Alternatives
comparison-5
Compare a focal product against alternatives in a hero card plus stacked rivals showing price deltas, star ratings, and feature checklists; tap Switch to swap the hero. ReUI Badge, shadcn Button. For product, comparison, and buying-guide pages.
Interactive Product Comparison Builder with Live Spec Panel
comparison-6
Catalog grid with compare toggles and live 4-slot comparison panel displaying specs side-by-side with automatic winner highlighting. Uses ReUI Badge and shadcn Button. Ideal for product comparison, feature comparison, and product selection pages.
Centered single-email contact card with framed mail row and full-width email action button
contact-1
Centered contact section with one direct-email path instead of a form: eyebrow, heading, a framed mail-icon row, and a full-width outline button showing the support email. Uses ReUI Frame, shadcn Item and Button. For contact us and support pages.
Split contact card with project intake form and abstract SVG scope panel
contact-2
Two-column Card pairing a project intake form (Project Type and Timeline Selects, budget InputGroup with $ addon, Textarea, Button) with a gradient SVG panel of mailto and tel Item links. For agency, studio, or SaaS quote and project-brief pages.
Frameless split contact form with topic Select and image-backed Card panel of email and phone links
contact-3
Split contact-us section: frameless form (Name, Email, topic Select, Subject, Textarea) beside an image-backed Card of email and phone links. Field, Input, Select, Textarea, Button, Card, Item. Contact page, support form, sales inquiry, lead capture.
Contact section with global office columns ordered west to east as a follow-the-sun timezone band
contact-4
Form-free contact band: three office columns split by dividers, each with city, postal address, UTC offset, business hours, and a directions link, plus an email and CTA button. Uses shadcn Button and Separator. For contact us, our offices, find us.
Two-column contact Card pairing a tinted contact-details panel with a short project inquiry form
contact-5
Framed Card with a tinted left details panel (email, response time, studio location) beside a right project form. ReUI Card, Field, Input, Textarea, Button. For contact us, get in touch, start a project, sales inquiry, lead capture.
Channel-first contact section with clickable Frame panels for chat, email, and GitHub community
contact-6
Channel-first contact section: three clickable Frame panels (Live Chat, Email Us, GitHub Community) over a muted docs and FAQ card. ReUI Frame, FramePanel; shadcn Card, Item, Button. Contact us, get in touch, support channels page.
Split promo hero with copyable coupon code, expiry, and campaign image
coupon-1
Two-column sale promo: eyebrow badge, headline, dashed promo-code panel with copy-to-clipboard button, fine-print terms, CTA, and image. ReUI Badge; shadcn Card, Button, Item. For discount banners, seasonal sales, promo landing pages.
Category-filterable coupon grid with one-click copy promo codes
coupon-2
Filterable promotions grid of discount cards showing min spend, expiry, status badge, and a copy-code button with copied feedback. ReUI Frame, Badge; shadcn Button. For sales, deals, loyalty, and discount pages.
Hero coupon banner with copyable code and full-bleed image
coupon-3
Split-panel promo hero with member badge, headline, copyable code, time limit indicator, fine print, and CTA paired with full-bleed image. ReUI Badge, Frame; shadcn Button, Item. Loyalty offers, early access, seasonal sales.
Coupon card with copyable promo code and discount offer terms
coupon-4
Promotional offer card with one-click copyable promo code, discount headline, eyebrow badge, expiry and minimum-spend meta, fine-print checklist, and CTA. ReUI Badge; shadcn Card, Button, Item. For coupon pages, member offers, discount promos.
Full-width promo announcement bar with copyable discount code
coupon-5
Dismissible top banner announcing an offer with a dashed promo code chip, copy-to-clipboard button with copied feedback, and a restore action. Uses shadcn Button. For sale bars, free-shipping notices, discount codes, store promotions.
Full-width dark promo bar with inline copyable discount code chip
coupon-6
Dark full-width announcement strip with offer headline, dashed promo code chip, copy-to-clipboard button with copied feedback, and dismiss control. Built with shadcn Button. For flash sales, discount campaigns, promo banners, sale alerts.
Centered newsletter signup CTA with mail-prefixed email input and avatar-stack subscriber proof
cta-1
Centered newsletter CTA: badge eyebrow, headline, lede, a mail-prefixed email field with Subscribe button, and an overlapping avatar stack with subscriber count. ReUI Badge, shadcn InputGroup, Avatar, Button. Email capture, mailing-list opt-in.
Split CTA card with image media panel, badge eyebrow, dual link buttons, and feature trust strip
cta-2
Two-column marketing CTA pairing copy with an image media panel on a radial dot-grid backdrop. Badge eyebrow, headline, two icon link Buttons, and a feature strip. ReUI Badge, shadcn Card, Button, Item. Landing CTA, get-started banner, product promo.
Centered Frame CTA with animated grid background, badge eyebrow, and single email capture form
cta-3
Compact centered email-capture CTA: a ReUI Frame and FramePanel surface over an animated motion/react SVG grid, with a Badge eyebrow, h2 heading, lede, and an inline shadcn Input plus Button. For waitlist, signup, lead-capture, and launch sections.
Centered marketing CTA with badge eyebrow, framed three-column proof grid, and dual link buttons
cta-4
Centered conversion CTA: Badge eyebrow, heading, lede above a ReUI Frame three-column FramePanel proof grid of bordered Item icon tiles, then primary and outline link Buttons. Landing, pricing, product closer; feature grid, dual button CTA.
Full-width aurora-gradient CTA banner with a two-line headline and one rounded-full pill button
cta-5
Full-bleed single-message conversion band: one bold two-line headline and a single rounded-full action over a static OKLCH aurora gradient. Built on shadcn Card and Button. For closing CTA sections, hero banners, sign up and get-started callouts.
Dark violet CTA banner with animated neon sine-wave line-stream backdrop and one rounded-full button
cta-6
Closing CTA banner: two-line heading, supporting line, and one rounded-full anchor button on a deep violet surface lit by an animated, looping neon line-stream. Built on shadcn Card and Button. For a final conversion band or dark hero section.
Operations dashboard with KPI stat cards, capacity charts, and a filterable exception data grid
dashboard-1
Fulfillment control center: metric cards, shift performance, capacity allocation tabs, a donut flow chart, and a searchable paginated exception queue. Uses ReUI Frame, Badge, DataGrid plus Tabs, Select, Progress, breadcrumb, and a date-range picker.
Operations Dashboard with Sparkline Metric Cards and Searchable Module Data Grid
dashboard-2
Operations console: sticky navbar with team presence and invite, three area-chart metric cards, and a paginated module DataGrid with progress rings, search, sort, and status filters. ReUI DataGrid, Badge; shadcn Card, Avatar, Popover, DropdownMenu.
Project delivery dashboard with tabbed header and weekly per-person worklog timesheet grid
dashboard-3
Delivery workspace: tabbed header with breadcrumb and collaborator avatars, account summary cards, a filterable weekly worklog timesheet DataGrid with week navigation, integration cards and Empty tab states. ReUI Frame, DataGrid, Badge; shadcn Tabs.
Voice Agent Call Analytics Dashboard with Tabbed Metric Switcher and Composed Area Chart
dashboard-4
Call analytics overview for voice AI ops: six-metric tab switcher (calls, duration, cost, LLM cost) over a recharts area-line chart, ranked agent bars, and integration status list. ReUI Frame, Badge with shadcn Button, Select, Chart, Item.
Edge Security Telemetry Dashboard with KPI Sparkline Tiles, Threat Charts and Node Load Bars
dashboard-5
Security ops dashboard: 4 KPI tiles with SVG sparklines, threat-vector and network-flow charts, per-node cluster load bars, active threat progress lanes, date-range picker. ReUI Badge, shadcn Card, Chart, Breadcrumb. SOC, NOC, monitoring.
Field Workforce Coverage Dashboard with Crew Table, Action Queue, and Supply vs Forecast Chart
dashboard-6
Workforce ops dashboard for shift coverage: metric tiles, a crew Table with coverage progress bars and status, an action queue, and a stacked supply vs forecast ComposedChart. Uses ReUI Frame, Badge with shadcn Table, Avatar, Item, Chart, Breadcrumb.
Retail revenue dashboard with KPI sparkline cards, stacked sales charts, and a sortable order queue
dashboard-7
Commerce revenue dashboard: 4 KPI cards with sparklines and trend deltas, a stacked area revenue chart, a channel-mix bar chart, and a searchable, paginated order queue with fulfillment bars. ReUI Frame, Badge, DataGrid; shadcn Chart and Calendar.
Creator royalty payout dashboard with sweep-lane payout control and a sortable ledger DataGrid
dashboard-8
Creator finance desk to clear royalties: command band with claimable balance, receipts vs buffer area chart, payout buffer progress and sweep lanes, plus a searchable ledger. ReUI Frame, Badge, DataGrid; shadcn Calendar, Select, DropdownMenu, Chart.
Customer CRM data grid with avatar rows, balance trends, and row actions menu
data-grid-base-1
Customer table for CRM and admin dashboards: search, status filter, avatar rows, balance trend tooltips, sortable resizable columns, pagination, and a row actions menu with delete confirm. ReUI DataGrid, Frame, Badge plus shadcn Avatar, DropdownMenu.
CRM contacts data grid with lead scoring, pinned rows, and a faceted filter builder
data-grid-base-2
Contacts table for a CRM or sales pipeline: pinned rows, a multi-field Filters builder, lead-score Progress bars, sparklines, status and category Badges, and column show/hide/resize/reorder. ReUI DataGrid, Filters, Frame, Badge, shadcn Avatar.
CRM sales opportunities data grid with pinned priority rows and faceted pipeline filters
data-grid-base-3
CRM deal pipeline table: pin top opportunities, filter by owner, stage, industry and alerts, sortable columns, circular progress rings, alert tooltips and a row actions menu. Uses ReUI DataGrid, Filters, Frame, Badge, Avatar, DropdownMenu.
Weekly team timesheet data grid with per-day hours and billable target tracking
data-grid-base-4
People rows plus seven day cells of logged hours with progress bars, and a weekly Total with target-coverage. Team, tracked-time, and billable Select filters, a Calendar week navigator, pagination. ReUI DataGrid, Frame; shadcn Avatar, Tooltip.
Support ticket queue data grid with SLA countdown, status filters, and bulk owner assignment
data-grid-base-5
Support ticket queue table in a Card: search, queue and multi-status filters, bulk assign-owner/status bar, SLA countdown cells, priority badges, close-ticket dialog. ReUI DataGrid, Badge; shadcn Card, Avatar, Select, Popover. Help desk, ticketing.
Members data grid with avatar rows, tabbed role and billing filters, and hover actions
data-grid-base-6
Team members table for admin and settings pages: avatar cells, billing status dots, search, a tabbed Role/Billing/Auth filter menu, and hover view, edit, delete actions. ReUI DataGrid, DataGridPagination, Badge with shadcn Avatar, DropdownMenu, Tabs.
Modules data grid with circular progress rings, status badges, and row actions
data-grid-base-7
Project modules table with per-row circular progress ring, task counts, date window, and status badges. Search, sort, status-filter, pagination, and row actions. ReUI DataGrid and Badge with shadcn DropdownMenu and InputGroup. For module manager.
Workspace permissions data grid with tab-swapped scope columns and per-cell access toggles
data-grid-columns-1
Access review matrix whose columns swap per General, Tags, and Permissions tab, each scope a Switch toggle cell with row pinning, sorting, role filter, and search. Uses ReUI DataGrid, Frame, Tabs, Switch, Avatar. For RBAC admin, roles, team access.
Course Catalog Data Grid with Settings Popover for Density and Column Visibility
data-grid-columns-2
Course catalog table with thumbnail rows, category Badge, star Rating, assignee AvatarGroup, and completion rings. Status Tabs, category Select, search, plus a Popover for density, resizable and movable columns, and column visibility. LMS admin grid.
Work queue data grid with table and card view toggle and column display controls
data-grid-columns-3
Work queue task tracker with tabs, table/card view switch, and a Display popover for density, sticky header, resizable and movable columns, and toggled properties. Filter row, sorting, pagination. ReUI DataGrid, Filters, Badge plus shadcn Card, Tabs.
Members directory data grid with toggleable display columns and view settings popover
data-grid-columns-4
Member directory table for admin and people pages. A settings popover toggles display columns, sets ordering, and hides paused members. Built with ReUI DataGrid, Filters, Badge, and Rating plus Avatar, Popover, Switch, and a row-actions DropdownMenu.
Sprint backlog data grid with drag handle row reordering and live priority rank
data-grid-drag-drop-1
Drag-to-prioritize task table where reordering rewrites the rank column; row handles, move-to-top/bottom and remove menu, reset, empty state. ReUI DataGrid, Frame, Badge; shadcn Avatar, DropdownMenu. Backlog, sprint, priority queue.
Routing rules data grid with drag-to-reorder priority and per-row enable switches
data-grid-drag-drop-2
First-match-wins rule list where dragging a row sets precedence. Drag-drop rows, per-row Switch toggles, menu to move top/bottom or delete, reset, empty state. ReUI DataGrid, Badge; shadcn Card, DropdownMenu. For automations, routing config, rules.
Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
data-grid-drag-drop-3
Warehouse wave dispatch board with draggable, resizable columns, layout preset buttons (Dispatch, Dock, Risk), reset, and a live numbered review-order strip. ReUI DataGrid, Frame, Badge, Button, status pills, capacity bars.
Labels manager data grid with inline create and edit form, color picker, and drag-to-reorder rows
data-grid-editing-1
Manage project labels in a DataGrid: inline add and edit form with hex color picker Popover, drag-to-reorder rows, and delete confirmation. Uses ReUI DataGrid plus shadcn Button, Input, Field, AlertDialog, Empty. For label, tag, and taxonomy UIs.
Inline-editable product inventory data grid with per-cell validation and a dirty-state save bar
data-grid-editing-2
Edit inventory rows in place with text, number, and select cell editors, live validation, and a dirty-tracking Save / Discard bar. Search, status filter, add, duplicate, delete. ReUI DataGrid, Frame, Badge with shadcn Input, Select, Switch.
Inline-editable project intake data grid with dirty-state Save and Discard bar
data-grid-editing-3
Editable request intake table with click-to-edit text, number, and select cells, validation, search, status and priority filters, approval Switch, and unsaved-change tracking. ReUI DataGrid, Badge; shadcn Card, Input, Select, AlertDialog.
Task queue data grid with expandable parent rows that reveal nested sub-tasks inline
data-grid-expansion-1
Issue tracker / task management grid where parent tasks expand to inline sub-tasks with their own checkboxes, status and assignee. Tabs, filters, settings popover for ordering and columns. ReUI DataGrid, Filters, Frame, Badge, shadcn Tabs, Checkbox.
Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs
data-grid-expansion-2
Cash-flow grid: expandable parent lines drill into child items, Actuals/Plan/Variance tabs, Calendar month-range picker, search, plan-match and variance tooltips. For treasury, FP&A, budget, and burn dashboards. ReUI DataGrid, Frame, Badge.
Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail
data-grid-expansion-3
Release approval queue where TanStack rows expand into a rail of check cards with rating and coverage rings. Search and status filters, View Settings popover, readiness rings, approve and escalate actions. ReUI DataGrid, Badge, Rating; shadcn Card.
Billing transactions data grid with multi-field filter bar and async skeleton loading
data-grid-filtering-1
Transactions ledger grid with a Filters bar (text, searchable selects, contains/between operators), clear-all, async skeleton loading, sorting, pagination, and row actions. ReUI DataGrid, Filters, Frame, Badge. Payments, billing, fintech table.
Workflow automation library data grid with status tabs and a multi-field filter popover
data-grid-filtering-2
Automation library table with counted status tabs (Live, Needs approval, Draft, Paused) and a Filters popover for search, owner team, delivery mode and last updated. ReUI DataGrid, Frame, Filters, Rating, Badge; shadcn Tabs, Switch, DropdownMenu.
Renewals data grid with multi-field filter builder, bulk owner and stage actions
data-grid-filtering-3
Revenue-ops renewals table with a Filters builder (account, stage, risk, window, owner), a settings popover for density and column visibility, and bulk owner/stage reassign on row select. ReUI DataGrid, Filters, Badge; shadcn Card, Select, Popover.
Renewals risk data grid with multi-field filter builder and pinned at-risk accounts
data-grid-filtering-4
Customer success renewals queue: filter builder (account, owner, stage, signals, alerts), pinned at-risk rows, density and column settings, health Progress bars. ReUI DataGrid, Filters, Badge, shadcn Card, Popover, DropdownMenu, HoverCard.
Roadmap Queue Data Grid Grouped by Stage with Collapsible Category Rows
data-grid-grouping-1
Tasks grouped under expandable stage rows with owner avatars, due dates, completion rings, and signal badges. Search, signal filter, density and column toggles. ReUI DataGrid, Badge, Avatar, shadcn Popover. Roadmap, issue tracker, project board.
Account revenue grouped by region with collapsible rows and ARR subtotals
data-grid-grouping-2
Region-grouped accounts, collapsible rows, per-region ARR and weighted NRR, grand-total footer. Health filter, search, density and column toggles. ReUI DataGrid, Frame, Badge; shadcn Button, DropdownMenu, InputGroup, Popover, Select. CRM, NRR.
Patient access cohort DataGrid with switchable grouping and outcome heatmap
data-grid-grouping-3
Grouped DataGrid bucketing intake signals by area, booking strength, or hold risk. Color-graded heatmap cells, footer totals, hold-risk filter, cohort benchmark. ReUI DataGrid, Frame, Badge; shadcn Button, Separator. Intake triage, cohort analysis.
Virtualized data grid with infinite scroll and bulk row actions
data-grid-virtualization-1
Transaction table that virtualizes rows and loads on scroll. Search, sorting, filter dropdowns, column visibility, bulk export/refund. ReUI DataGrid, Frame, Badge, Filters; shadcn Button, InputGroup, Popover, Switch. Payments ledger, admin panel.
Virtualized shipment exception queue with infinite scroll
data-grid-virtualization-2
Exception queue over 8,000 virtualized rows with infinite-scroll paging, row selection, bulk assign/release, faceted filters, search, and sorting. ReUI DataGrid, Frame; shadcn Button, Separator, Tooltip. Operations dashboard, shipment tracking.
Duration picker dialog with start and end time selects plus quick preset toggles
dialog-1
Modal for choosing a time span: start and end time Selects plus quick presets (30 min to 1 day) that auto-adjust the end time. Built with ReUI Dialog, Select, ToggleGroup, Field, Tooltip, Button. Time range picker, schedule, booking duration.
Tabbed account settings dialog with sidebar rail for profile, workspace, team and billing
dialog-10
Modal account settings dialog with a 5-tab sidebar (Profile, Workspace, Team, Billing, Preferences); each scrollable panel pairs labels with avatar upload, Inputs, Selects, Switches and a verified Badge. Uses Dialog, Tabs, ScrollArea, Field.
Two-pane finance account creation dialog with live account card preview
dialog-11
Split dialog to create a finance account: account name, acct_ tag, and statement label fields beside a live-updating account card on a gradient panel. Uses ReUI Dialog, Card, Field, Input, InputGroup, Button. For payout, banking, onboarding setup.
Tabbed create-entry dialog with status, assignee, due date, priority and label comboboxes
dialog-12
Quick-create record dialog with five entry-type tabs, each a title and notes field plus shared Status, Assignee, Due date, Priority and Labels comboboxes. Uses ReUI Combobox, Tabs, Dialog, Calendar, Avatar. For task creation and new-item modals.
Full-screen create project dialog with template prefill and multi-select labels
dialog-13
Full-screen create-project form: a template dropdown prefills fields, status, assignee, due date and priority Selects with avatars and dots, plus checkbox label cards with a selected count. ReUI Badge, shadcn Dialog, Select, InputGroup, Field.
OAuth connection consent dialog with provider logo rail and radio sync-scope picker
dialog-14
App integration consent modal: paired provider logos, permission notes, and a radio-group scope selector with cancel/continue. Built with ReUI Dialog, RadioGroup, Item, Field, Button. For OAuth handoff, connect-account, grant-access flows.
Workspace invite dialog with multi-email input and role select dropdown
dialog-2
Team invite modal that parses comma or space separated emails, dedupes them, and shows a live 'Send N invites' count. Pick a role per invite. Uses ReUI Badge with shadcn Dialog, Input, Field, Select, Button.
Plan cancellation dialog with multi-select reason checkboxes, feedback textarea, and warning banner
dialog-3
Subscription offboarding dialog: warning Alert with dismiss and manage actions, a checkbox grid of reasons, a feedback Textarea, and a Cancel plan button gated until a reason is picked. ReUI Alert, shadcn Dialog, Checkbox, Tooltip. Churn flows.
Workspace launch checklist dialog with accordion sections and inline-editable fields
dialog-4
Setup dialog with accordion sections, status badges, click-to-edit field rows, and a searchable connected-apps list with Connect or Manage. ReUI Badge, shadcn Dialog, Accordion, Item, InputGroup. Workspace setup, launch checklist, settings wizard.
Wide template library dialog with category rail, live search, and selectable template cards
dialog-5
Template gallery picker dialog: fixed category rail (radio group), live search input, and selectable cards with thumbnail and badges. Uses ReUI Badge with Dialog, Input, ScrollArea, RadioGroup, Item. Starter library, template browser, asset picker.
App connection dialog with searchable integration grid and single-select checkbox cards
dialog-6
Modal to connect a workspace app: search-filtered grid of brand-logo cards with round single-select Checkbox and a footer add button disabled until a pick. Uses ReUI Dialog, InputGroup, Kbd, Item, Empty. Integrations picker, connect-app, marketplace.
Help and support hub dialog with self-serve routes plus advisor and direct-desk escalation cards
dialog-7
Support hub modal: help routes (guides, walkthroughs, feedback) above an escalation grid pairing an advisor office-hours card with an email-support desk. Uses shadcn Dialog, Item, Card, Avatar, Button and ReUI Badge. Contact support, help center.
Multi-row collaborator invite dialog with per-row email field and role select
dialog-8
Invite teammates by email with a per-row role select (Member, Contributor, Reviewer, Admin), add and remove rows, and inline email validation. Uses ReUI Dialog, Input, Field, Select, Button. Team invite modal, add members, share access.
Create project dialog with cover image upload and status, priority, assignee, and label comboboxes
dialog-9
Modal new-project form with drag-and-drop cover upload, name, key, brief fields, single-select status and priority plus multi-select assignee and label comboboxes. Dialog, Combobox, Avatar, Tooltip, Alert. Add project, create workspace.
Records empty state with stacked-cards illustration, dual primary actions, and quick-guide link rows
empty-state-1
First-run empty state for a records or workspace table: stacked-cards illustration, Connect source and Upload CSV buttons, plus a two-up Quick guides list. Built with ReUI Empty, Button, and Item. Use for zero-data, onboarding, or no results screens.
Card-wrapped empty state with section heading and horizontal media-beside-text layout
empty-state-10
Empty state inside a Card under a section heading for a template or blueprint library with no items. Horizontal media beside title, description, and two buttons. ReUI IconStack with shadcn Card, Empty, Button. For blank library or first-run views.
Section-header empty state with action button above a muted card and stacked icon illustration
empty-state-11
Empty state for a list or feed section: heading, subtext, and Add button over a muted Card holding a layered stacked-icon illustration, title, and hint. ReUI IconStack with shadcn Empty, Card, Button. For zero-data panels and intake views.
Activity exports empty state with audience, workspace, and date-range filter toolbar
empty-state-12
Export empty state: header, three dropdown filters (audience, workspace, date range), and a split Execute button with CSV, PDF, and scheduled delivery. Uses ReUI IconStack, shadcn Empty, ButtonGroup, DropdownMenu. For export no-results screens.
File sources empty state with cloud storage connector grid (Dropbox, Box, Drive, OneDrive)
empty-state-13
Empty state for linking cloud storage: header, IconStack illustration, and a responsive grid of brand-logo connect buttons (Dropbox, Box, Google Drive, OneDrive). ReUI Frame, IconStack, shadcn Empty, Separator. For integrations screens.
Organizations setup empty state with framed enable card, building icon, and tooltip help link
empty-state-14
Organizations settings empty state to enable multi-org with team members and role-based access. Framed card with stacked building icon, enable CTA, and a tooltip help link. ReUI Frame, IconStack, shadcn Empty, Button, Tooltip, Separator.
Search no-results empty state with suggestion chips and a stacked result-card illustration
empty-state-2
Workspace search zero-state: a stacked result-card illustration, paired Browse library and Refine filters actions, and a 'Try these searches' row of pill suggestion chips. Built with ReUI Empty, ButtonGroup, Button. For no-results, search hints.
Projects empty state with hero illustration, dual actions, and quick-start template list
empty-state-3
No-projects empty state for a workspace: hero illustration, New project and Explore templates buttons, and a Quick starts grid of clickable template cards. Uses ReUI Empty, Button, Item. Good for onboarding, first-run, zero-data screens.
Two-column reports empty state with icon, dual actions, and preview screenshot slot
empty-state-4
Split empty state for an empty reports or analytics workspace: icon, title, helper copy, and Add report plus View sample buttons beside a blank screenshot preview panel. Uses ReUI Card and Empty with shadcn Button.
Two-column empty state in a ReUI Frame with icon, dual actions, and a preview panel
empty-state-5
Split empty state for a no-data briefing or report view. Left column pairs an icon, title, and description with primary and outline Buttons; right column is a preview surface. Uses ReUI Frame, shadcn Empty and Button. For blank dashboards.
Team workspace onboarding empty state with two action buttons and three colored setup-step tiles
empty-state-6
Centered team workspace onboarding empty state pairing two outline action Buttons with three colored clickable setup tiles. Uses ReUI Empty and Item primitives. For workspace setup, first-run onboarding, getting-started checklist.
Workspace member invite empty state with circular icon and dual invite and copy-link buttons
empty-state-7
Centered empty state prompting the first workspace invite, with a ring-framed icon, title, description, and two CTAs (Invite members, Copy invite link). Uses ReUI Empty and Button. For team onboarding, members page, no-members placeholder.
Project settings empty state with line tabs and per-section setup prompts
empty-state-8
Settings header over line-style Tabs (project states, labels); each tab shows a left-aligned Empty with icon, title and Enable button. ReUI IconStack with shadcn Tabs, ScrollArea, Empty, Button. For settings onboarding and zero-states.
Workspace member invite empty state with layered 3D icon-stack illustration and dual invite actions
empty-state-9
Centered empty state prompting the first workspace invite, with a stacked-card icon illustration, title, supporting text, and primary Invite members plus outline Copy invite link buttons. Uses ReUI IconStack, shadcn Empty, Button.
Two-column FAQ with sticky intro, line-tab category filter, and multi-open accordion cards
faq-1
Two-column FAQ: sticky intro plus a line-variant Tabs row that filters questions by category and re-mounts a multiple-mode Accordion of bordered Cards, first answer open. ReUI Badge, shadcn Tabs, Accordion, Card, Button. For help and FAQ pages.
Centered two-column FAQ with multi-open divider accordion and a dot-grid framed support panel
faq-2
Centered two-column marketing FAQ that keeps one answer open per column. Divider-row Accordion over a dot-grid Frame support panel and outline link CTA. ReUI Badge, Frame, FramePanel, shadcn Accordion, Button. For help, support, pricing FAQ, docs.
Open no-accordion FAQ with always-visible two-column answer grid and two-CTA support row
faq-3
Open FAQ section showing every answer at once, no accordion: a hairline-divided two-column question and answer grid that stacks on mobile, plus a support row with two CTAs. Uses shadcn Button, Item, ItemMedia. For help, support, pricing FAQ, docs.
Centered single-column FAQ with help eyebrow and borderless single-open accordion
faq-4
Centered single-column FAQ: help-icon eyebrow over a shadcn Accordion of seven Q&A rows split by thin border dividers (no cards, single-open, first open), with a "Talk to the team" arrow link. For FAQ, help, support, pricing FAQ, onboarding pages.
Two-column FAQ pairing a single-open accordion card with a sticky support-CTA sidecard
faq-5
Two-column marketing FAQ: a single-open Accordion in a Card (hairline rows, first open) beside a sticky dashed support CTA card with a contact link Button and email fallback. ReUI Badge, shadcn Accordion, Card, Button. For help, support, FAQ pages.
Single-column FAQ accordion with built-in contact-support footer inside one stacked ReUI Frame tray
faq-6
One-column Q and A: a single-open Accordion above a muted footer with Read The Docs and Contact Support buttons, boxed in stacked ReUI Frame. Built on shadcn Accordion, Item, Button. For FAQ, help, support, and pricing-questions pages.
Faceted ecommerce product filter sidebar with active filter chips
filter-sidebar-1
Refine a product catalog by category and brand checkboxes with counts, a price range slider, color swatches, and size buttons, with removable active chips plus apply and reset. shadcn Card, Checkbox, Slider, Button. Shop, faceted search, listing.
Product filter sidebar with active chips, price slider, and color swatches
filter-sidebar-2
Ecommerce sidebar to refine listings by category, brand, price range, color swatches, and size, with result counts and removable filter chips. ReUI Frame; shadcn Button, Checkbox, Label, Slider, Separator. For product listing, shop, category browse.
Faceted ecommerce filter sidebar with department pills, price slider, and removable filter chips
filter-sidebar-3
Filter sidebar with department pills, category/material/brand facets, price slider, color swatches, size buttons, star rating, removable chips, and stock/sale toggles. shadcn Checkbox, Slider, Switch; ReUI Rating. For catalog and search results.
Ecommerce product filter sidebar with department pills, color swatches, and removable filter chips
filter-sidebar-4
Faceted product refinement panel with category, material, brand checkboxes, price slider, color swatches, size buttons, star ratings, quick toggles, removable chips. ReUI Frame, Rating; shadcn Checkbox, Slider, Switch. Faceted search, shop sidebar.
Slide-Out Ecommerce Product Filter Panel with Active Filter Chips
filter-sidebar-5
Slide-out filter panel for ecommerce catalogs: departments, categories, materials, brands, colors, sizes, price slider, rating tiers, in-stock toggle, facet counts, removable chips, clear-all. ReUI Badge, Rating; shadcn Sheet, Slider. Faceted search.
Collapsible ecommerce filter sidebar with accordion facets and active filter chips
filter-sidebar-6
Faceted product filter sidebar with collapsible accordion sections, price slider, color swatches, size and brand toggles, and removable active chips. ReUI Rating; shadcn Accordion, Card, Checkbox, Slider, Switch. For catalog, search, shop pages.
Ecommerce Filter Sidebar with Removable Chips and Accordion Facets
filter-sidebar-7
Ecommerce filter sidebar with removable active-filter chips, multi-open Accordion facets, per-section count Badges, price Slider, color swatches, and size options. ReUI Frame, Badge, Rating; shadcn Accordion, Slider, Switch. Shopping catalog refine.
Profile settings card form with completion badge and date-plus-time availability picker
form-1
Profile settings Card form: avatar upload, birth date and availability date-time Calendar pickers, multi-select specialty Combobox chips, visibility Select, available-to-hire Switch, completion Badge. For account settings, edit profile, preferences.
Customer onboarding intake form in a Card with labeled rows and multi-owner combobox
form-10
New-workspace setup form: company, slug, intent radios, team size, launch window, template, data source, owner chips, sample-data toggle, notes. Uses ReUI Badge, shadcn Card, Combobox, RadioGroup, Select, Switch, Textarea. Account setup wizard.
New App Launch Form with Gradient Summary Banner and Label-Control Rows
form-11
App launch form in a Card with a gradient banner that live-mirrors picks. Rows pair a brief Textarea, prefixed App URL InputGroup, name Input, and starter, source, runtime, region Selects. For deploy and project setup wizards.
Ecommerce product creation form with image upload, pricing, inventory, and collections combobox
form-12
Create product form in a Card with label-control rows: multi-image thumbnail dropzone, Select status and category, currency InputGroup pricing, SKU and stock, Switch toggles, multi-select Combobox collections. Product catalog, add product, admin.
Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups
form-2
Configure a hosted checkout: offer type, button copy, and handoff via ReUI Frame and Badge with shadcn Field rows, Select, Checkbox groups, InputGroup, Tooltip, and Button. Settings form, payment config, store admin panel.
Invoice creator form with editable line-items table and live discount, tax, and total summary
form-3
Invoice builder with customer combobox, date pickers, currency and term selects, an editable line-items table, and a live subtotal, discount, tax, and total panel. ReUI Badge with shadcn Card, Table, Combobox, Calendar. For billing and invoicing.
Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy
form-4
Auth method config page: line tabs switch Email, Phone, Password, Passkeys, Protection, and User Model panels of Switch, Select, RadioGroup, and Input rows with Pro/Beta badges, tooltips, alerts, and a save/discard toast footer.
Tabbed user profile settings form with sticky audit rail and activity heatmap
form-5
Admin profile editor with Profile, Organizations, Security tabs, a sticky audit rail of IDs and timestamps, completion Progress, and activity heatmap. ReUI Badge with shadcn Card, Field, Combobox, Switch. For account settings, member detail pages.
Business Verification Review Page with Editable Detail Sections and Dialog Forms
form-6
KYC business verification summary with read-only Frame panels for legal, public, and ownership details, each opening a Dialog edit form. ReUI Frame, Badge plus shadcn Dialog, Field, Select, Tooltip. Account review, onboarding, compliance.
Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips
form-7
Support ticket detail panel where each field edits inline with save, cancel, and async saving toasts. Status, priority, SLA, due-date, tag and owner chips. ReUI Frame, Badge with Select, Combobox, Calendar, Switch. For helpdesk and issue trackers.
API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows
form-8
API keys settings page: copy framework .env snippets, reveal, rotate, or revoke masked keys, plus a create-key dialog with scopes, owners, and expiration. ReUI Frame, Badge, Alert with Dialog, Combobox, Select, InputGroup.
Enterprise member invite form with searchable role permission tree and access guardrails
form-9
Invite teammates and assign scoped workspace roles: email combobox chips, workspace and expiry selects, member-type radios, SSO switches, and a searchable checkbox role tree with privileged badges. ReUI Badge and Tree, shadcn Card. For RBAC.
Drag-and-drop issue tracking kanban board with six status columns and per-task completion rings
kanban-board-1
Bug tracking board: drag tasks across six status columns, reorder columns, with priority, signal dots, owner avatars, due dates, and SVG completion rings. ReUI Kanban, Badge; shadcn Card, Avatar, Button. Sprint board, backlog, task tracker.
Access review kanban board with risk badges, star confidence rating, and reviewer avatars
kanban-board-10
IAM access certification board with draggable cards and columns across Intake, Owner Review, Risk, Exception, Removal, Certified. Risk-tiered cards show request IDs and avatars. ReUI Kanban, Badge, Rating with shadcn Card. Access governance, audit.
Workflow kanban board with collapsible status columns and draggable cards plus columns
kanban-board-2
Drag-and-drop kanban for project and CRM workflows: 8 status columns collapse to vertical rails, reorderable cards and columns, count badges, deal value and assignee avatars. Uses ReUI Kanban and Badge with shadcn Card, Button, Avatar.
Sales pipeline kanban board with draggable deal cards and reorderable stages
kanban-board-3
CRM sales pipeline board with drag-and-drop deals across six stages. Deal cards show company logo, value, next step, owner avatar, star rating, and attachment/comment counts. ReUI Kanban, Badge, Rating, shadcn Card, Avatar, Button.
Feature roadmap kanban board with vote-weighted cards across six delivery stages
kanban-board-4
Drag-and-drop product roadmap board with six status columns and reorderable cards showing votes, vote-trend arrows, progress bars, and impact or ARR. Feature voting, planning board, backlog. ReUI Kanban, Frame, Badge with Progress, Button.
Workflow status kanban board with collapsible column rails and per-task progress rings
kanban-board-5
Drag-and-drop status workflow kanban: reorder cards and columns, collapse columns to vertical rails, with progress rings, owner avatars, and status badges. ReUI Kanban, Badge plus shadcn Card, Item, Avatar. Task board, project tracker, sprint board.
Support escalation kanban board with SLA timer chips, priority badges, and draggable columns
kanban-board-6
Help-desk board with six SLA-state columns. Drag-and-drop ticket cards and reorderable columns show SLA countdown chips, priority badges, and assignee avatars. ReUI Kanban, Badge; shadcn Card, Item, Avatar. For support queue and ticket triage tools.
Customer renewals risk kanban board with ARR, health score, and risk-tier account cards
kanban-board-7
Drag-and-drop renewals board, six risk stages, account cards with ARR, renewal date, days left, color-coded health bar, owner, and Critical/Warning/Clear status. CSM pipeline, churn risk. ReUI Kanban, Badge; shadcn Card, Progress, Avatar.
Release readiness kanban board with risk badges, checklist progress, and drag-and-drop change cards
kanban-board-8
Six-column pipeline (Intake to Shipped) with draggable change cards showing risk badge, service, environment, owner avatar, launch window, and checklist progress. ReUI Kanban, Frame, Badge plus shadcn Item, Avatar, Progress. Deploy and release board.
Recruiting pipeline kanban board with candidate match scores and scorecard status
kanban-board-9
Applicant tracking board: six draggable pipeline stages from Sourced to Offer, candidate cards with match-score progress bars, scorecard badges, and risk flags. ReUI Kanban, Frame, Badge, Progress, Avatar, Button for ATS and hiring boards.
Order Metrics List Card with Icon Tiles and Up Down Trend Badges
list-1
Compact KPI metric list: framed icon tile, large value, colored up/down trend badge, and open-details button per divided row. ReUI Frame, Badge, shadcn Item, Button, Separator. Stats summary, dashboard, finance overview.
Recent Investments Card with Searchable Gain-Loss Table and Company Logos
list-10
Investments card: header with ⌘K search input, fixed table of company logo, name, date, sector, and green or red value change. ReUI Frame, FramePanel; shadcn Table, InputGroup, Item, Kbd.
Top movers list table with company logos, status badges, and up/down trend values
list-11
Top movers leaderboard table: company rows with logo and location, status badges (Active, New, On Hold), and a trend column with gain/loss value and up/down arrow. Header search with Cmd-K hint. ReUI Frame, Badge, shadcn Table, InputGroup, Kbd.
Capital inflows fund leaderboard list with logo badges and a range filter select
list-2
Ranked fund inflow rows with a colored brand-logo badge, name, and Capital In amount, plus a Select to switch Top 3 / Top 5 / All. ReUI Frame, shadcn Select, Item, Separator. For leaderboards, top contributors, investor summary widgets.
Capital Inflows Card with Period Tabs and Ranked Fund List Showing Amount and Share
list-3
Capital inflows widget switching ranked fund rows by period tabs (Weekly, All Time); each row shows logo, name, dollar amount, percentage share. ReUI Frame, shadcn Tabs, Tooltip, Separator. For finance dashboards, top contributors, leaderboards.
Crypto Portfolio Snapshot List with Period Tabs and Per-Asset Trend Badges
list-4
Crypto holdings card switching between Weekly and All Time tabs, listing coins with logo, price, up or down trend badge, value and holdings. ReUI Frame, Badge with shadcn Tabs, Button, Separator. Portfolio, watchlist, asset tracker.
Crypto Transactions List with Color-Coded Credit and Debit Amounts
list-5
Compact crypto transaction history list with directional credit/debit icons, title, date, and color-coded amounts. Uses ReUI Frame plus shadcn Item, Tabs, Separator. For wallet activity feeds and finance dashboards.
Crypto transaction list card with period tabs and dual-token swap amounts
list-6
Wallet activity card listing received, sent, swapped, and failed crypto transfers with token logos, truncated addresses, and color-coded amounts. Weekly and All Time tabs plus a View All footer. Uses ReUI Frame with Tabs, Item, Separator, Button.
Wallet Transactions List with Period Tabs and Color-Coded Category Icons
list-7
Transaction card with Weekly and All Time tabs; each row pairs a colored category icon with title, date, and a signed amount tinted green for credits or red for debits. ReUI Frame, shadcn Tabs, Item, Button. For wallet, banking, fintech feeds.
Integrations directory list with brand logos and per-row Connect buttons
list-8
Integrations directory card listing apps with brand logos, name, description, and a per-row Connect button, plus a See All footer link. ReUI Frame with shadcn Button and Separator. App marketplace, connected accounts, settings.
Manual integrations picker list with icon tiles, per-row add buttons, and Browse More footer
list-9
Integrations picker list with icon tiles, name plus truncated description per row, plus-button add actions, dashed dividers, and a Browse More footer. Uses ReUI Frame with shadcn Item, Button, Separator.
Project workspace navbar with breadcrumb, line tabs, and a collaborator avatar stack
navbar-1
Project workspace header: breadcrumb trail, line tabs with a count Badge, search/star/more actions, an expanding Create New button, and a collaborator Avatar stack. Uses ReUI Badge, shadcn Tabs, Breadcrumb, Avatar, DropdownMenu, Button.
API developer portal navbar with service switcher, HTTP request bar, and account menu
navbar-10
Top bar for an API console or dev portal: brand, service switcher (OpenAI, Stripe, Supabase logos), an inline HTTP method Select with endpoint Input and Send button, and an avatar menu with theme toggle. Uses ButtonGroup, DropdownMenu, Avatar.
Design system manager top navbar with center section tabs, version badge, and sync source switcher
navbar-11
DesignOps app header: brand mark, version Badge, centered Tabs (Patterns, Tokens, Icons, Motion), sync-source DropdownMenu (shadcn, Cursor, Paper), and avatar menu with light/dark/system theme toggle. For design-system, tokens, and admin toolbars.
Marketing navbar with icon mega-menu dropdowns and a sliding-arrow Get Started button
navbar-12
Marketing top bar with two-column mega-menu dropdowns for Product and Company, a Pricing link, and a Get Started button with a hover slide-in arrow. Built on ReUI NavigationMenu, Item, Separator, Button. Use for SaaS site header or landing page nav.
Compact editor action bar navbar with close button, document title, and submit action
navbar-13
Focused-mode bar for an invoice or document editor: close (X) button, vertical Separator, truncating title, a preview collapse toggle, and a submit button that confirms after click. Uses ReUI Button and Separator. For editor toolbar, draft bar.
Sticky workspace navbar with breadcrumb trail, team presence avatars, and filter and sort menus
navbar-2
Slim sticky app bar: breadcrumb trail, team avatar group with invite popover, and filter, sort, and overflow dropdown menus. ReUI Breadcrumb, AvatarGroup, Popover, DropdownMenu, Button. For workspace headers and project toolbars.
Developer platform top navbar with breadcrumb org, project and environment switchers
navbar-3
Header for dev tools and PaaS dashboards: breadcrumb of organization, project and color-dotted environment switchers, docs and settings menus, Upgrade button, avatar menu with light/dark/system theme toggle. ReUI Breadcrumb, DropdownMenu, Avatar.
Admin console top navbar with centered Cmd+K command search and a notifications popover feed
navbar-4
Admin top bar: brand, centered Cmd+K command search Dialog with Kbd hint, notifications Popover feed (avatars, actions, progress, ratings) and a user DropdownMenu with theme toggle. ReUI Badge, Rating.
Compact workflow editor navbar with active toggle, Test Run action, and history
navbar-5
Slim sticky toolbar for a workflow or automation builder: back link, active/inactive Switch, run-history button, Test Run action, and a more-options DropdownMenu (Export JSON, Duplicate, Share, Delete). Uses Button, Switch, Separator, DropdownMenu.
Two-row analytics dashboard navbar with date range picker, compare toggle, and command-K search
navbar-6
Sticky analytics toolbar with breadcrumb title, calendar date range picker, compare toggle, auto-refresh select, share, export/embed dropdown, and command-K search dialog. ReUI Breadcrumb, Popover, Calendar, Select, DropdownMenu, Dialog, Kbd.
CMS editor navbar with co-presence avatars and a split Publish button
navbar-7
Sticky editor toolbar for content apps: back link and breadcrumb, AvatarGroup co-presence, Preview, and a ButtonGroup split Publish with Schedule and Save as draft, plus a more-actions DropdownMenu (duplicate, history, archive, delete).
AI agent marketplace navbar with category filter pills, Deploy CTA, and notifications popover
navbar-8
Sticky AI agent marketplace navbar: centered category filter pills, Deploy CTA, notifications popover (avatar groups, star rating, progress, actions), and avatar dropdown with theme toggle. ReUI Badge, Rating, shadcn ButtonGroup, Popover.
Code editor app header with repo path breadcrumb and branch dropdown selector
navbar-9
Sticky IDE-style navbar for a code collaboration tool: brand tile, org/repo Breadcrumb path, branch-picker DropdownMenu with deploy targets, and Share plus Run Button actions. ReUI Breadcrumb, DropdownMenu, Button, Item, Separator.
Six-step workspace onboarding wizard with stepper progress and a live inbox preview pane
onboarding-1
Multi-step account and workspace setup flow: profile, role, discovery source, workspace, goals, invites, then a success state, with a synced product preview. ReUI Stepper plus shadcn Card, Combobox, RadioGroup, Select, Switch, Field.
Six-step workspace onboarding wizard with left sidebar vertical stepper and animated success state
onboarding-2
Six-step setup wizard (profile, role, source, workspace, goals, invites) with a clickable sidebar stepper, animated transitions, and a success screen. ReUI Frame and Stepper plus shadcn Field, Combobox, RadioGroup, Switch. Onboarding, signup wizard.
Split-screen workspace onboarding wizard with vertical stepper sidebar and animated dot-sphere panel
onboarding-3
Six-step signup: profile, role, source, workspace, goals, invites, plus success screen. Dark sidebar pairs a vertical ReUI Stepper with animated dot-sphere canvas. Field, Combobox, RadioGroup, Checkbox, Switch, Select. Setup wizard, account creation.
Six-step workspace onboarding wizard with top progress bar and success screen
onboarding-4
Multi-step flow to create a team workspace: profile with avatar upload, role and goal pickers, team size, teammate invites, animated top progress bar and ready screen. Uses ReUI Frame, Stepper, Combobox, Select, Field. Onboarding wizard, setup flow.
Multi-step workspace onboarding dialog with dot stepper, animated steps, and success screen
onboarding-5
Six-step modal wizard (profile, role, workspace, goals, teammate invites) with clickable dot stepper, animated steps, and a success screen. ReUI Dialog, Field, Combobox, Select, RadioGroup, Switch, Avatar upload, Button. For signup flow, get started.
Eight-step workspace onboarding wizard with progress stepper, AI agent picker, copyable API setup
onboarding-6
Eight-step workspace onboarding wizard ending in AI agent selection and API key setup with copyable terminal commands. Profile, role, goals, and invite steps. ReUI Stepper, Frame plus shadcn Combobox, RadioGroup, Select. Account setup flow.
Six-step workspace onboarding wizard with top progress bar and screenshot carousel rail
onboarding-7
Multi-step signup flow: profile, role, source, workspace, goals, invites, with a top Stepper progress bar, animated stacked-screenshot rail, and a success state. ReUI Stepper, Badge; shadcn Field, Combobox, RadioGroup, Select, Switch.
Dark 8-step workspace onboarding wizard with progress bar, agent picker, and CLI setup checklist
onboarding-8
Full-page dark onboarding flow: profile, role, workspace, goals, teammate invites, AI agent pick, and Codex CLI setup with a success screen. Animated progress bar, copyable commands. ReUI Stepper, Frame, Badge plus Combobox, Select, RadioGroup.
Six-step workspace onboarding wizard with marketing hero and animated progress bar
onboarding-9
Profile, role, source, workspace, goals, and invite steps beside a marketing hero, with photo upload, goal pickers, timezone Combobox, success state. ReUI Stepper plus shadcn Card, Select, RadioGroup, Switch. First-run setup, getting-started flow.
Apparel Product Grid with Wishlist Toggle and Discount Badges
product-card-1
Centered breadcrumb header over a responsive product grid with image hover, wishlist toggle, content and discount badges, and compare-at pricing. ReUI Badge; shadcn Breadcrumb, Button. Shop, catalog, gallery, ecommerce listing.
Fashion Studio Product Grid with Hover-Reveal Details Panel
product-card-10
Studio-shot fashion product grid where cards reveal a details panel on hover with categories, sizes, pricing, and New/Trending badges. ReUI Badge; shadcn Card, Button, Breadcrumb. For apparel catalogs, lookbooks, storefronts.
Ecommerce product grid with filters, sort, color swatches, and wishlist
product-card-2
Shoppable catalog with category, availability, sale, and color filters, price/newest/featured sort, per-card color swatches with image variants, and wishlist toggle. shadcn Card, Button, Select, Switch; ReUI Badge. Storefronts, apparel, shop pages.
Quick-buy product card with image carousel, sale pricing, and size picker
product-card-3
Horizontal quick-buy ecommerce card with image carousel, low-stock badge, strikethrough sale price, size grid, and add-to-bag plus wishlist actions. ReUI Badge; shadcn Button, Card, Carousel, Checkbox, Field, Tooltip. Shop, store, product page.
Similar products carousel of product cards with wishlist, discount and stock badges
product-card-4
Shoppable carousel of product cards with wishlist toggle, percent-off discount and low-stock urgency badges, page counter, and prev/next controls. Uses ReUI Badge; shadcn Card, Carousel, Button. For related products, recommendations, and cross-sell.
Split Two-Column Product Card with Finish Selector and Wishlist
product-card-5
Wide product card: left panel with stock badge, rating, discounted price, finish picker, add-to-bag and wishlist; right panel a masked image with hover zoom. ReUI Badge, Rating; shadcn Card, Button, Checkbox, Field, Tooltip. For product, store pages.
Masonry product gallery with hover-reveal detail overlay and filter or sort popover toolbar
product-card-6
Image-led shop page: masonry columns of mixed-ratio photos revealing a product detail card on hover or focus, with discount badges, wishlist heart toggle, and a popover filter and sort bar. ReUI Badge, shadcn Popover, Select, Switch.
Latest Products Carousel with Wishlist Toggle and Hover Add-to-Cart
product-card-7
Scrollable product carousel paginating four cards per page with hover image zoom, wishlist toggle, hover add-to-cart, status and discount badges, and arrival windows. ReUI Badge; shadcn Carousel, Card, Button. For store listings and new arrivals.
Filterable e-commerce product grid with sort, ratings, and wishlist
product-card-8
Product listing page with breadcrumb header, a filter popover (category, status, sale-only), sort menu, star ratings, and wishlist toggles. Uses ReUI Badge, Rating; shadcn Breadcrumb, Button, Field, Popover, Select, Switch. For shop, catalog pages.
Four-Column Product Grid with Breadcrumb Header and Star Ratings
product-card-9
Browsable ecommerce product grid with breadcrumb nav, category tags, star ratings, review counts, compare-at pricing, status badges, and add-to-cart buttons. ReUI Badge, Rating; shadcn Breadcrumb, Button. Catalog, shop page, marketplace.
Ecommerce product detail page with image gallery, variant picker, and reviews
product-detail-1
Full product page with breadcrumb nav, carousel gallery, buy box with color and size variants, tabbed specs, shipping, reviews, and related items. ReUI Badge, Rating; shadcn Carousel, Tabs, Table, Card, Button. For storefront, catalog, retail PDP.
Editorial product detail page with filmstrip gallery, story chapters, and reviews
product-detail-2
Full-page showcase: filmstrip gallery, sticky buy box with swatches, rating and discount badge, narrative story chapters, grouped spec tables, and an autoplaying review carousel. ReUI Badge, Rating; shadcn Carousel, Card, Button. Product page, PDP.
Product Detail Page with Sticky Buy Box, Variant Pickers, and Reviews
product-detail-3
Ecommerce product page with stacked gallery, sticky buy box (color and connector pickers, quantity stepper), overview, specs table, rating breakdown, and related items. ReUI Badge, Rating; shadcn Breadcrumb, ButtonGroup, Table. Product page, PDP.
Ebook product detail page with Look Inside gallery, edition format picker, and chapter contents
product-detail-4
Editorial book PDP for ebook, audiobook, and bundle editions: captioned Look Inside gallery, sticky buy box with format picker, drop-cap sample, three-part chapter TOC, spec cards, autoplay review carousel. ReUI Rating, Badge, shadcn Card, Carousel.
Compact Product Detail Page with Sticky Thumbnail Gallery and Dense Buy Box
product-detail-5
Ecommerce product page: sticky thumbnail gallery, dense buy box with color and size pickers, quantity stepper, Add to Cart, Buy Now, wishlist, specs, rating breakdown and review carousel. ReUI Rating, Badge; shadcn Button, Carousel, Progress.
Editorial Single-Column Product Detail Page with Chapter-Numbered Story Body and Centered Buy Box
product-detail-6
Magazine-style PDP in a narrow centered column: gallery, price, color and size pickers, quantity stepper, Add To Cart, a chapter-numbered story body, specs table, and quote-carousel reviews. ReUI Rating, Badge with shadcn Item, ButtonGroup, Carousel.
Ecommerce Product Grid with Color Swatches, Hover Wishlist, and Sale Price Badges
product-grid-1
Responsive 2x2 product collection grid: square media with hover zoom, hover-revealed wishlist toggle, color swatches that swap the image, and strikethrough compare-at price. ReUI Badge, shadcn Card, Button, Item. For shop, catalog, store listing.
Frame-Panel Product Card Grid with Color Swatch Image Swap and Wishlist Toggle
product-grid-2
Responsive 2-column product collection where each tile is a ReUI Frame split into stacked FramePanels for media and content. Color swatches swap the hero image, a hover wishlist Button toggles, ReUI Badge marks sales. Shop, catalog, category pages.
Frameless ecommerce product grid with per-card Add to Cart and hover wishlist toggle
product-grid-3
Frameless ecommerce product grid for shop and category pages: image tiles with full-width Add to Cart, hover-reveal wishlist toggle, category links, sale badges, star rating, and strikethrough price. Uses ReUI Badge, Rating, shadcn Item, Button.
Editorial product grid with numbered horizontal chapter tiles, story line and 3-up specs
product-grid-4
Editorial product grid of horizontal split tiles: numbered chapter header, square image left, title with price, story line and 3-up specs right. ReUI Badge, shadcn Item and Button, hover-reveal wishlist, sale strikethrough. Collection grid, catalog.
Ecommerce product grid with hover quick-buy panel and in-stock-aware size picker
product-grid-5
Shoppable 3-column product grid; cards reveal a hover quick-buy panel with a stock-aware size picker (sold-out sizes struck through), wishlist toggle, and Add to Bag. ReUI Badge, shadcn Item, Field, Checkbox, Button. Storefront catalog, shop listing.
Apparel 2x2 product grid with hover lifestyle image cross-fade and expanding color swatch pill
product-grid-6
Fashion ecommerce 2x2 product grid where tiles cross-fade product to on-model shots on hover, revealing Add to List and Add to Cart, plus a corner Badge and fan-out swatch pill. ReUI Badge, shadcn Button, Item. Catalog, collection, shop pages.
Account settings shell with vertical sidebar tabs for profile, workspace, team, and billing
profile-1
SaaS account settings page: a vertical Tabs sidebar switching Profile, Workspace, Team, and Billing panels on ReUI Frame and Badge, plus a searchable, filterable, paginated ReUI DataGrid of team members and shadcn Field, Input, Switch, and Combobox.
Admin settings page with line tabs spanning profile, members, permissions, and integrations
profile-2
Tabbed workspace admin settings: profile form, member DataGrid with row actions, permission checkbox matrix, notification and integration toggles. Account settings, team admin, access control. ReUI Tabs, DataGrid, Badge, Alert, shadcn Switch, Card.
Profile settings form with avatar upload, verified email, and regional preferences in a single card
profile-3
Account profile settings page: avatar upload, identity fields (name, verified email, username, role, phone), regional preferences (timezone, week start, language), dismissible sync alert. ReUI Alert, Badge, PhoneInput; shadcn Card, InputGroup.
Outreach inbox account settings page with connected mailboxes, reply routing, and signature toggles
profile-4
Mailbox settings page: account cards with status badges, per-row dropdown actions, connect-provider buttons, and signature toggles. ReUI Badge, shadcn Card, Item, Avatar, DropdownMenu, Switch. For outreach, inbox, and email account settings.
Notification settings with daily digest controls and a per-channel email and in-app alert matrix
profile-5
Notification preferences page: a daily digest stat summary with Progress bars and tooltips, a Switch toggle, plus a per-alert email and in-app delivery matrix. ReUI Badge with Card, Table, Checkbox, Switch, Field, Progress.
Partner referral rewards profile with copy-link share card, reward tier ladder, referral activity
profile-6
Referral and partner rewards page: metric cards with progress, a copy-link InputGroup share card, an unlocked/next/locked reward ladder, next-unlock progress, and a referrals activity list. ReUI Badge, shadcn Card, Progress, Avatar, Tooltip.
Meeting Capture Settings Card with Recording Mode, Consent, Notes Template, and Output Toggles
profile-7
Single-card meeting recording settings: capture mode, consent, and notes template selects, output checkbox group, prompt textarea, auto-share and transcript switches, Reset and Save with toast. ReUI Badge, shadcn Card, Select, Checkbox, Switch.
Billing settings page with plan summary, 3-column usage metrics, and invoice history table
profile-8
Subscription billing settings page: trial alert, plan summary with renewal facts, 3-column usage metrics, billing detail rows with tooltip hints, and an invoice history table. Built with ReUI Alert, Badge, shadcn Card, Table, Field, Tooltip, Button.
Account settings hub with grouped collapsible sidebar navigation and 11 swappable form panels
profile-9
Workspace settings page where a collapsible grouped sidebar switches 11 card-based form panels: authentication, profile, billing, API keys, webhooks, audit. ReUI Badge with shadcn Sidebar, Card, Field, Input, Select, Switch, Checkbox, RadioGroup.
Printable order receipt with paid badge, itemized items, totals breakdown, and shipment tracking
receipt-1
Post-checkout receipt for a completed purchase: Paid badge, Ship/Bill/Payment grid, line items with thumbnails, subtotal-discount-tax-total summary, Download/Email/Print actions. ReUI Badge, shadcn Card, Button, Item. Order confirmation, invoice.
Order receipt with vertical fulfillment Timeline, Paid status hero, and items plus totals breakdown
receipt-2
Order receipt pairing a vertical fulfillment Timeline (placed to delivered, with Track CTA) and a details pane: items, totals, Ship To, Bill To, Payment. ReUI Timeline, Badge; shadcn Card, Button. For order status, shipping tracking, invoice page.
Monospaced Paper Cash-Register Order Receipt Card with Print, Download, and Email Actions
receipt-3
Printable order receipt styled as a narrow monospaced paper slip: order meta, text-only item lines, totals with discount and a double-line TOTAL row, payment, ship-to, tracking. ReUI Card, Button, Item. Order confirmation, invoice, print receipt.
Delivered Order Receipt with Per-Item Review, Buy Again and Return Actions
receipt-4
Post-purchase order receipt with a Delivered hero, totals, and item rows whose action flips between Write Review and Buy Again plus a per-item menu (Return Item, Get Help). Order confirmation, order history. ReUI Badge, Rating, shadcn Card.
Two-column statement-style order receipt with metadata sidebar and itemized line totals
receipt-5
Statement-layout receipt: left sidebar with brand mark, Paid badge, large Total Paid amount and order/payment/address blocks; right pane lists items and totals. ReUI Badge, shadcn Card, Item, Button. Order confirmation, invoice, purchase summary.
Order Receipt Page with Quick-Action Tile Grid, Line Items, Totals, and Shipping or Tracking Details
receipt-6
Post-purchase receipt with a status-badged order summary, line items with thumbnails, totals breakdown, a shipping/payment/tracking grid, and a 4-tile Track/Reorder/Return/Help action grid. Uses ReUI Badge, shadcn Card, Button, Item.
Product reviews carousel with autoplay slides and avatar thumbnail navigation
review-1
Slides one full testimonial at a time with an attribution bar (reviewer, star rating, variant, verified badge) and avatar thumbnails to jump reviews. ReUI Rating, Badge, shadcn Carousel, Avatar, Button. Product pages, testimonials, social proof.
Customer Reviews Section with Sentiment Topic Filter Chips and Two-Column Review Grid
review-2
Product reviews section with topic filter chips showing per-theme confidence percentages and a two-column grid of avatar, star rating, verified badge, and helpful-counter tiles. ReUI Rating, Badge, shadcn Avatar, Button. Testimonials, social proof.
Customer reviews section with rating summary sidebar and sortable review list
review-3
Product reviews layout: summary card with aggregate rating, star-distribution bars and top-mention tags beside a sortable review list with verified badges and helpful counts. ReUI Rating, Badge, shadcn Card, Progress, Select, Avatar. Ratings pages.
Ecommerce Customer Reviews Pull-Quote Highlights Grid With Star Ratings and Avatars
review-4
Product review highlights section: six verified-buyer pull-quote tiles in a responsive grid, each with quote glyph, star Rating, score, avatar and posted date. ReUI Rating, shadcn Avatar, Button. Testimonials, ratings, social proof.
Ecommerce Product Testimonial Carousel with Autoplay and Dot Pagination
review-5
Customer reviews section: looping autoplay carousel of quote cards with star Rating, avatar attribution, and active dot pagination. ReUI Rating, shadcn Carousel, Card, Avatar. Product testimonials, social proof.
Auto-playing customer review carousel with star-rating-led testimonial cards and dot pagination
review-6
Looping testimonial slider for product pages and social proof sections: auto-rotating cards pause on hover, each leads with a star Rating, quote, and reviewer avatar. Uses ReUI Rating with shadcn Carousel, Card, Avatar, Separator.
Schedule with date-picker calendar and filterable day agenda of status events
schedule-1
Two-pane schedule: a month Calendar with event dots beside a status-filterable day agenda of event cards with status Badge, attendee AvatarGroup, time and location. ReUI Frame, Badge plus shadcn Calendar, Select, Avatar. Planner, appointments.
Date and Time Scheduling Popover with Quick Shortcut Rows, Calendar, and Time Slots
schedule-10
Schedule a date and time: quick shortcut rows (Today, Tomorrow, Next week), month and year calendar, and scrollable time-slot column with disabled slots. Uses ReUI Frame, shadcn Calendar, Item, Select, ScrollArea, Button. Due-date / deadline picker.
Session time picker card with start and end Selects, quick-duration presets and live duration
schedule-2
Booking card to pick a meeting or work-session time: ReUI Frame with Avatar header, Select start and end menus, quick-duration preset Buttons, Tooltip and live duration, Cancel and Apply. Schedule, time-slot, duration picker.
Meeting scheduler card with calendar, time-slot list, duration and recurrence selects, and switches
schedule-3
Schedule a meeting: pick a date, choose an available time slot, set duration and recurrence, add title and notes, toggle waiting room and auto-record. Booking form using ReUI Frame, shadcn Calendar, Select, Switch, Input, Textarea, Button.
Calendly-style meeting booking widget with month calendar, availability dots, and time-slot picker
schedule-4
Pick a date on the month calendar (available days dotted), choose a time slot, confirm. Side panel shows host, session type, platform, duration. ReUI Frame with shadcn Calendar, Select, Avatar, ScrollArea. Appointment scheduling, booking pages.
Compact team attendance calendar card with status filter and bar-chart stat rows
schedule-5
Team attendance widget: month Select, status filter DropdownMenu, single-date Calendar with today highlight, AvatarGroup, and Attendance/Absences/Delayed rows with bar sparklines. ReUI Frame, Badge; shadcn Calendar, Avatar, Chart. Presence tracker.
Schedule creation form with member multi-select, date picker, and file upload
schedule-6
Schedule creation form: name input, member multi-select with avatars, date picker, start and end time selects, drag-drop image upload, link and description. ReUI Frame, Combobox, Avatar, Field, Calendar, Select. For meeting and booking forms.
Webinar event detail card with collapsible overview, presenters, and Yes/Skip/Maybe RSVP sections
schedule-7
Event card with three collapsible sections: overview rows with live stream and recording switches, presenters, and agenda with Yes/Skip/Maybe RSVP. ReUI Frame and Badge, shadcn Collapsible, Avatar, Switch, Button. For meeting invites and webinars.
Compact month calendar card with per-day category dots, filter chips, and attendee-avatar agenda
schedule-8
Month calendar card with colored category dots per day, category filter chips, and a scrollable day agenda of events with attendee avatar groups. ReUI Frame, shadcn Calendar, Select, Avatar, ScrollArea. Mini schedule, team agenda widget.
Session booking scheduler with single-date calendar, duration toggle, and scrollable time slots
schedule-9
Appointment booking widget for meetings and consultations. Single-date Calendar with month and year dropdowns, 15m to 90m duration toggle, scrollable time-slot picker, confirm footer. ReUI Frame, shadcn Calendar, Select, ScrollArea, Button.
Import services settings step with selectable integration cards and a 2-pick limit
settings-1
Wizard step to import data from third-party services. Selectable integration cards with logo, status badge, and checkbox, capped at 2 picks via a toast, with back and next. ReUI Badge, Frame; shadcn Card, Checkbox, Button. Connect integrations.
Workspace security settings in Frame cards mixing toggles, a timeout select, and plan-tier badges
settings-10
Security settings page grouping session policy, login methods, and access restrictions into ReUI Frame cards. Rows mix Switch toggles, a timeout Select, and plan-tier Badges (Basic, Business, Enterprise) on shadcn Item. For 2FA, SSO, access controls.
Notification preferences settings with tabbed channel matrix table for Email, Slack, and In-app
settings-11
Notification settings grouping events under Projects, Messages, Reports, and System tabs, each a table with per-row Email/Slack/In-app checkboxes. Uses ReUI Tabs (line), Table, Checkbox. For alert preferences and channel opt-in.
Notification settings page with per-channel delivery modes and collapsible auto-follow toggles
settings-12
Notification preferences page: per-channel delivery-mode Selects for inbox, email, browser, and mobile, Slack, Zoom, and Google Meet connect rows, plus a collapsible auto-follow section. Uses ReUI Badge with shadcn Card, Select, Switch, Collapsible.
Integrations settings gallery, app cards in a grid with connect button and toggle switch
settings-13
Integrations settings page: responsive grid of app cards with brand logo, description, connect/disconnect button and a toggle switch. Connected apps marketplace, integration directory. ReUI Frame with shadcn Item, Button, Switch.
API integrations settings data grid with copyable keys, status switches, and pause-all toggle
settings-14
Sortable, paginated table of connected API integrations: brand logos, copy-to-clipboard API key badges, daily call counts, per-row enable switches, and a pause-all toggle. ReUI DataGrid, Frame, Badge; shadcn Switch. Connected apps, API keys settings.
Workspace settings with grouped preference cards, toggles, badges, and a team avatar row
settings-15
Workspace preferences page grouping AI, publishing, collaboration, and notification settings into Frame cards with Switch toggles, status Badges, action Buttons, and an AvatarGroup team row.
Connected apps integration settings with per-row status badges and connect actions
settings-16
Connected apps panel listing integrations as rows with logo, name, status badge (Connected, Available, Preview), and Configure or Install action. Uses ReUI Frame, Badge, shadcn Item, Button. For integrations, connectors, app directory.
Privacy and preferences settings card with mixed-control rows, switches, buttons and Pro/Beta badges
settings-2
Privacy settings panel of icon rows whose action varies per setting: toggle switch, single button, or a paired Enable all / Disable all control, plus Pro and Beta tags. ReUI Frame, Badge; shadcn Switch, Button, Item. Account privacy, preferences.
General Settings Form with Per-Row Controls, Required and Pro Badges
settings-3
Stacked settings rows in a ReUI Frame, each pairing a labeled description with its own control: Input, prefixed URL InputGroup, Select, ToggleGroup, color swatches, Switch list, plus Required and Pro badges. Preferences, app config, account settings.
App connections settings page with integrations grouped into labeled sections and per-row status
settings-4
Connected apps settings: integration rows grouped into labeled sections, each with brand logo, Connected or Needs review status, and a per-row menu to sync, manage, or disconnect. ReUI Frame, Badge; shadcn Item, DropdownMenu, Button.
Role Permissions Settings Panel with Two-Column Switch Toggle Grid
settings-5
Role-based access settings: a two-column grid of outlined permission cards, each with title, description, and on/off Switch, under a header with a New Permission button. ReUI Frame, Badge; shadcn Item, Switch, Button. For roles, access control, RBAC.
Integrations settings list with brand-logo cards and connect or disconnect toggle buttons
settings-6
Connected apps settings page: per-integration cards with brand logo, name, and Connect/Disconnect button that reveals per-channel notification toggles. ReUI Frame plus shadcn Item, Button, Switch. App connections, integrations, webhooks.
Account settings page with side-tab navigation for profile, security, notifications, and billing
settings-7
Tabbed account settings shell with a side tab rail. Profile with avatar upload, two-step verification, active sessions, delete account, and billing plans. ReUI Alert and Badge with shadcn Tabs, Card, Field, Input, Select, Switch, Item, Avatar.
Webhook endpoints settings list with per-endpoint delivery-health alerts and enable toggle
settings-8
Webhook developer settings managing endpoint routes with delivery-health tooltip alerts, status badges (Delivering, Retrying, Paused), enable Switch, copy URL, rotate-secret and remove actions. ReUI Frame, Badge; shadcn Item, Switch, DropdownMenu.
Workspace Preferences Settings With Collapsible Sections of Select and Switch Rows
settings-9
Workspace settings page grouping preference rows into collapsible General and Display sections, each row mixing select dropdowns and switch toggles with status badges. ReUI Frame, Badge; shadcn Collapsible, Item, Select, Switch, Separator.
Inset right project create Sheet with inline metadata comboboxes and target date picker
sheet-1
Create-project side drawer: name Input and description Textarea over inline Combobox pickers for status, priority, lead, members, milestone, target date, and labels. Uses ReUI Sheet, Combobox, Calendar, Dialog, AvatarGroup. New project or issue form.
Inset right AI assistant chat sheet with prompt suggestions and pinned composer toolbar
sheet-10
Floating right-side AI chat panel with scrollable history, prompt suggestion chips, and a pinned InputGroup composer (attach, voice, send) plus header new-chat and refresh actions. Uses Sheet, ScrollArea, DropdownMenu. Copilot, assistant drawer.
Right-Side Metric Detail Sheet with Target Progress, Owners, Alert Rule, and Changes Timeline
sheet-11
Right drawer for one KPI: current value with delta badge, target progress bar, definition facts, owner avatars, alert rule, and a recent-changes timeline. ReUI Badge, Timeline; shadcn Sheet, Progress, AvatarGroup. Metric detail, analytics drilldown.
Right-side help and support Sheet with search field and grouped guide links
sheet-2
Help center side panel: searchable InputGroup, grouped guide Items with status Badges and Tooltips, scrollable body, footer support links. For in-app help, docs drawers, support menus. Uses ReUI Badge, Sheet, InputGroup, Item, ScrollArea, Tooltip.
Searchable keyboard shortcuts reference in a right inset sheet, grouped by section
sheet-3
Right-side inset Sheet listing app keyboard shortcuts grouped into sections with Kbd key chords, a live search InputGroup, ScrollArea, and empty state. For a shortcuts panel, cheat sheet, or hotkeys help. Sheet, Kbd, InputGroup, ScrollArea, Empty.
Inset right AI assistant sheet with model selector, suggestion chips, and composer toolbar
sheet-4
Floating right-side AI chat panel with a header model-switch Select, user and assistant message bubbles, suggestion chips, and an InputGroup composer toolbar. Uses ReUI Sheet, InputGroup, ScrollArea, Tooltip. AI copilot drawer, chatbot panel.
Inset right comment thread Sheet with reply, react, resolve and open-only filter
sheet-5
Client discussion sheet for collaboration and review apps. Comments with reply, emoji react, resolve and reopen, open-versus-all filter and a composer. ReUI Badge, shadcn Sheet, Item, Avatar, InputGroup, DropdownMenu, ScrollArea, Tooltip.
Inset right view customizer sheet with quick toggles and layout mode picker
sheet-6
Floating right sheet to customize a workspace view: Switch toggles plus a RadioGroup of layout cards with SVG skeleton previews and a hint Tooltip. ReUI Sheet, Field, Switch, RadioGroup, ScrollArea. Settings panel, preferences drawer.
Inset right notifications sheet with unread badge, mark-all-read, and rich activity feed
sheet-7
Floating right-anchored notification panel for in-app activity. Scrollable feed with unread count, mark-all-as-read, approvals, attachments, avatar groups, ratings, and progress. ReUI Badge, Rating; Sheet, Avatar, Button, ScrollArea.
Inset right settings sheet with scrollable two-section form, header and sticky footer
sheet-8
Floating inset right Sheet for relay settings, with scrollable Delivery and Routing sections, Input, Select, and Switch fields, tooltip hints, and a sticky Reset / Save footer. ReUI Sheet, Field, Select, Switch. Settings panel, preferences drawer.
Inset right ticket details Sheet with inline per-row editing and save actions
sheet-9
Right-side ticket panel where each field edits in place via Select, Combobox, Calendar, Switch, or InputGroup, with Badge status, avatar chips, and async save toast. ReUI Badge, shadcn Sheet, Combobox. Ticket detail, issue properties, record drawer.
Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart
shop-hero-1
Ecommerce landing hero pairing shop positioning, dual CTAs and a curator row with a 1-up plus 2-stacked product mosaic, sale and compare-at pricing, per-tile add-to-cart, and a cart counter that updates live. ReUI Badge, shadcn Item, Button, Avatar.
Bento-grid shop hero with featured campaign tile, quick-add product tiles, and sale promo block
shop-hero-2
Ecommerce bento-grid hero: a large campaign tile with eyebrow, headline, and dual CTA, three product tiles with price, compare-at price, badge, and quick Add to Cart, plus an inverted sale promo. ReUI Badge, shadcn Item, Button. Shop hero, storefront
Ecommerce shop hero with full-bleed featured deal banner, countdown, and three promo tiles
shop-hero-3
Sale landing hero: image deal banner with offer headline, live Badge, countdown timer, social proof, dual CTA, plus three promo tiles. ReUI Badge, shadcn Button, Item. Storewide deals, weekly sale, promo page.
Shop By Category ecommerce hero with editorial header and a four-tile image category grid
shop-hero-4
Category-browse hero for shop and storefront homepages: editorial eyebrow, headline, lede, See All link, and four square image tiles with name, count, and hover arrow. Uses shadcn Item. Keywords: shop by category, collections grid, product landing.
Dual-Collection Shop Hero with Two Side-by-Side Full-Image Story Panels
shop-hero-5
Ecommerce shop hero promoting two collections at once: side-by-side full-bleed photo panels, each with eyebrow, headline, star rating, review count, from-price, primary Button CTA and link over a dark gradient. ReUI Badge, shadcn Button, Item.
Editorial split shop hero with brand stamp, dual Shop The Edit and Sale CTAs, and collection image
shop-hero-6
Collection-level storefront hero: split Card with editorial column (brand stamp, headline, release-stats row) and atmospheric image with a New Drop Badge. Dual Shop The Edit and Sale CTAs. ReUI Badge, shadcn Card, Button. Seasonal lookbook.
Collection Switcher Shop Hero with Tabbed Thumbnail Chips and Full-Bleed Editorial Panels
shop-hero-7
Storefront hero that switches collections via Tabs. Thumbnail chip triggers with status dot and piece count swap a full-bleed image panel with eyebrow, headline, lede, and dual CTA. ReUI Tabs, Item, Button. Shop landing, lookbook, drop switcher.
Edge-to-edge 2x2 collection quilt shop hero with full-bleed photo tiles and color-coded status pills
shop-hero-8
Full-width 2x2 grid hero linking four shop collections; each tile is a full-bleed photo with a color-coded status pill, name, and piece-count plus price-range meta over an animated Shop link. For storefront, category, lookbook, drop pages.
Shopping Cart Review With Item List, Free-Shipping Progress, Promo Code, and Order Summary Sidebar
shopping-cart-1
Pre-checkout cart page: item rows with quantity steppers, save and remove, plus free-shipping progress, promo code field, and an Order Summary sidebar (subtotal, tax, discount, checkout). ReUI Badge, Progress, InputGroup. Ecommerce basket review.
Two-Column Shopping Cart Page with Sticky Order Summary Frame and Coupon Field
shopping-cart-2
Cart page: item list with thumbnails, size badges, and quantity steppers beside a sticky order summary with delivery, tax, total, coupon, and checkout. ReUI Frame, Badge plus shadcn Item, ButtonGroup, InputGroup, Empty. Bag, basket, order review.
Data Table Shopping Cart with Column Header Rail, Quantity Steppers, and Order Summary
shopping-cart-3
Full-width pre-checkout cart laid out as a data table: column header rail, thumbnail rows with linked title, color swatch and size, ButtonGroup steppers, line totals, and an order summary with free-shipping Badge. ReUI Badge, Button, Item, Tooltip.
Full-Page Shopping Cart with Per-Item Delivery or Pickup Toggle and Sticky Order Summary
shopping-cart-4
Cart page where each item toggles delivery or pickup with its own date and fee, plus quantity steppers, promo code, and a hero estimated total. ReUI Badge, shadcn ToggleGroup, ButtonGroup, Card, InputGroup. For ecommerce checkout, basket, bag review.
Two-column shopping cart with order summary, coupon field, and payment method tiles
shopping-cart-5
Cart review and checkout page: a thumbnail items Card with ButtonGroup quantity steppers beside a sticky rail of coupon InputGroup, Tooltip-explained Order Summary, and a four-tile payment RadioGroup. ReUI Card, Item, Tooltip, Empty. Order review.
Quick Cart Dropdown Menu with Per-Row Quantity Steppers and Live Subtotal
shopping-cart-6
Mini-cart popover from a Cart button with count Badge: rows with thumbnail, variant, a quantity stepper driving a live subtotal, View Cart, Checkout, and an Empty state. DropdownMenu, ScrollArea, ButtonGroup, Item, Button. For header cart preview.
Mini Cart Slide-Out Sheet Drawer with Just Added Confirmation and Free Shipping Progress
shopping-cart-7
Add-to-cart mini cart drawer highlighting the just-added line with a success Badge, ButtonGroup quantity steppers, free-shipping Progress bar, subtotal, and Checkout. ReUI Badge, Sheet, Item, ScrollArea. Ecommerce side cart, slide-out basket.
AI Agent Operations Dashboard with Run Queue, Throughput Chart and Incident Timeline
solution-agents-1
Full-page console to monitor autonomous agent runs, approval backlogs, tool reliability and incidents. KPI cards, throughput chart, incident timeline, filterable run queue with row actions. ReUI Frame, DataGrid, Badge; shadcn Chart. Agent ops.
Agent run-configuration settings form with picker, validated timeout, and locked policy row
solution-agents-10
Configure how an agent runs: pick an agent, set reasoning model, concurrency, validated timeout and autonomy, toggle sandbox and retry policies plus one locked PII row. ReUI Frame, Badge; shadcn Select, Button, InputGroup, Switch. Agent settings page
Agent Run Queue with Collapsible Status Groups and Attention Filters
solution-agents-2
Triage table for agent runs in collapsible Running, Waiting, Failed, Completed groups with search, attention filter, density toggle, and per-row actions. ReUI DataGrid, Badge; shadcn Button, Avatar, Switch. For agent ops dashboards, run monitoring.
Agent Run Detail with Inline Step Trace and Editable Settings Panel
solution-agents-3
Single-page detail for one agent run: header with live actions, step trace with per-step tool calls and latency, plus a row-editable settings panel. ReUI Frame, Timeline, Badge, Alert; shadcn Avatar, Button. Use: run debugging, ops monitoring.
Agent Tool Access Matrix with Approval Routing and Run Policies
solution-agents-4
Per-agent tool governance: a DataGrid sets each tool's access mode (Auto Run, Approval, Blocked), rate limit, and approver, plus run-policy switches with save or discard. ReUI DataGrid, Filters, Frame; shadcn Switch, Select. Permissions, guardrails.
Agent Action Approval Inbox with Risk-Tiered Queue and Bulk Approve or Reject
solution-agents-5
Full-page console for triaging pending agent actions: filter by risk and status, bulk approve or reject, and inspect payloads in a detail sheet. ReUI DataGrid, Badge, Timeline; shadcn Sheet, Select, Checkbox. Approval inbox, human-in-the-loop queue.
Agent Playbook Builder Wizard with Live Summary Card and Tool Allowlist
solution-agents-6
Five-step wizard to build an agent playbook: trigger, condition rows, tool allowlist, approval gate, then review and publish with a live summary card. ReUI Stepper, Alert, Badge; shadcn Card, Select, RadioGroup. For workflow automation, approvals.
Failed Agent Run Triage Board with Detail Sheet and Retry Ladder
solution-agents-7
Triage failed agent runs in a data grid with metric cards, then open a detail sheet tabbed into error, retry attempts, and payload. ReUI Data Grid, Badge, Alert, Timeline; shadcn Sheet, Card, Button, Tabs. Agent ops, error monitoring, run dashboards.
Agent Evaluation Report with Pass Rate Trend and Release Markers
solution-agents-8
Read-mostly nightly agent eval report: pass rate trend with release markers, per-suite progress, and a regressions table comparing two releases. Period selector, regressions-only toggle, export. ReUI Frame, Badge, Filters; shadcn Chart, Progress.
Agent memory manager with scope rail and confidence-scored entries grid
solution-agents-9
Curate the facts agents retain: a scope rail with per-scope counts beside a confidence-scored grid, with pin, forget, and filter actions. Uses ReUI DataGrid, Badge, Filters, Frame; shadcn Button, Avatar. For agent ops and memory management pages.
AI Operations Dashboard with Provider Failover Timeline and Token Activity Chart
solution-ai-ops-1
Full-page LLM ops dashboard for provider health, token usage, routing rules, and safety drift: metric cards, failover timeline, token activity chart, routing grid. ReUI Frame, Timeline, DataGrid, Badge; shadcn Button, Chart. Admin panel, monitoring.
AI model provider settings page with priority and fallback routing rows
solution-ai-ops-2
Manage AI model provider connections, route priority, fallbacks, and endpoint health with status badges and connect, pause, test, save actions. ReUI Badge, Frame; shadcn Button, Dialog, Dropdown-Menu, Item, Select, Switch. Provider and routing setup.
Tabbed AI Ops Prompt Registry Queue with Table and Card View Toggle
solution-ai-ops-3
AI operations prompt queue with tabs, owner/risk/status filters, table-and-card view switch, display settings, export, and row actions to advance review. Uses ReUI DataGrid, Filters; shadcn Tabs, Card, Button, Select. Operator console, review queue.
Prompt Editor with Configuration and Evaluation Details
solution-ai-ops-4
Full-page prompt editor with tabbed sections for overview, text, safety, evaluations, and access. Status badges, form fields, timeline, save-discard workflow. ReUI Badge; shadcn Button, Tabs. For AI ops dashboards and model operator portals.
AI Ops Routing Rules Settings with Risk-Tiered Policy Toggle Grid
solution-ai-ops-5
Full-page AI routing controls: per-route policy toggle grid, provider fallback Select with validation, and reset confirmation. ReUI Frame, Badge; shadcn Switch, Select, Dialog, Dropdown Menu. AI platform ops, model settings, risk management.
AI Feature Flags Data Grid with Rollout Stage Tabs and Inline Enable Switches
solution-ai-ops-6
Manage AI feature flags by rollout stage with tabs, owner and segment filters, inline enable switches, detail sheet, archive dialog, operations Kanban. ReUI DataGrid, Badge, Filters, Kanban; shadcn Sheet, Switch, Tabs. Flag console, rollout admin.
AI Safety Policy Builder Wizard with Stepper Rail and Policy Rule Coverage Table
solution-ai-ops-7
Four-step wizard to configure, validate, and review AI model safety policies: enforcement modes, risk tiers, evaluators, and a rule coverage table. ReUI Stepper, Alert, Badge; shadcn Card, Table, Select, Dialog. Use for AI governance, model risk.
AI Token Spend Ledger Data Grid with Budget Status and CSV Export
solution-ai-ops-8
Full-page grid auditing token usage and cost by model provider and prompt, with filtering, sorting, CSV export, a row-detail sheet, and budget-alert toggles. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Switch, Sheet. AI ops cost tracking.
AI Ops Cost Dashboard with Spend Pace Chart and Tabbed Provider Cost Grid
solution-ai-ops-9
Tracks AI model spend, token volume, and budget alerts with KPI cards, a spend-vs-budget line chart, provider mix breakdown, and a tabbed cost-event grid. ReUI Badge, Data Grid; shadcn Card, Tabs, Chart. For AI ops, cost monitoring, budgets.
Product Analytics Dashboard with Scored Signal Backlog
solution-analytics-1
Tracks activation, retention, adoption, and backlog risk. Scored signal grid with sparklines, filtering, reporting ranges, health overview, and export. ReUI Badge, Frame, Data-Grid; shadcn Button, Chart, Progress. Product analytics, SaaS dashboard.
Feature Adoption Analytics Report with Trend Chart and Scored Feature Grid
solution-analytics-2
Read-only product analytics report comparing feature adoption by segment and period. Overview metrics, trend chart, and scored feature grid with sparklines and filtering. ReUI DataGrid, Badge, Frame; shadcn Chart, Select, Progress. SaaS usage report.
Activation Funnel Report with Conversion Area Chart and Segment Mix
solution-analytics-3
Tracks workspaces from signup to week 4 retention via a stacked funnel chart, segment mix pie, and risk-flagged cohort grid with period, segment, and export filters. ReUI DataGrid, Badge, Frame; shadcn Button, Select, Tabs. Funnel and cohort reports.
Cohort Retention Analytics Report with Retention Curve Chart and Cohort Table
solution-analytics-4
Period-over-period retention report: 4W-16W curve chart with period tabs, cohort health notes, and a sortable cohort grid by segment and event. ReUI Frame, DataGrid, Badge; shadcn Chart, Tabs, Item. For product analytics, retention, cohort views.
Event Explorer - Analytics Dashboard with Chart Grid
solution-analytics-5
Event catalog with health metrics grid and dense data table. Filtering, sorting, bulk owner reassignment, detail drawer. Built with DataGrid, Select, Checkbox, InputGroup, Button. Use for event audits, catalog management, and quality assessment.
Segment validation workspace with health metrics, review calendar, and weekly rule coverage grid
solution-analytics-6
Analytics segment-validation dashboard with health metric cards and sparklines, a review schedule calendar, and a filterable weekly rule coverage grid. ReUI Frame, DataGrid, Badge; shadcn Tabs, Calendar, Select. For segment management, reporting.
A/B Experiment Report with Ship Decision, Evidence Grid and Guardrails
solution-analytics-7
Read-only experiment analysis: ship-decision verdict card, tabbed evidence grid with period/segment filters and export, rollout plan and guardrails. ReUI Badge, DataGrid; shadcn Card, Tabs, Button. For A/B test reports, variant lift analysis.
Single-Metric Analytics Detail Page with Target-Tracked Trend Chart
solution-analytics-8
Single-metric detail page: health-badge header, four-up KPI rail, trend chart against a target line, cohort breakdown, changes timeline. ReUI Frame, Badge, Timeline; shadcn Chart, Select, Progress. For analytics dashboards, KPI tracking, metrics.
Alert Rules Settings Form with Tabs and Validation
solution-analytics-9
Tabbed settings form for configuring alert thresholds, delivery channels, quiet hours, and escalation with validation and save/discard. ReUI Alert, Badge; shadcn Button, Card, Tabs, Select, Switch. Analytics settings, configuration form.
Billing operator workspace with invoice ledger and past due recovery
solution-billing-1
Review the billing position and recover overdue invoices. Pairs a statement summary card and past due alert with a filterable invoice ledger. Uses ReUI Alert, Badge, DataGrid, Filters; shadcn Card, Button. For accounts receivable and billing pages.
Plan and pricing catalog editor with tiered plan tiles and status toggles
solution-billing-2
Plan catalog editor for billing teams to manage tiered plans, pricing, billing intervals, seats, entitlements, add-ons, and active/draft/archived status. ReUI Frame, Badge, Alert; shadcn Item, Button, Switch. For subscription and pricing settings.
Subscription Management Workspace with Quick-Action Cards and Lifecycle Grid
solution-billing-3
Manage subscriptions across active, trialing, past due, and canceled states. Quick-action cards with budget progress lead a filterable, searchable grid with row actions. ReUI Frame, DataGrid; shadcn Tabs, Select, Avatar. Billing ops, revenue recovery
Customer Billing Account Detail with Tabbed Invoices, Subscription, and Activity Rail
solution-billing-4
Single-account billing detail: identity header, tabbed invoice history, subscription, and payment methods beside a scoped activity timeline. shadcn Card, Tabs, Table, Button; ReUI Badge. Account detail, billing management, subscription page.
Four-step invoice builder wizard with a live receipt-style review preview
solution-billing-5
Guided invoice composer: pick a customer, edit line items with per-line tax and discount, then send. Live receipt review with draft and sent states. ReUI Stepper, Alert, Badge; shadcn Card, Table, Combobox, Select. For billing and invoicing pages.
Expandable Dunning Queue for SaaS Failed Payment Recovery
solution-billing-6
Sortable, filterable dunning queue for SaaS billing operators to recover failed charges. Expands inline to retry timeline. Features ReUI DataGrid, Frame, Filters; shadcn Button, Separator. Payment recovery, dunning list, failed billing.
Metered usage event ledger with tree meter scope selection
solution-billing-7
Audit metered events by meter and period with tree sidebar nav filtering, date picker, and export. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Calendar, Breadcrumb. Usage based billing, consumption tracking, subscription auditing.
Subscription Plan Change Wizard with Live Proration Preview
solution-billing-8
Stepped wizard to move a subscription to a new tier with a proration rail recomputing credit, charge, and due-today as plan and timing change. ReUI Stepper, Badge, Alert; shadcn Card, Button, RadioGroup, Item, Avatar. For plan upgrades, downgrades.
Coupon and promotion manager with inline redemption rule editor
solution-billing-9
Manage coupon and promo codes; each row expands inline to edit discount type, duration, redemption limits, and eligible plans. ReUI Badge, Frame; shadcn Button, Collapsible, Dialog, Select. Discount admin, promo codes, billing settings.
Salon Front-Desk Booking Dashboard with Appointment Queue and Chair Capacity
solution-bookings-1
Front-desk surface for daily salon scheduling: KPI cards, a chair-capacity donut, and a searchable appointment queue with status badges and no-show tracking. ReUI Frame, Badge, DataGrid; shadcn Avatar. Booking dashboard, appointment scheduler.
Salon Appointment Calendar with Day/Week Views and Double-Book Alerts
solution-bookings-2
Full-page booking calendar for salon operators: month grid with category dots, Day/Week toggle, staff filter, double-book conflict alerts. ReUI Alert, Badge; shadcn Calendar, Card, Select, ToggleGroup. Schedule, staff roster, appointment booking.
Appointment Detail Sheet with Deposit Payment and Booking Timeline
solution-bookings-3
Inset right sheet over an appointment list showing client, service, staff, deposit-progress payment, internal note, and a booking activity timeline. Uses ReUI Badge, Timeline; shadcn Avatar, Button, Item, Progress, ScrollArea, Sheet, Textarea.
Sales Pipeline CRM Dashboard with Metric Charts and Open-Deals Grid
solution-crm-1
Sales pipeline command center tracking pipeline value, forecast, and win rate via metric charts, plus a dense open-deals grid for search, sort, stage filters, and row actions. ReUI Badge, DataGrid; shadcn Card, Button, Avatar. CRM sales dashboard.
CRM deal pipeline kanban board with risk signals and confidence scores
solution-crm-2
Sales pipeline board tracking deals across six stages by risk signal, value, close date, confidence, and owner. ReUI Kanban, Badge, IconStack; shadcn Card, Avatar, Progress, Button. Deal pipeline, CRM dashboard, sales board.
CRM Contacts Grid with Bulk Owner Assignment and Detail Sheet
solution-crm-3
Full-page contacts directory for sales teams. Sort and filter rows, multi-select for bulk owner assignment or add-to-list, open a contact detail sheet. ReUI DataGrid, Filters, Frame, Badge; shadcn Button, Avatar, Sheet, Select. CRM, leads, accounts.
CRM Deal Detail Sheet with Inline Stage Select and Win Probability
solution-crm-4
Right-side sheet to inspect and advance a deal: inline stage Select drives win-probability Progress, deal team avatars, activity Timeline, and tasks. ReUI Badge, Timeline; shadcn Sheet, Select, Avatar, Progress. For pipeline and deal management.
CRM Activity Timeline with Day Buckets, Type and Owner Filters
solution-crm-5
Chronological sales activity log grouped by day buckets (Today, Yesterday, This week) with type and owner filters, collapsible detail panels, and outcome badges. ReUI Badge, Frame, Timeline; shadcn ToggleGroup, Select. Activity log, deal tracker.
Five-Step CRM CSV Import Wizard with Column Mapping and Validation
solution-crm-6
Guides bulk CSV uploads into CRM contacts and deals via column mapping, row validation counts, and duplicate handling. ReUI Frame, Stepper, Badge, Alert; shadcn Select, RadioGroup, Table, Switch. Data import, bulk upload, onboarding wizard.
SKU Inventory Operations Dashboard with Stock-Health Bar and Tabbed SKU Grid
solution-inventory-1
Full-page inventory ops dashboard: KPI stat tiles, stock-health status bar, velocity chart, low-stock alerts, and a tabbed, filterable SKU table. ReUI Frame, Badge, DataGrid; shadcn Button, Tabs, Chart. For warehouse, stock, and ecommerce ops.
Create Shipping Label
solution-inventory-10
Create shipping label dialog: a wide centered dialog with a sticky header carrying the title + close action, a two-column scrollable body, and a sticky footer with terms link plus Cancel / Buy Shipping Label actions. Left column stacks a pickup-to-destination route + order meta card, a Products card with per-item Weight inputs (kg), and a Packaging card with Custom Package / Carrier Package line tabs containing package name, type select, total weight, length/width/height + unit dropdown, and a save-for-future checkbox. Right column carries a Summary card (Shipping to + address + price details + total) followed by a Shipping Date input with calendar affordance and a Send Shipping Info to Customer checkbox.
Order Details
solution-inventory-11
Order details sheet: a right-anchored fulfillment review surface that reuses the solution-inventory-7 sheet shell. Header carries an Order Details title row, the order id + Shipped badge, a Created / Customer meta line, and a vertically-centered Delete / Order Tracking / View Shipping Label action cluster. The scrollable two-column body pairs an Order Data Frame (Items, Total Price, Shipping Priority, Delivery Method), a Products Frame with Item-based rows (image + name + SKU/color, inline weight input on the right), and a title-less Shipping Frame combining a vertical route Timeline, a UPS Global carrier chip, a Separator, and a four-step Picking / Packed / Shipping / Delivered status stepper. The right rail is a Summary Frame with shipping-to address, price details (Subtotal / Shipping / Tax / Total), and a separated total row. All frames use `dense spacing="sm"` for an operator-density default. The footer mirrors the header action cluster with a Read Shipping Terms & Conditions link on the left.
Full-Page SKU Inventory Ledger with Stock Health Metrics
solution-inventory-2
Stock ledger with KPI and health bar, filterable SKU grid (search, category, supplier, location, status), row actions, bulk operations, and detail sheet. ReUI DataGrid, Frame, Badge; shadcn Button, Select. Inventory management and warehouse tracking.
Low Stock Reorder Queue with At-Risk Value KPI and Bulk Create PO DataGrid
solution-inventory-3
At-risk value KPI and urgency bar over a searchable, filterable SKU DataGrid with multi-select bulk Create PO and a reorder detail sheet. ReUI DataGrid, Frame, Badge; shadcn Button, Select, InputGroup. For procurement and inventory dashboards.
Purchase Order Receiving Page with Line-Item Tracking and Activity Timeline
solution-inventory-4
Full-page purchase order detail for receiving stock against a PO: supplier and terms form, line-item receive table with backorders, costs, totals, and a note timeline. ReUI Badge, Timeline; shadcn Card, Table, Input. PO receiving, inventory intake.
Shop Activity Dashboard
solution-inventory-5
Inventory dashboard: 4 KPI stat tiles + inventory velocity bar chart + top categories list + tabbed shop activity table (Products / Recent activities / Orders). Composed by adapting existing application blocks (stats-1, chart-29, list-1) into a single shop-management surface.
Stock Health Grid
solution-inventory-6
Inventory overview block: total asset value KPI + segmented stock health bar (in stock / low / out of stock) above a filterable product DataGrid with search, date range, category and supplier filters, row selection, and pagination.
Stock Planner
solution-inventory-7
Stock planner sheet: a wide right-anchored sheet built on the sheet-6 shell. Header carries title, product name + Live badge, SKU/created/updated meta, and the Customer View / Remove / Edit Product action cluster. Scrollable two-column body pairs left-side Inventory KPIs, an Analytics card with two sparkline area charts, and a Variants table (size/color/price/availability/on-hand) with a right-side product gallery + thumbnails + spec list (category, fit, color swatches, sizes, star rating + reviews).
Stock Detail
solution-inventory-8
Per-product stock detail sheet: a wide right-anchored Sheet (inset, sheet-6 anatomy) with a Current Stock + Reorder Now row, an Inventory Rules Frame (threshold / safe / reorder / lead-time inputs + status / delta / velocity / next-reorder / updated-by stats + Auto Reorder switch in the header), a Shipping Frame (Custom / Carrier tabs + package name, type, weight, dimensions + save-package checkbox), and a right-side product summary (image, name, description, SKU / category / rating / price). Footer: Print Label · Cancel · Save.
Track Shipping
solution-inventory-9
Track Shipping sheet: a right-anchored single-column Sheet (sheet-6 + solution-inventory-7 anatomy) showing a shipment header (id + Shipped badge + placed-date / Order ID link meta + Cancel Order / Notify Customer actions), an origin-to-destination route with a carrier chip, a 4-step horizontal progress stepper (Picking / Packed / Shipping / Delivered with done / active / pending states), a Shipping Data summary (Total Time, Dep. Time, Exp. Arrival, Tracking No.), and a vertical Shipping Log timeline. Full-width Close button in the footer.
Workspace Members Directory Grid with Roles, SSO/2FA Status, and Bulk Role Actions
solution-users-1
Full-page admin console for workspace members: sort/filter rows, multi-select bulk role changes, SSO/2FA columns, member detail sheet. ReUI DataGrid, Frame, Filters, Badge; shadcn Button, Sheet. For user management, access control, team admin.
Member Detail Page with Sidebar Tabs for Access, Authentication, and Sessions
solution-users-2
Full-page admin screen to manage one member's roles, teams, MFA factors, sessions, activity, and a danger zone via a vertical tab rail. ReUI Badge; shadcn Avatar, Tabs, Select, AlertDialog. User management, permissions, account security.
Workspace roles and permissions access matrix with locked Owner column and grouped scope toggles
solution-users-3
Full-page matrix mapping workspace roles to grouped permission scopes: per-cell toggles, locked Owner access, group tabs, and a dirty save bar. ReUI DataGrid, Frame, Badge, Alert; shadcn Button, Tabs, Dialog. Admin panel, role management, RBAC.
Invitations Queue Data Grid with Status Filter and Bulk Resend or Revoke
solution-users-4
Full-page invitations grid tracking pending, accepted, expired, and revoked invites with search, status filter, bulk resend or revoke, and an invite people dialog. ReUI DataGrid, Badge; shadcn Button, Select, InputGroup. Admin panel, team management.
Just-in-Time Access Request Queue with Inline Approvals and Policy Review
solution-users-5
Admin grid to review, approve, or deny just-in-time access requests with inline decisions, bulk approve, and status/approver filters, plus a policy-check detail sheet. ReUI DataGrid, Badge; shadcn Sheet, Button. Access control, permission approval.
Day-Grouped Audit Log Timeline with Expandable Event Details and CSV Export
solution-users-6
Full-page audit timeline grouping access events by day with severity badges, expandable details, type filters, and CSV export. ReUI Timeline, Frame, Badge; shadcn Avatar, Button, Collapsible, Select, ToggleGroup. Activity log, compliance, access.
Enterprise SSO and SCIM Security Settings Page with Policy Controls
solution-users-7
Workspace admin page to manage SSO providers, SCIM provisioning, 2FA and password policy, session timeouts, and allowed domains, with status rows and a dirty-state save bar. ReUI Frame, Alert, Badge; shadcn Button, Select, Switch. Security settings.
KPI stat card grid with up or down trend badges and a per-card overflow action menu
stats-1
Responsive four-column KPI cards: large formatted metric, colored up or down delta badge, vs-last-month line, plus a per-card overflow menu. Uses ReUI Frame and Badge with shadcn DropdownMenu, Button, Separator. Stats overview, metrics, analytics.
Total Revenue stat card with trend badge, dropdown actions menu, and supporting metric rows
stats-10
Single KPI revenue card: large currency figure, USD label, red trend Badge for quarter-over-quarter change, and stacked metric rows. Built on ReUI Frame and Badge with shadcn Button and DropdownMenu actions. For dashboards, analytics, finance.
API call quota usage card with progress bar, billed cost, and renewal date
stats-11
Single-stat usage card tracking API calls against a monthly quota: Progress bar for used vs total, dollar cost, remaining free calls, and a renewal-date footer. ReUI Frame, shadcn Progress and Button. Usage meter, billing, plan limit.
Support metrics stat card grid with colored icon tiles and status badges
stats-12
Three-column support KPI grid: each Frame card pairs a colored bordered icon tile with a bold value, label, and status Badge (tickets, resolved rate, satisfaction). Uses ReUI Frame, Badge, Item. For support dashboards and service overview stats.
Compliance checks stat card with segmented bar gauge and overflow actions menu
stats-13
Single-metric card tracking compliance checks passing with a segmented filled-block gauge, percentage readout, and actions dropdown. Built on ReUI Frame plus shadcn Button and DropdownMenu. For security, audit, and status dashboard widgets.
Feature adoption stat card with segmented stacked indigo bar chart and actions dropdown
stats-14
Single metric card showing a large 84% adoption rate over a segmented bar chart of graduated indigo blocks, plus a header actions menu. ReUI Frame with shadcn Button and DropdownMenu. For KPI, analytics, and feature usage dashboards.
Three color-filled hero stat cards with metric, summary, and dark CTA action bar
stats-15
Three full-bleed colored metric cards, each with an icon, large KPI value, title, summary line, and a dark bottom CTA bar with a sliding arrow. Built on ReUI Card. For dashboards, KPI highlights, and stats callouts.
Color-block KPI stat cards with delta badge, vs-last-month row, and overflow menu
stats-2
Four KPI metric cards on solid color backgrounds with delta arrow badge, vs-last-month comparison, and per-card overflow menu. Built with ReUI Badge, shadcn Card, Button, DropdownMenu. Dashboard stats, KPI tiles, scorecard.
Subscription stats card with plan-tier segmented bar and expiring-soon renewal list
stats-3
Subscription metrics card: revenue and subscriber counts, a stacked Free/Pro/Enterprise tier bar with legend, and an Expiring Soon list with plan badges, days left, and renew links. ReUI Badge, shadcn Card, Select, Tooltip. For SaaS billing.
Leads overview stats card with range filter, progress bar and segmented returning-leads meter
stats-4
Lead summary card with a time-range Select, new vs returning counts, percent Badge, Progress bar and a 30-segment meter, plus top source and conversion rate Tooltip. ReUI Frame, Badge; shadcn Progress, Select, Tooltip. For CRM, marketing dashboards.
Dark balance stat card with segmented multi-currency allocation bar and topup action
stats-5
Wallet balance card with total amount, positive percent change, and a color-coded segmented bar splitting holdings by currency (USD, GBP, EUR) plus a Topup button. Uses shadcn Card and Button. For finance dashboards, crypto and banking apps.
Staff performance card with KPI trend grid, pipeline progress bar, and activity feed
stats-6
Sales rep performance summary: a 3-up KPI grid with up/down trend deltas, a pipeline progress bar, a recent activity list, and a quarter filter. ReUI Frame, Badge with shadcn Progress, Select, DropdownMenu, Button. For dashboards and scorecards.
Three-column stats panel with divided cells, large metric values and trend badges
stats-7
Bordered ReUI Frame panel split into three divided cells, each with a title, large metric value, colored trend Badge and period comparison subtext. KPI overview, dashboard stats, sales and churn metrics row.
Three-column KPI stat cards with icon tiles, trend badges, and date range footer
stats-8
Responsive 1 to 3 column metric grid; each card pairs a colored icon tile with a value, label, up/down trend Badge, and reporting date range. ReUI Frame, Badge, shadcn Item. For dashboards, analytics overview, KPI summary.
Tasks overview stat card with animated completion progress bar and AI finish-time prediction
stats-9
Task summary card: animated Tasks Done Progress bar, range Select filter, 3-column Backlog/In Progress/In Review buckets with colored counts, and AI prediction footer. ReUI Frame, shadcn Progress, Select. Project dashboard, productivity stats widget.
Vertical customer activation timeline with collapsible milestone cards and status indicators
timeline-1
Customer onboarding timeline where each activation milestone is a collapsible card with owner, priority and status badges, assignee avatars and due date. ReUI Timeline, Frame, Badge plus shadcn Avatar, Collapsible, Spinner. Onboarding tracker.
Vertical Account Rollout Timeline with Owner, Status Badges, Star Rating and File Attachments
timeline-2
Vertical activity timeline of onboarding milestones, each with date, action title, owner, colored status and risk badges, optional star rating and downloadable attachment. ReUI Timeline, Badge, Rating. Customer success, audit log, milestone feed.
Finance activity timeline with avatar nodes, status badges, attachments, and inline actions
timeline-3
Vertical finance feed of payouts, risk flags, invoices, and ledger updates. Avatar nodes, dot plus colored status Badges, attachments, participant AvatarGroup, inline action Buttons. ReUI Timeline, Badge, Avatar, Button. Audit log, activity feed.
Team activity feed timeline with avatars, attachments, progress, ratings, and per-event action menu
timeline-4
Vertical activity stream mixing actor avatars, attachment downloads, participant avatar groups, status badges, progress bars, star ratings, and a per-event action menu. Uses ReUI Timeline, Badge, Rating, Avatar, Progress, DropdownMenu.
Release changelog timeline with side date rail and color-coded type, impact, and change badges
timeline-5
Vertical changelog feed: each release shows a version title, summary, and tagged badges for type (New, Fixed), impact, and changes, with a left date rail. ReUI Timeline, Badge. Release notes, product updates, version history.
Horizontal scrolling approval workflow timeline with file attachments, ratings, and owner avatars
timeline-6
Horizontal scrollable timeline tracking approval steps, each with a phase status badge, attachment download, star rating, action button, and owner avatar. ReUI Timeline, Badge, Rating with shadcn Avatar, Button, ButtonGroup. For approval flows.
Account rollout activity dropdown with scrollable vertical timeline and per-step badges
timeline-7
Dropdown holding a scrollable vertical timeline of rollout steps, each with date, owner, status badge, dot-meta badge, attachment and star rating. ReUI Timeline, Badge, Rating with shadcn DropdownMenu, ScrollArea. Activity feed, audit log.
Slide-out team activity timeline panel in a right sheet with avatars, badges, and progress
timeline-8
Right-side activity feed panel listing team events as timeline entries with avatars, status badges, progress bars, attachments, ratings, and a per-item action menu. ReUI Timeline, Badge, Rating with shadcn Sheet, Avatar, DropdownMenu, ScrollArea.
Inset right sheet with a scrollable finance activity feed timeline and avatar indicators
timeline-9
Floating right sheet with a scrollable activity feed of payouts, risk reviews, and ledger entries with avatar indicators, status badges, attachment downloads, and inline actions. ReUI Timeline, Badge; shadcn Sheet, Avatar. Audit log, notifications.
Wishlist List View With Multi-Select Bulk Actions, Stock Status, and Price-Drop Signal Badges
wishlist-1
Saved-items wishlist as selectable rows with thumbnail, brand, variant, stock dot, and price. Select-all toolbar morphs into bulk Add to Cart, Remove, Clear; per-row Notify Me. ReUI Badge, shadcn Checkbox, Button, Item. Account and saved-items pages.
Saved-items wishlist grid with price-drop and restock signal badges plus status tabs
wishlist-2
Ecommerce wishlist that flags saved products with price-drop, restock, almost-gone, or unavailable badges, filters by status tabs, and bulk-adds in-stock items to cart. ReUI Badge, shadcn Tabs, Item, Button. Saved items, favorites, watchlist.
Wishlist Grid With Stock and Price-Drop Signal Badges and Tab Filters
wishlist-3
Saved-items wishlist grid where each card shows a stock or price signal badge, Move To Cart or Notify When Restocked, and hover remove. Line Tabs filter by signal with live counts. ReUI Badge, shadcn Tabs, Button, Item, Empty. For favorites, saved.
Wishlist Collections Grid with 2x2 Cover Mosaic Cards and Filter Tabs
wishlist-4
Account wishlist as named boards with 2x2 mosaic cover cards, +N overflow, item count, updated time, Shared badge, hover share/delete. Line Tabs filter All, Recently Updated, Shared, plus a dashed New Collection tile. ReUI Badge, shadcn Tabs, Item.
Priority-Grouped Wishlist with Stock Status and Savings Summary
wishlist-5
Saved-items page grouping products into Must Have, Save For Later, Maybe buckets with per-item stock status, price savings, a total, and lock-on-add cart actions. ReUI Badge; shadcn Button, Empty, Item, Tooltip. Wishlist, favorites, saved items.
Multi-Collection Wishlist with Cover-Stacked Collection Rail
wishlist-6
Saved products in selectable collections: a left rail of cover-stacked tiles with count and total, plus a product pane with brand, price, savings, and bulk add-to-cart. shadcn Breadcrumb, Button, Empty, Item. Wishlist, favorites, lookbook.
Three-step billing setup wizard card with horizontal stepper, per-step validation, review summary
wizard-1
Multi-step account and payment onboarding wizard in a Card: ReUI Stepper nav gates locked steps, validates each step, then shows a review summary with Badge. Uses Field, Input, InputGroup, Select, Switch, Button. For billing, checkout, onboarding.
Three-step procurement vendor onboarding wizard with per-step validation and review summary
wizard-2
Multi-step vendor KYC intake: company details, compliance with repeatable beneficial owners and tax ID, then a document checklist and review summary. Per-step validation. ReUI Stepper, Frame, Badge plus shadcn Field, Input, Select, Checkbox, Tooltip.
Invoice send wizard with step progress bar, line-item table, and live tax and discount totals
wizard-3
Four-step invoice send flow with progress Stepper, editable line-item Table, and live subtotal, tax, discount, and total. ReUI Stepper, Badge, Combobox; shadcn Card, Select, Calendar, Table, Tooltip. For billing, checkout, invoicing wizards.
Four-step billing upgrade wizard with live invoice preview sidebar and due-today total
wizard-4
Plan, seats, payment, and review flow that recalculates seat subtotal, annual discount, and support fee into a draft invoice. Uses ReUI Stepper, Badge, Alert plus Card, RadioGroup, Slider, Select, and Calendar. For checkout and seat upgrade screens.
Three step team invitation wizard with per-row role assignment and pre-send review
wizard-5
Add member emails with inline validation and per-row roles, set sender and expiry, then review a recipients table and send-readiness checks before queuing. ReUI Stepper, Frame, Badge plus shadcn Table, Select, Avatar. For onboarding and seat invites.
Five-step ecommerce product creation wizard with variant options and SKU matrix
wizard-6
Add-product flow across details, image gallery, variant option groups, pricing, and a per-variant SKU matrix table. ReUI Stepper, Badge, Alert with shadcn Card, Select, Switch, Table, Dialog. Product setup wizard, multi-step form.
Four-step fund transfer wizard with payee search, currency combobox, and balance checks
wizard-7
Money transfer flow over a 4-step Stepper: pick payee, set amount and funding source, review, authorize with a 6-digit code. Recent-payee grid, searchable saved accounts, multi-currency Combobox, low-balance Alert. ReUI Stepper plus shadcn Combobox.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information