ReUI components

Design-forward shadcn kit for interfaces that stand out. 1000+ free patterns!

Components: 1,292
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 3,632
Source: https://github.com/keenthemes/reui
Website: https://reui.io
Install: npx shadcn@latest add @reui/{name}

All ReUI components

Alert: Displays a callout for user attention, such as a success message, warning, or error.
Autocomplete: An input that suggests options as you type.
Badge: Badges are used to highlight items, notify users, or display statuses.
A basic single-expand accordion: A basic single-expand accordion
Accordion with rotating arrow indicator: Accordion with rotating arrow indicator
Accordion pattern for onboarding or setup steps with icons, badges, and QR codes: Accordion pattern for onboarding or setup steps with icons, badges, and QR codes
Accordion with plus/minus indicators: Accordion with plus/minus indicators
Accordion with borders and rounded corners: Accordion with borders and rounded corners
Accordion embedded within a Card: Accordion embedded within a Card
Accordion with disabled items and highlighted state: Accordion with disabled items and highlighted state
Advanced accordion with custom icons and badges: Advanced accordion with custom icons and badges
Accordion items integrated within Frame and FramePanel: Accordion items integrated within Frame and FramePanel
Nested accordion example with bordered items: Nested accordion example with bordered items
User list accordion with avatars and role indicators: User list accordion with avatars and role indicators
Basic alert: Basic alert
Alert with icon and action buttons: Alert with icon and action buttons
Alert with description and action buttons: Alert with description and action buttons
Alert integrated within a Frame with reset borders: Alert integrated within a Frame with reset borders
Stacked alerts within a Frame: Stacked alerts within a Frame
Alert with actions integrated within a Frame: Alert with actions integrated within a Frame
Inverted alert variant: Inverted alert variant
Urgent billing notice: Urgent billing notice
Service status summary stacked within a frame: Service status summary stacked within a frame
Feature discovery alert: Feature discovery alert
User message notification alert: User message notification alert
Alert with icon: Alert with icon
User message notification alert: User message notification alert
Alert with icon and action buttons: Alert with icon and action buttons
Destructive alert with icon and action buttons: Destructive alert with icon and action buttons
Info alert with icon and action buttons: Info alert with icon and action buttons
Success alert: Success alert
Warning alert: Warning alert
Error alert: Error alert
Invert alert: Invert alert
Basic alert dialog with title, description, and action buttons: Basic alert dialog with title, description, and action buttons
Confirmation for successful e-ticket registration: Confirmation for successful e-ticket registration
System update notification requiring application restart: System update notification requiring application restart
Billing warning for expired subscriptions or failed payments: Billing warning for expired subscriptions or failed payments
Logout confirmation dialog: Logout confirmation dialog
Advanced security audit confirmation: Advanced security audit confirmation
Small size alert dialog for quick confirmations: Small size alert dialog for quick confirmations
Alert dialog with icon: Alert dialog with icon
Small size alert dialog with media (icon): Small size alert dialog with media (icon)
Destructive alert dialog for irreversible actions like deletion: Destructive alert dialog for irreversible actions like deletion
Alert dialog nested within a standard Dialog component: Alert dialog nested within a standard Dialog component
Task success confirmation: Task success confirmation
Account deactivation confirmation: Account deactivation confirmation
Warning for unsaved changes when navigating away: Warning for unsaved changes when navigating away
16:9 widescreen aspect ratio: 16:9 widescreen aspect ratio
4:3 standard aspect ratio: 4:3 standard aspect ratio
1:1 square aspect ratio: 1:1 square aspect ratio
21:9 ultrawide aspect ratio: 21:9 ultrawide aspect ratio
9:16 portrait aspect ratio: 9:16 portrait aspect ratio
3:2 classic photography aspect ratio: 3:2 classic photography aspect ratio
4:5 social media portrait aspect ratio: 4:5 social media portrait aspect ratio
16:10 computer monitor aspect ratio: 16:10 computer monitor aspect ratio
Single file attachment in an assistant reply: Single file attachment in an assistant reply
Composer tray with removable attachments: Composer tray with removable attachments
Image thumbnails in a snapping strip: Image thumbnails in a snapping strip
Three sizes carrying three levels of an answer: Three sizes carrying three levels of an answer
Upload queue across all five states: Upload queue across all five states
File picker that fills an attachment tray: File picker that fills an attachment tray
Basic autocomplete control: Basic autocomplete control
Small autocomplete: Small autocomplete
Large autocomplete: Large autocomplete
Form integration: Form integration
Disabled state: Disabled state
Auto highlight option as you type: Auto highlight option as you type
Control with label: Control with label
With clear button: With clear button
With trigger button: With trigger button
With clear and trigger buttons: With clear and trigger buttons
With groups and labels: With groups and labels
With search results: With search results
Basic avatar: Basic avatar
Basic avatar group: Basic avatar group
Avatar group with numerical count: Avatar group with numerical count
Avatar group with an icon count: Avatar group with an icon count
Avatar with a distinct border ring: Avatar with a distinct border ring
Avatar with light background color fallback: Avatar with light background color fallback
Avatar with a solid background color fallback: Avatar with a solid background color fallback
Avatar with user details and badge: Avatar with user details and badge
Avatar with grayscale image filter: Avatar with grayscale image filter
Avatar group with online status on one: Avatar group with online status on one
Avatar inside small outline button: Avatar inside small outline button
Avatar with fallback: Avatar with fallback
Avatar social proof with text label: Avatar social proof with text label
Compact social proof with initials: Compact social proof with initials
Avatar group with hover tooltips and lift effect: Avatar group with hover tooltips and lift effect
Avatar group with hover effect: Avatar group with hover effect
Avatar group with hover effect and tooltips: Avatar group with hover effect and tooltips
Avatar group with numerical count: Avatar group with numerical count
Pilled small outline button with avatar: Pilled small outline button with avatar
Pilled small button with avatar: Pilled small button with avatar
Avatar inside an empty state example: Avatar inside an empty state example
Avatar group with icon count and button: Avatar group with icon count and button
Avatars with different sizes: Avatars with different sizes
Avatar with loading state demonstration: Avatar with loading state demonstration
Avatar with custom badge: Avatar with custom badge
Avatar with ring animation: Avatar with ring animation
Avatar with gradient animated ring: Avatar with gradient animated ring
Avatar with multiple badges: Avatar with multiple badges
Compact avatar dropdown menu: Compact avatar dropdown menu
Avatars with different border radiuses: Avatars with different border radiuses
Avatars with custom sizes: Avatars with custom sizes
Avatar with an online status badge: Avatar with an online status badge
Avatar with badge icon: Avatar with badge icon
Avatar with different badge positions: Avatar with different badge positions
Avatar with different badge positions: Avatar with different badge positions
Default badge: Default badge
Info outline badge: Info outline badge
Success outline badge: Success outline badge
Warning outline badge: Warning outline badge
Primary light badge: Primary light badge
Destructive light badge: Destructive light badge
Success light badge: Success light badge
Info light badge: Info light badge
Warning light badge: Warning light badge
Badge size variations: Badge size variations
Badge with full radius (radius="full"): Badge with full radius (radius="full")
Secondary badge: Secondary badge
Badge with an icon: Badge with an icon
Badge with a dismiss button: Badge with a dismiss button
Badge with a status dot: Badge with a status dot
Badge rendered as a link: Badge rendered as a link
Badge with avatar: Badge with avatar
Badge with flag image: Badge with flag image
Destructive badge: Destructive badge
Success badge: Success badge
Info badge: Info badge
Warning badge: Warning badge
Outline badge: Outline badge
Primary outline badge: Primary outline badge
Destructive outline badge: Destructive outline badge
Basic breadcrumb: Basic breadcrumb
Pill-style breadcrumb inside frame: Pill-style breadcrumb inside frame
Breadcrumb items containing badge with count: Breadcrumb items containing badge with count
Breadcrumb starting with home icon item: Breadcrumb starting with home icon item
Breadcrumb with a custom separator: Breadcrumb with a custom separator
Button-style breadcrumb: Button-style breadcrumb
Breadcrumb with project, user and document info: Breadcrumb with project, user and document info
Breadcrumb with dropdown menu: Breadcrumb with dropdown menu
Breadcrumb with Next.js link: Breadcrumb with Next.js link
Breadcrumb with a custom slash separator: Breadcrumb with a custom slash separator
Breadcrumb with icons for each item: Breadcrumb with icons for each item
Breadcrumb with ellipsis for long paths: Breadcrumb with ellipsis for long paths
Breadcrumb items with avatars: Breadcrumb items with avatars
Breadcrumb with double chevron separators: Breadcrumb with double chevron separators
Breadcrumb inside card: Breadcrumb inside card
Support thread with sender alignment: A two sided billing thread where align and variant carry the sender.
Bubble variants in a release thread: All seven variants doing the job each one is for, in one deploy thread.
Grouped consecutive messages: Consecutive turns from one sender collapse into a single BubbleGroup.
Message reactions and a reaction button: A static emoji row, a pressable reaction with a count, and a top anchored row.
Long reply with show more: A long assistant answer folds to its first paragraph behind a Collapsible.
Quick reply bubbles and an action row: Tinted bubbles that are real buttons and a link, plus an action row after the pick.
Assistant answer with formatted content: A ghost bubble carrying a heading, a list, emphasis and inline code.
Default button: Default button
Disabled button: Disabled button
Icon button: Icon button
Button with an icon on the right: Button with an icon on the right
Button in a loading state: Button in a loading state
Button with an icon on the left: Button with an icon on the left
Button with an invalid state highlight: Button with an invalid state highlight
Secondary button with an icon on the left: Secondary button with an icon on the left
Secondary button with an icon on the right: Secondary button with an icon on the right
Outline button with an icon on the left: Outline button with an icon on the left
Outline button with an icon on the right: Outline button with an icon on the right
Secondary button: Secondary button
Ghost button with an icon on the left: Ghost button with an icon on the left
Ghost button with an icon on the right: Ghost button with an icon on the right
Destructive button with an icon on the left: Destructive button with an icon on the left
Destructive button with an icon on the right: Destructive button with an icon on the right
Extra small icon button: Extra small icon button
Small icon button: Small icon button
Large (lg) icon-only button: Large (lg) icon-only button
Button rendered as a Next.js Link: Button rendered as a Next.js Link
Link button with an icon on the left: Link button with an icon on the left
Link button with an icon on the right: Link button with an icon on the right
Outline button: Outline button
Large button with an icon on the left: Large button with an icon on the left
Large button with an icon on the right: Large button with an icon on the right
Outline button with an invalid state: Outline button with an invalid state
Ghost button with an invalid state: Ghost button with an invalid state
Button with an icon on the left: Button with an icon on the left
Ghost button with more/less toggle: Ghost button with more/less toggle
Social login buttons with Remix Icons: Social login buttons with Remix Icons
Outline like button with count: Outline like button with count
Star button with count: Star button with count
Button with an unread badge: Button with an unread badge
Ghost button: Ghost button
Button with icon, label, and shortcut keys: Button with icon, label, and shortcut keys
Copy button with feedback: Copy button with feedback
Icon-only copy button with feedback: Icon-only copy button with feedback
Animated hamburger / close toggle button: Animated hamburger / close toggle button
Async action button with loading and success states: Async action button with loading and success states
Outline button with inline count badge: Outline button with inline count badge
Button with status dot badge: Button with status dot badge
Ghost button with a status badge: Ghost button with a status badge
Icon button with notification badge: Icon button with notification badge
Go back link button: Go back link button
Destructive button: Destructive button
Go back link button with animation: Go back link button with animation
Expanding button from icon to label: Expanding button from icon to label
Multi-line button with icon, title & description: Multi-line button with icon, title & description
Sliding Icon Button (Hover reveal): Sliding Icon Button (Hover reveal)
Shortcut Tooltip Button (Kbd hints): Shortcut Tooltip Button (Kbd hints)
Button with avatar: Button with avatar
Outline button with avatar: Outline button with avatar
Small button with avatar: Small button with avatar
Small outline button with avatar: Small outline button with avatar
Social login buttons with Remix icons: Social login buttons with Remix icons
Link button variant: Link button variant
Social icon-only buttons with Remix icons: Social icon-only buttons with Remix icons
Theme toggle button with animated moon and sun icons: Theme toggle button with animated moon and sun icons
Extra small button: Extra small button
Small button: Small button
Large button: Large button
Basic button group with two buttons: Basic button group with two buttons
Button group used for standard pagination: Button group used for standard pagination
Pagination split into page numbers and navigation arrows: Pagination split into page numbers and navigation arrows
Button group for editor text alignment controls: Button group for editor text alignment controls
Vertical button group orientation: Vertical button group orientation
Nested vertical button group for complex tool palettes: Nested vertical button group for complex tool palettes
Star button group with count and dropdown: Star button group with count and dropdown
Search input with filter menu and clear button: Search input with filter menu and clear button
Button group with comprehensive action menu: Button group with comprehensive action menu
Advanced git toolbar with branch selection and split commit button: Advanced git toolbar with branch selection and split commit button
Button group with dropdown menu and input group: Button group with dropdown menu and input group
Button group with button followed by input: Button group with button followed by input
Button group with input group and button: Button group with input group and button
Button group with dropdown menu and input group: Button group with dropdown menu and input group
Basic button group with disabled button: Basic button group with disabled button
Button group buttons with separators: Button group buttons with separators
View switcher for dashboard layouts: View switcher for dashboard layouts
Rating scale using numerical buttons: Rating scale using numerical buttons
Button group with user selection select: Button group with user selection select
Button group with select status addon: Button group with select status addon
Volume controller with plus/minus actions: Volume controller with plus/minus actions
Button group with follower count: Button group with follower count
Button group with buttons and badge: Button group with buttons and badge
Active state button group with count: Active state button group with count
Horizontal button group with primary and secondary labels: Horizontal button group with primary and secondary labels
Button group with dropdown menu and view toggle: Button group with dropdown menu and view toggle
Button group with select controls: Button group with select controls
Segmented control with dropdown inside button group: Segmented control with dropdown inside button group
Pagination button group: Pagination button group
View switcher button group: View switcher button group
Zoom controls button group: Zoom controls button group
Media player controls button group: Media player controls button group
Split button with dropdown trigger: Split button with dropdown trigger
Button group with dropdown menu: Button group with dropdown menu
Vertical button group: Vertical button group
Model selector with tier badges: Model selector with tier badges
Segmented order type selector: Segmented order type selector
Buy sell hold toggle group: Buy sell hold toggle group
Pipeline stage mover with dropdown: Pipeline stage mover with dropdown
Environment switcher with indicator: Environment switcher with indicator
Compact time interval selector: Compact time interval selector
Review actions split button: Review actions split button
Toolbar filter with export and view toggle: Toolbar filter with export and view toggle
Vertical nav links with icons: Vertical nav links with icons
Team activity and collaboration group: Team activity and collaboration group
Toolbar filter sort and more: Toolbar filter sort and more
New button with create dropdown: New button with create dropdown
Refresh share and export dropdown: Refresh share and export dropdown
Publish controls with split button and overflow: Publish controls with split button and overflow
API service environment and version selectors: API service environment and version selectors
Payout release controls with amount context: Payout release controls with amount context
Attachment button group with download action: Attachment button group with download action
Agent mode selector with credit cap dropdown: Agent mode selector with credit cap dropdown
Button group using icons for visual actions: Button group using icons for visual actions
Dropdown menu with status indicator: Dropdown menu with status indicator
Button group styled as a like button with a counter: Button group styled as a like button with a counter
Nested button groups for complex action sets: Nested button groups for complex action sets
Basic calendar: Basic calendar
Display week numbers: Display week numbers
Current month button: Current month button
Today button: Today button
Custom navigation with year view: Custom navigation with year view
Preset time selection: Preset time selection
Calendar with presets: Calendar with presets
Range calendar with presets: Range calendar with presets
Calendar with pricing: Calendar with pricing
Calendar with presets: Calendar with presets
Appointment calendar: Appointment calendar
Range calendar: Range calendar
Display 2 months: Display 2 months
Display 2 months with range picker: Display 2 months with range picker
Calendar with event list: Calendar with event list
Localize calendar: Localize calendar
Calendar with date picker: Calendar with date picker
Calendar with date range picker: Calendar with date range picker
Calendar with date picker and year view: Calendar with date picker and year view
Calendar with date and appointment picker: Calendar with date and appointment picker
Calendar with date picker and presets: Calendar with date picker and presets
Range calendar with date picker and presets: Range calendar with date picker and presets
Disabled dates: Disabled dates
Calendar with date and time range picker: Calendar with date and time range picker
Multiple day selection: Multiple day selection
Custom select day style: Custom select day style
Custom select range style: Custom select range style
Right navigation: Right navigation
Month and year selection: Month and year selection
Year select with navigation: Year select with navigation
Basic card: Basic card
Full card with image and shadow fade effect: Full card with image and shadow fade effect
Card with stacked depth effect: Card with stacked depth effect
Advanced clean login form card: Advanced clean login form card
Expandable billing usage card: Expandable billing usage card
Deployment status summary card: Deployment status summary card
Stat card with trend and overflow menu: Stat card with trend and overflow menu
Card with header badge and actions: Card with header badge and actions
Card with icon, title and link: Card with icon, title and link
Card with header label and link: Card with header label and link
Card header with border: Card header with border
Card with border separation: Card with border separation
Card with header and footer: Card with header and footer
Card with link: Card with link
Card with dropdown menu: Card with dropdown menu
Card with image: Card with image
Card with image scale hover effect: Card with image scale hover effect
Card with full image: Card with full image
Basic carousel with single item: Basic carousel with single item
Carousel with overlay thumbnail navigation: Carousel with overlay thumbnail navigation
Carousel with dots navigation and content overlays: Carousel with dots navigation and content overlays
Vertical carousel orientation: Vertical carousel orientation
Carousel with multiple items visible: Carousel with multiple items visible
Carousel with responsive basis: Carousel with responsive basis
Carousel with autoplay plugin: Carousel with autoplay plugin
Carousel with centered slide alignment: Carousel with centered slide alignment
Carousel with custom spacing: Carousel with custom spacing
Carousel with images and overlays: Carousel with images and overlays
Carousel with thumbnail navigation: Carousel with thumbnail navigation
Nested attribute picker with drill-down navigation.: Nested attribute picker with drill-down navigation.
Translated labels across a country picker.: A German country picker where every string the primitive renders comes from labels, including the live-region announcements, with each…
Two-line rows with descriptions and a disabled option.: Two-line rows with descriptions and a disabled option.
Form field that submits like a native input.: Form field that submits like a native input.
Columns mode with independently scrolling panels.: A media library in Miller columns where all three panes overflow and each scrolls on its own.
Tree mode with inline expand and multi-select scopes.: Tree mode with inline expand and multi-select scopes.
Async drill-down that loads before it navigates.: Async drill-down that loads before it navigates.
Virtualized level with thousands of rows.: Six unevenly sized regions of country markets, windowed so only the visible rows ever mount.
Consumer-rendered removable chips with path-aware labels.: Chips rendered outside the primitive from useCascaderSelection, each carrying its full path so repeated column names stay distinct.
Cascading tree multi-select inside a popover.: A cascading tree with indeterminate branches in a popover, bounded by the positioner's available height.
Status and priority colour dots via renderLabel.: Status and priority colour dots via renderLabel.
Multi-select permissions with checkboxes and a selection cap.: Multi-select permissions with checkboxes and a selection cap.
Expense accounts with a colour inherited down each branch.: Expense accounts with a colour inherited down each branch.
Global search across the whole tree from a nested level.: A product category field that reopens on its current level, where typing still searches the whole catalog and each hit shows the trail it…
Deep search across every level with path-annotated results.: Deep search across every level with path-annotated results.
Pinned footer with a side-anchored import flyout.: Pinned footer with a side-anchored import flyout.
Custom rows with avatars and role badges.: Custom rows pairing avatars with outline role badges that color-code seniority.
Trigger path formatting and collapsing.: Trigger path formatting and collapsing.
Embedded panel without a popover.: Embedded panel without a popover.
Flat adjacency data with a parent pointer.: Flat adjacency data with a parent pointer.
Controlled path, value, query and open state.: External buttons jump the panel to a level, reset it to the root and clear the selection, with all four controlled props printed under the…
Basic bar chart: Basic bar chart
Duotone gradient bar chart: Duotone gradient bar chart
Animated monochrome bar chart: Animated monochrome bar chart
Vertical bar chart: Vertical bar chart
Gradient area chart with stripe overlay: Gradient area chart with stripe overlay
Stacked area chart with dashed strokes: Stacked area chart with dashed strokes
Step area chart with dotted pattern fill: Step area chart with dotted pattern fill
Area chart with glowing dot markers: Area chart with glowing dot markers
Forecast line chart with stripe pattern zone: Forecast line chart with stripe pattern zone
Stacked area chart with crosshatch pattern fill: Stacked area chart with crosshatch pattern fill
Donut chart with center total: Donut chart with center total
Multi-dataset bar chart: Multi-dataset bar chart
Donut chart with center stats: Donut chart with center stats
Bug priority pie with stripe patterns: Bug priority pie with stripe patterns
Active segment donut with center label: Active segment donut with center label
Radar chart with gradient fill: Radar chart with gradient fill
Filled radar with glowing stroke: Filled radar with glowing stroke
Lighthouse scores radial with labels: Lighthouse scores radial with labels
Diagonal stripe bar chart: Diagonal stripe bar chart
Dotted pattern bar chart: Dotted pattern bar chart
Striped and solid bar chart: Striped and solid bar chart
3D gradient bar chart: 3D gradient bar chart
Gradient bar chart: Gradient bar chart
3D isometric bar chart: 3D isometric bar chart
Dotted and solid bar chart: Dotted and solid bar chart
Basic checkbox with label: Basic checkbox with label
Checkbox group in a frame: Checkbox group in a frame
Card checkbox group with icons: Card checkbox group with icons
Card checkbox group with icons: Card checkbox group with icons
Custom positioned checkbox: Custom positioned checkbox
Custom positioned checkbox: Custom positioned checkbox
Avatar based card checkbox: Avatar based card checkbox
Nested checkbox group: Nested checkbox group
Payment method card checkbox: Payment method card checkbox
Checkbox with label and tooltip info: Checkbox with label and tooltip info
Checkbox group with badge: Checkbox group with badge
Disabled checkbox: Disabled checkbox
Checkbox with label and tooltip info: Checkbox with label and tooltip info
Inline horizontal checkbox group: Inline horizontal checkbox group
Checkbox with feature badge: Checkbox with feature badge
Invalid checkbox: Invalid checkbox
Indeterminate checkbox: Indeterminate checkbox
Checkbox with label and description: Checkbox with label and description
Colored checkbox: Colored checkbox
Circle checkbox: Circle checkbox
Checkbox group: Checkbox group
Card checkbox with group: Card checkbox with group
Basic code block: Code block with header, filename, language and copy button.
Long file with expand: Collapsed at a line budget with an expand control and a line offset.
Line actions and diagnostics: Error and warning lines with an action button on the active line.
Line selection: Selecting lines to ask an assistant about them.
Search in file: Live search marking every match, with a counter that reads the block through useCodeBlockConfig.
File tabs in a dense frame: A framed file switcher loading one grammar chunk per selected language.
Pre-highlighted lines: Lines built without shiki, the shape a server component passes down.
Before and after: Two blocks stacked in a frame for a refactor review.
Soft wrap: Long single-line content with a wrap toggle.
Unified patch review: A git patch parsed into files with dual old/new gutters, counters and a download.
Design-token theme: Syntax colors driven by CSS variables mapped to design tokens.
Pinned copy button: Headerless block with a pinned copy button and dual-axis scrolling.
Always-dark block: A block that stays dark in both site themes, with window chrome and every line state.
Dark terminal: ANSI-style colored terminal output built from plain lines.
Patch review actions: Agent-proposed diff with accept and reject actions.
Nested code folding: Fold regions detected from indentation, with nesting and fold-all controls.
Fix with AI on the failing line: A line action scoped to the diagnostic line that applies the patch.
Reference lines in chat: A gutter button that turns lines or a selection into file:line reference badges in a chat composer.
Framed by an external ScrollArea: A changed-file list where one shadcn ScrollArea scrolls every block at once.
ANSI terminal output: Agent stdout with SGR colour codes parsed by ansiToLines, retintable via --code-ansi-* variables.
Streaming agent response: Agent writing code in real time with a caret and stick-to-bottom.
AI chat with code fences: Streaming assistant message rendering markdown code fences.
Diff with change summary: A props-driven diff with added and removed lines and a change summary.
Diff via shiki transformers: A diff expressed through a shiki transformer instead of props.
Highlighted lines and words: Line ranges and word matches highlighted together.
Focus walkthrough: Stepping through regions of a file with the rest dimmed.
Terminal output: Unhighlighted command output with a wrap toggle.
Basic collapsible: Basic collapsible
Tree view with file actions: Tree view with file actions
Collapsible with checkbox settings: Collapsible with checkbox settings
Collapsible animated card: Collapsible animated card
Collapsible card with bottom trigger: Collapsible card with bottom trigger
Collapsible form fields: Collapsible form fields
Collapsible frame: Collapsible frame
Nested collapsible list with actions: Nested collapsible list with actions
Collapsible User profile: Collapsible User profile
Multi-level collapsible menu: Multi-level collapsible menu
Inline color panel: Saturation area, hue and opacity sliders, format fields and preset swatches rendered in place.
Text and highlight colors: Editor toolbar buttons with preset palettes and a way back to the default color.
Channel sliders: Red, green, blue and opacity sliders with numeric fields, each track redrawn from the others.
Design inspector: Fill, stroke and shadow rows that open a compact picker with vertical hue and opacity tracks.
Contrast checker: Text and background pickers with a live preview, the WCAG ratio and AA and AAA results.
Brand scale: 11 shades from 50 to 950 generated in OKLCH from one base color, copied as CSS variables.
Form field with validation: Native form field with a required check, an error, reset and the submitted value.
Popover picker: Outline trigger in a labelled field that opens the full picker with an eye dropper and format fields.
Color input: Typable field that reads hex, rgb(), hsl(), oklch() or a CSS name, with a swatch that opens the picker.
Opacity: A banner overlay with an opacity slider and field, written as rgb() with alpha.
Preset swatches: Round label colors to pick from, a plus that opens the full picker, and a live label preview.
OKLCH theme token: Lightness, chroma and hue sliders for a --primary token, with a live Button and Badge preview.
Format converter: One color as HEX, RGB, HSL, HSB and OKLCH, each with a copy button.
Hue wheel: A hue ring around a saturation and brightness square, with HEX, RGB and HSL fields.
Recent colors: Each pick is saved to a Recent row once a drag is released, not on every move.
A basic combobox with a list of options: A basic combobox with a list of options
A combobox rendered inside a popup: A combobox rendered inside a popup
A combobox used within a form: A combobox used within a form
A multi-select combobox: A multi-select combobox
A disabled multi-select combobox: A disabled multi-select combobox
A multi-select combobox in an invalid state: A multi-select combobox in an invalid state
A multi-select with chips that cannot be removed: A multi-select with chips that cannot be removed
A combobox with custom item rendering: A combobox with custom item rendering
A combobox used within a dialog: A combobox used within a dialog
A combobox with a custom trigger icon: A combobox with a custom trigger icon
A multi-select combobox with user tags: A multi-select combobox with user tags
A disabled combobox: A disabled combobox
Invisible combobox with member tags: Invisible combobox with member tags
A status change combobox: A status change combobox
A priority change combobox: A priority change combobox
A lead selection combobox: A lead selection combobox
A multi-member selection combobox: A multi-member selection combobox
A date selection combobox with an optional custom picker dialog: A date selection combobox with an optional custom picker dialog
A multi-label selection combobox with a no-label mode: A multi-label selection combobox with a no-label mode
A team selection combobox: A team selection combobox
An assignee selection combobox: An assignee selection combobox
A combobox in an invalid state: A combobox in an invalid state
A combobox with a clear button: A combobox with a clear button
A combobox with auto-highlight enabled: A combobox with auto-highlight enabled
A combobox with grouped options: A combobox with grouped options
A combobox with grouped options and separators: A combobox with grouped options and separators
A combobox with a large list of options: A combobox with a large list of options
A combobox with an icon addon: A combobox with an icon addon
Basic command: Basic command
Command with shortcuts: Command with shortcuts
Command with groups: Command with groups
Command with many groups: Command with many groups
File search command palette: File search command palette
User search command with avatars: User search command with avatars
Action palette with keyboard shortcuts: Action palette with keyboard shortcuts
Command with recent and favorites sections: Command with recent and favorites sections
Basic context menu.: Basic context menu.
Context menu used inside a dialog component.: Context menu used inside a dialog component.
Context menu with icons for common actions.: Context menu with icons for common actions.
Context menu with keyboard shortcuts.: Context menu with keyboard shortcuts.
Context menu with nested submenus.: Context menu with nested submenus.
Context menu labels and separators.: Context menu labels and separators.
Context menu with checkbox items.: Context menu with checkbox items.
Context menu with radio items.: Context menu with radio items.
Context menu with destructive actions.: Context menu with destructive actions.
Context menu with different alignment sides.: Context menu with different alignment sides.
Data grid with pagination: Data grid with pagination
Data grid with column icons: Data grid with column icons
Data grid with sortable columns: Data grid with sortable columns
Data grid with movable columns: Data grid with movable columns
Data grid with draggable columns: Data grid with draggable columns
Data grid with draggable rows: Data grid with draggable rows
Data grid with column resizing: Data grid with column resizing
Data grid with pinnable columns: Data grid with pinnable columns
Data grid with sticky header: Data grid with sticky header
Data grid with column controls: Data grid with column controls
Data grid with card container: Data grid with card container
Data grid with cell border: Data grid with cell border
Data grid with column visibility controls: Data grid with column visibility controls
Data grid with loading skeleton: Data grid with loading skeleton
Data grid with CRUD features: Data grid with CRUD features
Data grid with CRUD in frame container: Data grid with CRUD in frame container
Data grid with column totals footer: Data grid with column totals footer
Data grid with summary stats footer: Data grid with summary stats footer
Data grid with per-column aggregate footer: Data grid with per-column aggregate footer
Data grid with local infinite scroll: Data grid with local infinite scroll
Data grid with remote infinite scroll: Data grid with remote infinite scroll
Data grid with row pinning support: Data grid with row pinning support
Data grid with dense layout: Data grid with dense layout
Data grid with tree rows: Data grid with tree rows
Data grid with spreadsheet editing: Data grid with spreadsheet editing
Data grid with column virtualization: Data grid with column virtualization
Data grid with localized labels: Data grid with localized labels
Data grid with server side pagination: Data grid with server side pagination, sorting, search and status filter
Data grid without table borders: Data grid without table borders
Data grid with striped rows: Data grid with striped rows
Data grid with auto width table layout: Data grid with auto width table layout
Data grid with row selection: Data grid with row selection
Data grid with expandable rows: Data grid with expandable rows
Data grid with sub table: Data grid with sub table
Basic date selector: Basic date selector
Date selector with popover: Date selector with popover
Date selector with dialog: Date selector with dialog
Date selector with dropdown menu: Date selector with dropdown menu
Basic dialog: Basic dialog
Dialog with full width button: Dialog with full width button
Dialog with scrollable content: Dialog with scrollable content
Dialog with scrollable content and sticky footer: Dialog with scrollable content and sticky footer.
Dialog without a close button: Dialog without a close button.
Dialog with custom close button: Dialog with custom close button
Full-screen fluid dialog with sticky header and footer: Full-screen fluid dialog with sticky header and footer
Confirmation dialog with destructive action: Confirmation dialog with destructive action
Cookie consent dialog: Cookie consent dialog
Dialog with keyboard shortcuts list: Dialog with keyboard shortcuts list
A basic drawer with scrollable content: A basic drawer with scrollable content
A drawer that opens from the right side: A drawer that opens from the right side
A drawer that opens from the left side: A drawer that opens from the left side
A drawer that opens from the top side: A drawer that opens from the top side
Drawers opening from different sides: Drawers opening from different sides
Basic dropdown menu: Basic dropdown menu
Workspace switcher dropdown menu: Workspace switcher dropdown menu
Notifications dropdown menu: Notifications dropdown menu
Actions dropdown menu: Actions dropdown menu
Share and export dropdown menu: Share and export dropdown menu
User profile dropdown menu with theme toggle and status selector: User profile dropdown menu with theme toggle and status selector
User and create menu: User and create menu
Quick action menu: Quick action menu
Notifications dropdown with items: Notifications dropdown with items
AI model selector with provider icons: AI model selector with provider icons
Dropdown menus opening positions: Dropdown menus opening positions
Dropdown menu with icons: Dropdown menu with icons
Dropdown menu with keyboard shortcuts: Dropdown menu with keyboard shortcuts
Dropdown menu with nested submenus: Dropdown menu with nested submenus
Dropdown menu with checkboxes: Dropdown menu with checkboxes
Dropdown menu with radio groups: Dropdown menu with radio groups
Advance dropdown menu: Advance dropdown menu
User profile dropdown menu: User profile dropdown menu
Inline emoji picker: The full picker inline on a card: search, category tabs, the grid and a footer with the preview and skin tone.
Chat composer: A chat composer that inserts emoji at the caret and keeps the draft in view.
Message reactions: A product update with reactions you can toggle, a tooltip naming who reacted and a picker that opens on quick reactions.
Page icon: A page header with an emoji icon above the title, plus Random and Remove in the picker.
Custom team emoji: A release thread whose reply field inserts the workspace's own emoji as shortcodes from their own tab.
Shortcode suggestions: A design review reply where typing a colon shortcode shows emoji suggestions under the field.
Workplace-safe set: A kudos card whose picker hides a blocklist and newer emoji, then posts the note to #platform.
Localized data and labels: A status emoji card in German, French or Japanese, with localized emoji names, keywords and labels.
Basic empty state: Basic empty state
No data analytics empty state: No data analytics empty state
Bookmarks empty state: Bookmarks empty state
Tasks empty state: Tasks empty state
No automations empty state with toggle illustration: No automations empty state with toggle illustration
Comments empty state with isometric board illustration: Comments empty state with isometric board illustration
No products empty state with stacked cards and blur effect: No products empty state with stacked cards and blur effect
Search empty state with stacked file cards illustration: Search empty state with stacked file cards illustration
No messages empty state with chat bubbles illustration: No messages empty state with chat bubbles illustration
No payments empty state with credit card illustration: No payments empty state with credit card illustration
No integrations empty state with connected nodes illustration: No integrations empty state with connected nodes illustration
Search empty state: Search empty state
No events empty state with calendar illustration: No events empty state with calendar illustration
Empty state with search input: Empty state with search input
Empty state with add button: Empty state with add button
Document empty state: Document empty state
Dashed upload empty state: Dashed upload empty state
Inbox empty state: Inbox empty state
Team members empty state: Team members empty state
No notifications empty state: No notifications empty state
Event calendar with all views and live settings: Event calendar with all views and live settings
Event calendar with resource view for room bookings: Event calendar with resource view for room bookings
Event calendar with create and edit dialog: Month calendar with event CRUD in one dialog: open from an empty day, an event, or Add event, commit via apiRef. Title, color, start…
Event calendar with custom event chips: Event calendar with custom event chips
Event calendar with drag-to-book appointments: Event calendar with drag-to-book appointments
Fields with input groups: Fields with input groups
Notification preferences form: Notification preferences form
Form with validation errors: Form with validation errors
Field with input and textarea: Field with input and textarea
Field with select control: Field with select control
Field with radio groups and checkboxes: Field with radio groups and checkboxes
Filed with slider and switch: Filed with slider and switch
Field with OTP input: Field with OTP input
Settings form with validation: Settings form with validation
Permission settings with checkboxes: Permission settings with checkboxes
Responsive field layout: Responsive field layout
Common formats: The formats people share most, in their brand colors.
Custom labels: Version tags and document codes in place of the extension.
Custom colors and unknown types: Unknown extensions fall back to a neutral icon, and one class recolors any type.
Export format picker: Radio cards for choosing an export format, each with its file type icon.
Locked, linked and starred: A lock, link or star drawn on the icon in place of the extension label.
Restyled labels: File type extension labels restyled through labelClassName: rounded, outlined, inverted, recolored.
Dotfiles and build names: Icons read from names such as .env.local, Dockerfile and Makefile, which carry no usual extension.
Outline, solid, light and mono: The 4 variants side by side: outlined, filled, soft grey and one gray for every type.
Sizes: 6 sizes from 18px to 56px drawing the same icon, tuned to stay legible at 18px.
Family glyphs: One glyph per family, drawn on one grid, for family types and the glyph option.
All formats: Every built-in format grouped by family, with a variant switch.
Data grid file browser: Mini icons resolved from each file name in the rows of a sortable data grid.
Attachment list: Attachments with their type, size and a download action.
Upload queue: Files uploading with progress, each icon resolved from its MIME type.
Resolve from a file name: Type a file name, path, URL or MIME type and see the icon it resolves to.
Basic file upload: Basic file upload
Cover image upload.: Cover image upload.
Avatar upload: Avatar upload
Basic drag and drop file upload: Basic drag and drop file upload
Gallery file upload: Gallery file upload
Progress file upload: Progress file upload
Table file upload: Table file upload
Image upload: Image upload
Image upload with sorting.: Image upload with sorting.
Card file upload.: Card file upload.
Everything in one filter bar: Multi-select, nested fields, async options and stacked values.
Nested groups in a popover: A data grid paged, sorted and totalled under a popover builder.
Nested groups inline, walked back out: The builder inline, beside its own tree read back as an expression.
Controlled, sized and translated: One controlled query, three locales and every change reported.
Nested attributes at workspace scale: Drill-down groups, a filterable branch and deep search.
Status and priority colour badges: Colour-coded options and badges in the chip.
Avatars, paging and a restored view: Avatar options, results paged over the wire and a saved view.
A date and a date range editor: Consumer-owned date and date range controls.
Sliders as the value editor: One slider editor for range and single-value operators.
Filtering a table: The query tree compiled to a row predicate.
Choice controls as editors: Toggle group, radios, checkboxes, select and switch.
Typed values in shadcn inputs: An input group, a term list, code slots and a validated domain.
Basic frame: Basic frame
Frame with small spacing: Frame with small spacing
Frame with default spacing: Frame with default spacing
Frame with large spacing: Frame with large spacing
Frame with small border radius: Frame with small border radius
Frame with medium border radius: Frame with medium border radius
Frame with large border radius: Frame with large border radius
Frame with default border radius: Frame with default border radius
Frame with extra large border radius: Frame with extra large border radius
Frame with content-only panels: Frame with content-only panels
Frame with stacked content-only panels: Frame with stacked content-only panels
Frame with separated panels: Frame with separated panels
Frame with stacked panels: Frame with stacked panels
Frame with stacked panels and dense style: Frame with stacked panels and dense style
Frame with collapsible panels: Frame with collapsible panels
Frame with ghost(no outer border) variant: Frame with ghost(no outer border) variant
Frame with dense layout: Frame with dense layout
Frame with stacked panels: Frame with stacked panels
Frame with extra small spacing: Frame with extra small spacing
Gantt chart with settings menu and schedulable rows: Gantt chart with settings menu and schedulable rows
Gantt chart with drag-to-reorder tree rows: Gantt chart with drag-to-reorder tree rows
Gantt chart with quarter roadmap and rollups: Gantt chart with quarter roadmap and rollups
Gantt chart with weekly capacity board: Gantt chart with weekly capacity board
Gantt chart with task table and progress: Gantt chart with task table and progress
Gantt chart with as-built baseline tracking: Gantt chart with as-built baseline tracking
Gantt chart with dependency arrows and milestones: Gantt chart with dependency arrows and milestones
Basic hover card.: Basic hover card.
Hover card with positions.: Hover card with positions.
Hover card with profile information.: Hover card with profile information.
Hover card with icon: Hover card with icon
Hover card with an image and text content.: Hover card with an image and text content.
Hover card inside a dialog.: Hover card inside a dialog.
Timestamp hover card with active relative time: Timestamp hover card with active relative time
Hover card with paginated release notes: Hover card with paginated release notes
Isometric icon stack: Layered isometric icon
Icon stack sizes: Responsive icon stack sizes
Icon stack colors: Semantic icon stack colors
Icon badge stack: Icon stack with badge overlay
Empty state illustration: Shadcn empty state illustration
Item media stack: Icon stack in shadcn item
Default icon tile: Default icon tile
List row: Icon tile in a list row
Feature card: Icon tile in a feature card
Empty state: Icon tile in an empty state
Interactive tile: Interactive icon tile
Status overlay: Icon tile with status overlay
Soft tones: Tone-adjustable soft variant
Solid tones: Tone-adjustable solid variant
Brand colors: Elevated tile with a Tailwind color fill
Elevated icon tile: Icon tile with elevated surface
Framed icon tile: Icon tile with framed surface
All variants: Every icon tile variant
Sizes: Icon tile size scale
Circular tiles: Icon tiles with circular shape
Custom sizing: Icon tile with custom sizing
Color tones: Semantic icon tile color tones
Text content: Icon tile with text content
Basic input: Basic input
Input with number type: Input with number type
Input with date type: Input with date type
Input with file type: Input with file type
Input with required indicator: Input with required indicator
Input with time type: Input with time type
Complex input form with multiple fields: Complex input form with multiple fields
Input label with tooltip: Input label with tooltip
Input label with badge: Input label with badge
Input label with optional badge: Input label with optional badge
Input label with link and visibility toggle: Input label with link and visibility toggle
Input with label: Input with label
Input with horizontal orientation: Input with horizontal orientation
Input with multiple error messages: Input with multiple error messages
Basic password strength with dynamic hint and icons: Basic password strength with dynamic hint and icons
Advanced password strength indicator with progress: Advanced password strength indicator with progress
Input with pulsed background animation: Input with pulsed background animation
Input with custom focus ring: Input with custom focus ring
Input with subtle background: Input with subtle background
Input with bottom border only: Input with bottom border only
Color input: Color input
Range input with value indicator: Range input with value indicator
Input with description: Input with description
Pill-shaped input: Pill-shaped input
Minimal input without borders or background: Minimal input without borders or background
Disabled input: Disabled input
Input with error message: Input with error message
Input with character counter: Input with character counter
Input with password type: Input with password type
Input with phone type: Input with phone type
Input with URL type: Input with URL type
Basic input group: Basic input group
Input group with action button addon: Input group with action button addon
Input group with icon button action: Input group with icon button action
Input group with dropdown menu selection: Input group with dropdown menu selection
Input group with keyboard shortcut (Kbd): Input group with keyboard shortcut (Kbd)
Input group with tooltip action: Input group with tooltip action
Input group with loading spinner: Input group with loading spinner
Input group with block-start addon: Input group with block-start addon
Textarea input group with dynamic character limit: Textarea input group with dynamic character limit
AI Chat textarea with rich toolbar actions: AI Chat textarea with rich toolbar actions
AI Chat interface with file and context attachments: AI Chat interface with file and context attachments
Input group in disabled state: Input group in disabled state
Input group demonstrating label usage: Input group demonstrating label usage
Input group with multiple icons/buttons at the end: Input group with multiple icons/buttons at the end
Input group with popover trigger addon: Input group with popover trigger addon
Input group with Sparkles icon and complex Kbd shortcut: Input group with Sparkles icon and complex Kbd shortcut
Input group with success indicator circle: Input group with success indicator circle
Input group with search results count: Input group with search results count
Textarea input group with action buttons: Textarea input group with action buttons
Input group wrapped in a button group with text prefixes/suffixes: Input group wrapped in a button group with text prefixes/suffixes
Input group with a menu button (three dots) at the end: Input group with a menu button (three dots) at the end
Pill-shaped input group with a category dropdown at the end: Pill-shaped input group with a category dropdown at the end
Input group in invalid state: Input group in invalid state
Input group with inline addons (no separating borders): Input group with inline addons (no separating borders)
Input group with inline start and block-end addon: Input group with inline start and block-end addon
Member row with avatar, email and role selection: Member row with avatar, email and role selection
Project save interface with status and action buttons: Project save interface with status and action buttons
Pill-shaped AI prompt bar with voice and audio icons: Pill-shaped AI prompt bar with voice and audio icons
Password input with visibility toggle: Password input with visibility toggle
API request input with method selector and send action: API request input with method selector and send action
Order search input with status filter: Order search input with status filter
Company search input with region selector: Company search input with region selector
Contact search input with filter and actions menu: Contact search input with filter and actions menu
Input group with prefix icon: Input group with prefix icon
Share link input with visibility selector and copy action: Share link input with visibility selector and copy action
Input group with suffix icon: Input group with suffix icon
Input group with both prefix and suffix icons: Input group with both prefix and suffix icons
Input group with prefix text addon: Input group with prefix text addon
Input group with suffix text addon: Input group with suffix text addon
Input group with both prefix and suffix text addons: Input group with both prefix and suffix text addons
Basic OTP input.: Basic OTP input.
OTP input with numeric digits.: OTP input with numeric digits.
OTP input with multiple separators.: OTP input with multiple separators.
OTP input with letters and numbers.: OTP input with letters and numbers.
OTP input for PIN codes.: OTP input for PIN codes.
OTP input verification code.: OTP input verification code.
Basic item with title and description: Basic item with title and description
Item with header and footer sections: Item with header and footer sections
Integration items with connect actions: Integration items with connect actions
Activity feed items with avatars and actions: Activity feed items with avatars and actions
Items with icon media and action buttons: Items with icon media and action buttons
User item with avatar, info, and follow button: User item with avatar, info, and follow button
Clickable navigation items with icons and chevron: Clickable navigation items with icons and chevron
Item group with status badges: Item group with status badges
File items with icon media, size, and actions: File items with icon media, size, and actions
Items with keyboard shortcuts: Items with keyboard shortcuts
Small-size items with badges: Small-size items with badges
Team members with roles and multiple actions: Team members with roles and multiple actions
Kanban board with placeholder overlay: Kanban board with placeholder overlay
Kanban board with dynamic overlay: Kanban board with dynamic overlay
Kanban board with frame columns: Kanban board with frame columns
Minimal kanban with stacked frame: Minimal kanban with stacked frame
Feature roadmap kanban with progress: Feature roadmap kanban with progress
Kanban board persisted to a backend: Persist moves with onValueCommit, optimistic updates, and Sonner rollback
Basic keyboard keys.: Basic keyboard keys.
Keyboard keys grouped together.: Keyboard keys grouped together.
Keyboard keys combined with icons.: Keyboard keys combined with icons.
Keyboard key within an input.: Keyboard key within an input.
Keyboard shortcut in a tooltip.: Keyboard shortcut in a tooltip.
Keyboard shortcuts reference list: Keyboard shortcuts reference list
Basic label.: Basic label.
Label with helper description text: Label with helper description text
Label with error state: Label with error state
Label with inline edit toggle: Label with inline edit toggle
Label with status indicator dot: Label with status indicator dot
Label paired with a checkbox.: Label paired with a checkbox.
Label for a textarea field.: Label for a textarea field.
Label in a disabled state.: Label in a disabled state.
Label with required indicator: Label with required indicator
Label with optional indicator: Label with optional indicator
Label with tooltip info icon: Label with tooltip info icon
Label with badge indicator: Label with badge indicator
Label with character counter: Label with character counter
Default, separator, and border markers: Default, separator, and border markers
Tool call log with icon markers: Tool call log with icon markers
Run status markers with a live step: Run status markers with a live step
Agent run log grouped by phase separators: Agent run log grouped by phase separators
Changed files summary with border markers: Changed files summary with border markers
Markers as links and as an action button: Markers as links and as an action button
Basic menubar.: Basic menubar.
Menubar with dropdown submenus.: Menubar with dropdown submenus.
Menubar with checkbox & radio items.: Menubar with checkbox & radio items.
Menubar with icons.: Menubar with icons.
Menubar for formatting and media.: Menubar for formatting and media.
Two-sided conversation: Incoming and outgoing rows separated by nothing but the align prop.
Avatars on both sides: Bottom-anchored avatars that flip with the row, plus a presence dot.
Sender name and delivery status: Header for identity, footer for status, and how each one picks its side.
Reply actions in the footer: Copy, regenerate and rating controls under an unframed assistant reply.
Files shared in a thread: Image and document attachments stacked with the bubble in one message.
Consecutive messages from one sender: A run of three messages under a single avatar, using MessageGroup.
Streaming reply with a pending state: One assistant row moving from thinking, to typing, to settled.
Chat transcript with jump to latest: A scroll region that opens at the live edge with a jump to latest control.
Streaming reply that follows the edge: autoScroll pins the viewport while tokens arrive, and releases the moment the reader scrolls up.
Anchored turn with a previous peek: scrollAnchor lifts a sent message near the top while a slice of the previous turn stays visible.
Opening position for a saved thread: Compare start, end and last-anchor as the place a reopened thread opens at.
Load earlier without losing your place: Older turns prepend above the reader while the row they were reading stays put.
Thread navigator for stepping turns: A footer navigator that reports the turn you are reading and jumps between turns.
Basic native select.: Basic native select.
Native select with options grouped.: Native select with options grouped.
Small native select.: Small native select.
Native select embedded within a field.: Native select embedded within a field.
Disabled native select.: Disabled native select.
Invalid native select.: Invalid native select.
Basic navigation menu.: Basic navigation menu.
Navigation menu with grid layout.: Navigation menu with grid layout.
Navigation menu with icons.: Navigation menu with icons.
Navigation menu with grid layout and learn more button.: Navigation menu with grid layout and learn more button.
Basic number field: Basic number field
Basic number field: Basic number field
Basic number field: Basic number field
Number field with buttons on right: Number field with buttons on right
Number field with spinner buttons: Number field with spinner buttons
Number field in form: Number field in form
Basic pagination.: Basic pagination.
Pagination with ellipsis indicator: Pagination with ellipsis indicator
Pagination with outline style buttons: Pagination with outline style buttons
Rows per page select with range info and first/prev/next/last icons: Rows per page select with range info and first/prev/next/last icons
Pagination with page select dropdown and first/last navigation: Pagination with page select dropdown and first/last navigation
Numbered pagination with go-to-page input: Numbered pagination with go-to-page input
Pagination with page info, numbered pages, ellipsis, and per-page select: Pagination with page info, numbered pages, ellipsis, and per-page select
Pagination without labels.: Pagination without labels.
Pagination with hover effect.: Pagination with hover effect.
Pagination with circle buttons.: Pagination with circle buttons.
Pagination with go-to-page input: Pagination with go-to-page input
Numbered pagination in card: Numbered pagination in card
Pagination with arrows buttons: Pagination with arrows buttons
Pagination with page info on center: Pagination with page info on center
Pagination with page info on left: Pagination with page info on left
Basic phone input: Basic phone input
Small phone input: Small phone input
Large phone input: Large phone input
Disabled phone input: Disabled phone input
Phone input with preset value: Phone input with preset value
Phone input with error state: Phone input with error state
Phone input with specific default country: Phone input with specific default country
Read-only phone input: Read-only phone input
Basic popover.: Basic popover.
Popover with controls: Popover with controls
Popover with navigation: Popover with navigation
Popovers opening from different sides.: Popovers opening from different sides.
Popover with form.: Popover with form.
Popover alignment positions.: Popover alignment positions.
Popover within a dialog.: Popover within a dialog.
Popover with user profile details.: Popover with user profile details.
Popover with custom content: Popover with custom content
Popover with media preview.: Popover with media preview.
Relative time popover with timezone details: Relative time popover with timezone details
Basic progress.: Basic progress.
Small progress.: Small progress.
Large progress.: Large progress.
Progress bar with status messages.: Progress bar with status messages.
File upload list with progress & status.: File upload list with progress & status.
Progress bar with slider.: Progress bar with slider.
Multi-step progress indicator: Multi-step progress indicator
Progress bar with custom colors.: Progress bar with custom colors.
Guided workspace setup: Three required questions in a card, with progress, navigation and a summary on submit.
Multi-select answers: A checkbox question that accepts several answers, with a live count and a chip summary.
A written answer beside the choices: A text input sitting with the fixed choices, so an answer can be typed instead of picked.
Segmented progress with step labels: A custom progress bar built from the progress render state, over a four question flow.
An optional question with skip: A question the visitor may skip on purpose, with the skipped state carried into the summary.
A rule that sends you back: A cross-question rule checked on submit, returning the flow to the question that broke it.
A branch that appears when it applies: A question that only joins the flow after an earlier answer, with avatars, reset and a summary.
Basic radio group: Basic radio group
Radio group in frame: Radio group in frame
Radio group with grid layout: Radio group with grid layout
Avatar based card radio group: Avatar based card radio group
Payment method radio cards: Payment method radio cards
Radio group with tooltip info: Radio group with tooltip info
Radio group with badges: Radio group with badges
Inline horizontal radio group: Inline horizontal radio group
Pricing plan radio cards: Pricing plan radio cards
Disabled radio group: Disabled radio group
Radio with description: Radio with description
Invalid radio group: Invalid radio group
Colored radio group: Colored radio group
Radio group with legend and description: Radio group with legend and description
Card radio group with descriptions: Card radio group with descriptions
Radio group in card with separators: Radio group in card with separators
Radio group in card with icons: Radio group in card with icons
Basic rating.: Basic rating.
Rating with decimal value.: Rating with decimal value.
Rating with show value.: Rating with show value.
Rating with editable.: Rating with editable.
Rating with size.: Rating with size.
Rating with review summary: Rating with review summary
Interactive half-star rating: Interactive half-star rating
Emoji reaction rating: Emoji reaction rating
Rating with review text input: Rating with review text input
Horizontal resizable layout: Horizontal resizable layout
State-tracked resizable layout.: State-tracked resizable layout.
Vertical resizable layout.: Vertical resizable layout.
Nested mixed-direction resizable layout.: Nested mixed-direction resizable layout.
Nested resizable: Nested resizable
Handle with animated pill indicator: Handle with animated pill indicator
Handle pill with spring scale on drag: Handle pill with spring scale on drag
Handle with large capsule expansion on drag: Handle with large capsule expansion on drag
Nested layout with animated pill handles: Nested layout with animated pill handles
Three-panel layout with animated pill handles: Three-panel layout with animated pill handles
Basic scroll area: Basic scroll area
Scroll area with horizontal scrollbar: Scroll area with horizontal scrollbar
Scroll area with both scrollbars: Scroll area with both scrollbars
Scroll area with fade effect: Scroll area with fade effect
Scroll area with scrollbar gutter: Scroll area with scrollbar gutter
Basic scrollspy: Basic scrollspy
Basic scroll area: Basic scroll area
A basic select component with a list of options: A basic select component with a list of options
Select component in a disabled state: Select component in a disabled state
Select component inside a Dialog: Select component inside a Dialog
Select component with single selection: Select component with single selection
Select component inline with Input: Select component inline with Input
Select component with Button side by side: Select component with Button side by side
Select component with item alignment enabled: Select component with item alignment enabled
Select with custom access level descriptions: Select with custom access level descriptions
Select with colored bullets for status: Select with colored bullets for status
Select with user avatars: Select with user avatars
Select with status badges: Select with status badges
Select with icons and placeholder state: Select with icons and placeholder state
Select with indicator on the left side: Select with indicator on the left side
Select with clear button: Select with clear button
Select with custom chevrons up down icon: Select with custom chevrons up down icon
Select with colored status dots: Select with colored status dots
Select with grouped options and separators: Select with grouped options and separators
Country picker select with flag emojis: Country picker select with flag emojis
Status filter select with colored dots: Status filter select with colored dots
Select with description text per option: Select with description text per option
Timezone select with UTC offsets: Timezone select with UTC offsets
Select with avatar items for team member assignment: Select with avatar items for team member assignment
Select component with grouped options and labels: Select component with grouped options and labels
Priority select with colored badges: Priority select with colored badges
Font family select with preview: Font family select with preview
Select with icon-labeled categories: Select with icon-labeled categories
Size variant select with small trigger: Size variant select with small trigger
Select component with a large list of options: Select component with a large list of options
Select component with small trigger size: Select component with small trigger size
Select component with a subscription plan style: Select component with a subscription plan style
Select component with item alignment disabled: Select component with item alignment disabled
Select component within a Field with label and description: Select component within a Field with label and description
Select component in an invalid state: Select component in an invalid state
Horizontal separator for content sections.: Horizontal separator for content sections.
Vertical separator for inline elements.: Vertical separator for inline elements.
Vertical separator groups related menu items.: Vertical separator groups related menu items.
Horizontal separator between items in a list.: Horizontal separator between items in a list.
Separator with centered text label: Separator with centered text label
Order summary with separators: Order summary with separators
Sheet containing a form for editing profile information: Sheet containing a form for editing profile information.
Sheet without a corner close button: Sheet containing a profile form with the corner close button hidden, so the footer Cancel button closes it.
Sheets that open from any side: Sheets that open from any side.
Sheet with scrollable content: Sheet with scrollable content
Application shell with a workspace switcher: Grouped navigation with count badges, row menus and a footer account menu.
Icon rail that collapses: Labels give way to tooltips at 3rem, with a rail and a trigger to drive it.
Documentation nav with sub-menus: A search field, sections that collapse and a sub-tree under the current page.
Right-hand inspector panel: A floating off-canvas panel with row actions, linked counts and a status badge.
Filtering, loading and empty states: A filter field, skeleton rows while a refresh runs, and a real empty state.
Pinned clear and save: Muted signing surface with clear and save controls pinned inside the pad.
Initials per clause: Compact initial pads for each contract clause with a completion count.
Proof of delivery: Mobile delivery card with recipient name, a touch signature and confirmation.
Upload with apiRef: Read the pad from outside its tree and attach the signature as a PNG file.
Undo and redo toolbar: Toolbar with undo, redo and clear, plus Ctrl+Z and Ctrl+Shift+Z shortcuts.
Form field with validation: Native form field that submits an SVG signature, with a required check and reset.
Signing workspace: Ink colors, line weights, undo, redo, replay and PNG or SVG download in one signing card.
Export PNG, JPEG, SVG or JSON: Export the signature in 4 formats with a preview, payload size and download link.
Draw or type: Tabs to draw a signature or type it, the keyboard route to the same outcome.
Agreement signing card: Agreement card that locks the signature read-only once it is signed and dated.
Signature in a dialog: Saved profile signature with a dialog to draw, edit or remove it.
Stylus mode with palm rejection: Pen-only input that ignores a resting palm, with pressure-sensitive ink.
Skeleton loader for avatars and user info.: Skeleton loader for avatars and user info.
Skeleton loader for chat messages: Skeleton loader for chat messages
Skeleton loader for a card component.: Skeleton loader for a card component.
Skeleton loader for text and paragraphs.: Skeleton loader for text and paragraphs.
Skeleton loader for a form.: Skeleton loader for a form.
Skeleton loader for a data table.: Skeleton loader for a data table.
Skeleton loader for a dashboard stats row: Skeleton loader for a dashboard stats row
Skeleton loader for a list with actions: Skeleton loader for a list with actions
Skeleton loader for a card grid: Skeleton loader for a card grid
Skeleton loader for a full profile page: Skeleton loader for a full profile page
Basic slider.: Basic slider.
Slider with tick marks: Slider with tick marks
Slider with dynamic tooltip indicator: Slider with dynamic tooltip indicator
Rating slider with emoji feedback: Rating slider with emoji feedback
Disabled slider: Disabled slider
Slider with multiple discrete values: Slider with multiple discrete values
Vertical slider with range selection: Vertical slider with range selection
Slider with controlled value tracking: Slider with controlled value tracking
Slider with range selection: Slider with range selection
Slider synced with number input: Slider synced with number input
Color temperature slider: Color temperature slider
Slider with reference labels: Slider with reference labels
Basic toast notification.: Basic toast notification.
Toast with upload progress simulation: Toast with upload progress simulation
Toast with status alert markup: Toast with status alert markup
Custom accent border toast: Custom accent border toast
Custom invert success toast: Custom invert success toast
Custom invert error toast with details: Custom invert error toast with details
Custom invert info toast with avatar: Custom invert info toast with avatar
Custom invert warning toast with countdown: Custom invert warning toast with countdown
Multi-action invert toast with avatar group: Multi-action invert toast with avatar group
Toast with close button on top-right: Toast with close button on top-right
Toast with custom icon: Toast with custom icon
Toast notification with description.: Toast notification with description.
Custom integration toast: Custom integration toast
Updatable toast with ID: Updatable toast with ID
Toast positions: Toast positions
Toast variants with colored icons: Toast variants with colored icons
Toast duration options: Toast duration options
Toast with action button: Toast with action button
Promise toast with loading state: Promise toast with loading state
Toast with custom close and cancel buttons: Toast with custom close and cancel buttons
Toast with custom rich content: Toast with custom rich content
Sortable list of items with drag-and-drop: Sortable list of items with drag-and-drop
Sortable list of items with grid layout: Sortable list of items with grid layout
Sortable list of items with nested layout: Sortable list of items with nested layout
Sortable playlist with frame: Sortable playlist with frame
Sortable settings priority with frame: Sortable settings priority with frame
Sortable sidebar navigation with frame: Sortable sidebar navigation with frame
Sortable image gallery grid with frame: Sortable image gallery grid with frame
Sortable list persisted to a backend: Persist the new order with onValueCommit, optimistic updates, and Sonner rollback
Basic spinner.: Basic spinner.
Animated loading dots: Animated loading dots
Spinner overlay on card: Spinner overlay on card
Spinner color variants: Spinner color variants
Spinners in buttons.: Spinners in buttons.
Spinners in badges.: Spinners in badges.
Spinner in input group.: Spinner in input group.
Spinner in empty state.: Spinner in empty state.
Button loading states: Button loading states
Overlay loading spinner: Overlay loading spinner
Full page loading state: Full page loading state
Inline loading text with spinner: Inline loading text with spinner
Basic stepper: Basic stepper
Stepper with content for each step: Stepper with content for each step
Stepper with progress bar and titles: Stepper with progress bar and titles
Stepper with segmented progress bar: Stepper with segmented progress bar
Stepper with vertical orientation and descriptions: Stepper with vertical orientation and descriptions
Stepper with vertical orientation: Stepper with vertical orientation
Stepper with vertical orientation and titles: Stepper with vertical orientation and titles
Stepper with delivery stops and ETAs: A vertical rail of 5 delivery addresses joined by dotted connectors, an On time badge on the current stop and arrival times on hover.
Stepper with dotted progress: 5 label-free dots for a workspace setup flow, with the step count, name and hint of the selected step shown below.
Stepper with key-value stage details: 5 delivery run stages from loading to return, each with a time and dashed-leader rows such as gate, delay, ETA and battery.
Stepper with icon tiles in a frame: 3 resolution steps in a framed header bar with check or dashed ring tiles and subtitles, collapsing to tiles alone when narrow.
Stepper with completed state: Stepper with completed state
Stepper with purchase order checks: 6 purchase orders that expand into 3-way match checks, each passed, failed with an issue count, or pending, with payment links under More.
Stepper with grouped security checks: 29 security checks under 12 numbered steps in 4 areas, with finding counts and severity badges, and Previous and Next closing the branch…
Stepper with color-coded bottom bars: 4 billing setup steps as colored bars along the panel's bottom edge, the active one thicker, under the current step's icon, name and hint.
Stepper with top color bars and card art: Adding a payment card in 4 steps, each tab with its own color bar on the top edge that thickens when selected, over a card drawing and a…
Stepper with icon tile rows: 4 incident resolution steps in a vertical list, each row showing an icon, a title, a subtitle and its status, above the selected step's…
Stepper with phase track: A refund case in 4 phases labeled Phase 1 to 4, joined by a single track with a dot per phase and slash dividers, above the selected…
Stepper with timestamped checkpoints: Shipment tracking across 4 stops from loading to delivery, with the time each stop was reached above a dot on a shared track and a summary…
Stepper with transit arrow: 4-stop freight route with times, Est. and ETA labels and a ticked track where an arrow leads toward the current stop, plus a summary per…
Stepper with breadcrumb steps: 5-step new hire onboarding shown as step names split by chevrons, with a step counter, a 5-segment bar and the selected step's summary…
Stepper with compact inline progress: 5 new hire onboarding steps in a single row of small status dots and names, with connectors that turn blue as steps finish and a summary…
Stepper with loading state: Stepper with loading state
Stepper with truck route and rest stops: 7 stops on a 2,890 km truck run from Memphis to Los Angeles, with dashed legs, 8H rest badges and a truck on the leg in progress.
Stepper with icon tiles and chevrons: 4 incident resolution steps, each a tinted icon tile with its title and step number, joined by chevrons, with the step's detail below.
Stepper with numbered chevron stages: 7 sales pipeline stages from Lead to Approval as a bar of interlocking arrows, each with a numbered keycap and the current stage filled…
Stepper with filled status chevrons: 8 proposal steps as nested arrows in a frame, green with a check once finished, solid blue with a spinner when current and dashed rings…
Stepper with outlined chevron plan: 6 proposal steps as nested arrows after a done count, finished ones outlined in green with a check and the current one in blue with a…
Stepper with flat chevron plan: 6 contract steps as borderless arrows after a done count, finished ones in darker gray with a check and the current one tinted blue with a…
Stepper with shipping route and stop details: 5 ports from Singapore to Hamburg, each with carrier, voyage and dates over dashed leaders, and a wave marking the leg in progress.
Stepper with horizontal step cards: 4 incident rollback steps as clickable icon cards that wrap to 2 columns when narrow, with a corner check on done cards and the step…
Stepper with shipment progress bar: Order tracking across 6 stages from placed to delivered, with a green plane badge on the current stage and a dashed track that fills green…
Stepper with vertical step cards: 4 incident rollback steps as stacked icon cards beside the step detail, done cards tinted green with a corner check, plus Previous and Next.
Controlled stepper: Controlled stepper
Stepper with side rail and step icons: 6 incident response steps as rows with their own icons, a blue bar on the current row, green checks on done rows and the step detail…
Stepper with status list: 6 incident response steps with a status glyph per row: a check when done, a spinning ring on the current step and a dashed circle for the…
Stepper with vertical status bars: 5 incident resolution steps, each marked by a thin vertical bar that is gray, green when done or dashed blue while current, with the…
Stepper with sub-steps in a collapsible card: 5 ticket resolution phases holding 17 tasks, where the open phase lists its task status in a bordered box and folds away when clicked again.
Stepper with right-aligned sub-steps: 5 ticket resolution phases on a vertical rail, only the current one unfolding its tasks, while Previous and Next walk all 17 tasks in order.
Stepper with title and indicator: Stepper with title and indicator
Stepper with progress bar indicator: Stepper with progress bar indicator
Stepper with icons and badges: Stepper with icons and badges
Stepper with descriptions: Stepper with descriptions
Stepper with inline titles: Stepper with inline titles
Basic switch.: Basic switch.
Switch with badges: Switch with badges
Colored switches: Colored switches
Destructive switch with confirmation text: Destructive switch with confirmation text
Compact settings table with switches: Compact settings table with switches
Switch with descriptions in card grid: Switch with descriptions in card grid
Switch with description.: Switch with description.
Disabled switch.: Disabled switch.
Switch in different sizes.: Switch in different sizes.
Switch group: Switch group
Switch list in card with separators: Switch list in card with separators
Switch list in card with icons: Switch list in card with icons
Switch in frame: Switch in frame
Switch with tooltip info: Switch with tooltip info
Basic table.: Basic table.
Subscriptions table with plan badges and billing info: Subscriptions table with plan badges and billing info
Product inventory table with stock badges and prices: Product inventory table with stock badges and prices
API keys table with permission badges and actions: API keys table with permission badges and actions
File manager table with owners and sharing badges: File manager table with owners and sharing badges
Issues table with priority, assignee, and labels: Issues table with priority, assignee, and labels
Leaderboard table with rank, score, and level badges: Leaderboard table with rank, score, and level badges
Vertical table with employee profile details: Vertical table with employee profile details
Vertical table with server configuration details: Vertical table with server configuration details
Table with footer.: Table with footer.
Table in card with status badges.: Table in card with status badges.
Table card with actions column.: Table card with actions column.
Table with interactive elements.: Table with interactive elements.
Team members table with avatars, roles, and status: Team members table with avatars, roles, and status
Orders table with customer info and payment status: Orders table with customer info and payment status
Projects table with team avatars and status: Projects table with team avatars and status
Activity log table with user avatars and timestamps: Activity log table with user avatars and timestamps
Basic tabs.: Basic tabs.
Tabs with line variant.: Tabs with line variant.
Tabs with vertical orientation.: Tabs with vertical orientation.
Tabs with vertical orientation and line variant.: Tabs with vertical orientation and line variant.
Tabs with icons.: Tabs with icons.
Tabs with icons: Tabs with icons
Tabs with badge counts: Tabs with badge counts
Tabs with icons and line variant: Tabs with icons and line variant
Segmented control tabs: Segmented control tabs
Basic textarea.: Basic textarea.
Invalid textarea.: Invalid textarea.
Textarea with label.: Textarea with label.
Textarea with description.: Textarea with description.
Disabled textarea.: Disabled textarea.
Auto-resize textarea with character count: Auto-resize textarea with character count
Inline time panel: Hour and minute columns rendered in place, with Now, Clear and a live readout.
Confirm before applying: Column picks stay a draft until OK, so a shift change applies once.
Localized labels: English, German, Chinese and Arabic labels, clocks and digits, with Arabic right to left.
Form field with validation: Native form field with a required check, an error, reset and the submitted value.
Date and time: Schedule a post with a calendar and time columns side by side in one card.
Popover picker: Outline trigger in a labelled field that opens hour and minute columns with Now, Clear and OK.
Typable time input: Type 930, 14:30 or 2:30 pm, or step through free times with the arrow keys.
12-hour clock with seconds: Hour, minute, second and AM/PM columns for a stream go-live time.
Hour only: A daily digest send time picked by the hour in a settings row.
Steps and opening hours: 15-minute steps limited to 08:30 to 17:30, with out-of-range hours disabled.
Unavailable slots: 30-minute appointment slots with the lunch hour and booked times disabled.
Start and end time: A meeting range where the end stays after the start and the duration updates.
Time zone label: Event time in the venue's time zone, shown in the trigger, with a footer that leaves out Now.
Basic timeline.: Basic timeline.
Deployment log timeline: Deployment log timeline
Activity feed timeline with user avatars: Activity feed timeline with user avatars
Compact horizontal milestone timeline: Compact horizontal milestone timeline
Timeline with roadmap.: Timeline with roadmap.
Timeline with order status.: Timeline with order status.
Timeline with git activity.: Timeline with git activity.
Timeline with milestones.: Timeline with milestones.
Timeline with pipeline steps.: Timeline with pipeline steps.
Timeline with roadmap items.: Timeline with roadmap items.
Vertical timeline: Vertical timeline
Horizontal timeline with leading labels: Horizontal timeline with leading labels
Basic toggle.: Basic toggle.
Toggle with text label that changes: Toggle with text label that changes
Social media reaction toggles: Social media reaction toggles
Toggle with tooltip: Toggle with tooltip
Disabled toggle states: Disabled toggle states
Toggle as mute/unmute button: Toggle as mute/unmute button
Toggle buttons with outline variant.: Toggle buttons with outline variant.
Toggle buttons in different sizes.: Toggle buttons in different sizes.
Toggle with button and icon.: Toggle with button and icon.
Disabled toggle.: Disabled toggle.
Toggle with icon.: Toggle with icon.
Toggle with notification count badge: Toggle with notification count badge
Toggle size variants showcase: Toggle size variants showcase
Toggle with icon swap on press: Toggle with icon swap on press
Basic toggle group.: Basic toggle group.
Toggle group for color theme: Toggle group for color theme
Toggle group for font size: Toggle group for font size
Toggle group for time range filter: Toggle group for time range filter
Toggle group for notification channels: Toggle group for notification channels
Toggle group for layout columns: Toggle group for layout columns
Toggle group for sort direction: Toggle group for sort direction
Toggle group for pricing tier: Toggle group for pricing tier
Toggle group with outline variant.: Toggle group with outline variant.
Toggle groups in different sizes.: Toggle groups in different sizes.
Toggle group with custom spacing.: Toggle group with custom spacing.
Toggle group with filter control.: Toggle group with filter control.
Toggle group with vertical orientation.: Toggle group with vertical orientation.
Toggle group for text alignment: Toggle group for text alignment
Toggle group for view mode switching: Toggle group for view mode switching
Vertical toggle group for settings: Vertical toggle group for settings
Basic tooltip.: Basic tooltip.
Tooltip with feature badge and upgrade link: Tooltip with feature badge and upgrade link
Tooltip with avatar and role badge: Tooltip with avatar and role badge
Tooltip on disabled button with wrapper: Tooltip on disabled button with wrapper
Tooltip with online status indicator: Tooltip with online status indicator
Tooltip with file info and badges: Tooltip with file info and badges
Tooltip with label badges: Tooltip with label badges
Tooltip with action button inside: Tooltip with action button inside
Tooltips opening from different sides.: Tooltips opening from different sides.
Tooltip with icon trigger.: Tooltip with icon trigger.
Tooltip with keyboard shortcut.: Tooltip with keyboard shortcut.
Tooltip on notification bell with badge count: Tooltip on notification bell with badge count
Tooltip with status badge: Tooltip with status badge
Tooltip with icon and description: Tooltip with icon and description
Toolbar with tooltip actions: Toolbar with tooltip actions
Tooltip with warning badge: Tooltip with warning badge
Agent steps: An agent turn with a search, a diff, test output, a lint failure and a fix still running.
Distributed trace spans: Request spans nested under their parent with their durations, each opening to its attributes, the slowest one marked.
Error breadcrumbs: The events that led to a crash, the response body of the request behind it, and the stack trace below.
SQL query plan: An EXPLAIN ANALYZE result opened along the path to the slowest scan, with the index that would remove it.
Data pipeline run: A dbt build where a failed uniqueness test shows its duplicates, and a downstream model skips.
Webhook delivery attempts: Delivery attempts for one event, with failures opening to the response and Resend appending a new attempt.
CSV import: A CSV import that counts up while it runs, with rejected records, their problems and a download link.
Dependency audit: Vulnerable packages that open to the chain that pulled them in, with the upgrade or lockfile update that fixes each.
AI review findings: Findings from an automated pull request review, each opening the flagged lines and a suggested fix, resolved in place.
Model eval results: LLM eval cases where a failure expands to the expected answer, the model's answer and the judge's note.
Access decision: Why a member can or cannot open a part of the app, rule by rule, with the deciding rule and those never reached.
Streaming agent run: Agent steps that stream in as they happen, with the running step open and Stop or Run again under the steps.
Identity verification: KYC results for an applicant, where the rejected document opens to its reason and a request for another.
Domain DNS setup: Sending domain setup with records to copy, a lookup that finds 2 of 3, then the go live step once DNS passes.
Media transcode: Renditions that encode in parallel with their own percentages, then thumbnails and a CDN publish.
Chat turn with sources: An assistant reply whose SQL queries fold into one summary above the answer, with the dashboards it cited below.
Parallel subagents: An orchestrator whose summary and status come from 3 subagents, with a retry for the one that failed.
Terraform change approval: Terraform resource changes that move from pending to running to done once someone signs off.
Answer with citations: Numbered citations in a research answer open the sources and move focus to the cited source.
Support copilot draft: A drafted support reply with the order and policy lookups behind it, and Regenerate replaying them.
CLI install summary: What a shadcn add run resolved, installed and wrote, including a file it kept because it already existed.
CI pipeline run: Jobs that expand to their steps, a failing test log, and a re-run that walks the remaining jobs to done.
Basic tree.: Basic tree.
Tree with indented lines.: Tree with indented lines.
Tree with custom indent.: Tree with custom indent.
Tree with custom indent.: Tree with custom indent.
File explorer tree with type icons: File explorer tree with type icons
Organization chart tree with avatars: Organization chart tree with avatars
Permissions tree with checkboxes: Permissions tree with checkboxes
Cascader: A nested multi-level combobox with drill-down navigation, breadcrumbs, search and custom rows.
Code Block: A shadcn code block with Shiki syntax highlighting, streaming, diffs, code folding and per-line interaction for AI chat and agent UIs.
Color Picker
Data Grid: A powerful TanStack Table v9 data grid with sorting, filtering, pagination, footer rows, drag-and-drop, row and column virtualization…
Date Selector: A universal date selector component with multiple period types, filter modes, and flexible display options.
Emoji Picker
Event Calendar: A headless-first event calendar with month, week, day, N-day and agenda views, drag-and-drop scheduling, recurring events, time zones, and…
File Type
File Upload: Enables users to upload files to a server or application.
Filters: A stepped filter builder with nested attributes, popover value editors and a boolean query tree.
Frame: Displays related content in a structured frame.
Gantt: A headless-first gantt with split tree and timeline panes, day to year scales, zoom, drag and resize scheduling, progress, summary…
Icon Stack: Shadcn Icon Stack for isometric icons, layered icon illustrations, and empty-state visuals.
Icon Tile: Shadcn Icon Tile that wraps an icon in a consistent square surface for list rows, feature cards, and empty states.
Kanban: A drag-and-drop kanban component designed for seamless item organization across customizable columns.
Number Field: A numeric input element with increment and decrement buttons, and a scrub area.
Phone Input: A phone number input component with country selection and validation.
Rating: A customizable star rating component that supports read-only display and interactive input modes.
Scrollspy: Dynamically highlights navigation to indicate current visible section in viewport during page scroll
Signature Pad: A shadcn signature pad with pressure and speed sized ink, touch and stylus input, undo and redo, native form fields and PNG, JPEG, SVG or…
Sortable: A drag-and-drop sortable component designed for seamless item reordering with vertical, grid, and nested layouts.
Stepper: A step-by-step process for users to navigate through a series of steps.
Time Picker: A shadcn time picker with hour, minute, second and AM/PM columns in a popover or inline, text entry, steps, time bounds, form fields and…
Timeline: A visual representation of events in chronological order.
Tree: A customizable tree component for React.

ReUI components

All ReUI components

Browse by category