Components

34 components you install with the shadcn CLI and own as source. Every preview here is the real component.

First time? Register the @drift-ui namespace

Inputs

14

Fields for the values a plain text input cannot hold.

  • Color Picker

    Saturation area, hue and alpha sliders, eyedropper, hex input and an oklch readout.

  • Date-Time Range

    A date range picker with start and end times.

  • Loading emoji

    Skin tone

    Pick a reaction

    Emoji Picker

    Searchable emoji grid with categories, skin tones, recently used emoji and arrow-key navigation. Emoji data loads on demand.

    • brand-guidelines.pdf2.4 MB
    • q3-roadmap.png64%

    File Dropzone

    Drag and drop upload with validation, progress and rejection states.

  • Project
    Owner

    Inline Edit

    Click to edit text in place. Enter saves, Escape cancels, async saves supported.

  • Mention Textarea

    A textarea that suggests people, channels or anything else after a trigger character.

  • IrelandVirginia

    Multi Select

    Pick several values from a fixed list, with search, groups, chips and a selection limit.

  • Number Input

    A spinbutton with min, max, step and locale formatting.

  • Password strength: Fair

    Password Input

    A password field with a reveal toggle and a strength meter.

  • Rating

    Pick a score with stars or any icon, in whole or half steps, from the keyboard or pointer.

  • Repeat on
    Ends
    occurrences

    Every 2 weeks on Tuesday

    Next occurrences

    Recurrence Editor

    Edit an RRULE repeat rule with a plain-language summary and the next occurrences.

  • Display only CtrlShiftP

    Shortcut Recorder

    Records a key combination and renders it with platform symbols.

  • billingeu-west-1

    Enter or comma to add, Backspace twice to remove, paste a comma list.

    Tags Input

    Type, paste or remove tags with full keyboard support.

  • 0930
    ------

    Time Field

    Segmented hour, minute and AM/PM spinbuttons with typeahead.

Structure

9

Hierarchies, sequences and history.

  • Ana Lima (online)Kenji Sato (busy)Priya Nair (away)Tomás Ruiz

    Avatar Group

    Stacked avatars with presence dots and a +N overflow that lists the rest.

  • ID
    usr_8f2a
    Owner
    Status
    Active
    Created
    Oct 12, 2026, 09:41

    Description List

    Key and value rows for detail pages, with copy buttons and inline editing.

  • 3 lines added, 2 lines removed
    Old line numberOld contentNew line numberNew content
    1service: billing1service: billing
    2Removed: replicas: 22Added: replicas: 4
    3timeout: 30s3timeout: 30s
    4 feature_1: enabled4 feature_1: enabled
    5 feature_2: enabled5 feature_2: enabled
    15 feature_12: enabled15 feature_12: enabled
    16 feature_13: enabled16 feature_13: enabled
    17 feature_14: enabled17 feature_14: enabled
    18Removed: region: eu-west-118Added: region: eu-central-1
    19log_level: info19log_level: info
    20Added: tracing: true

    Diff Viewer

    Side-by-side or unified text diff with word-level highlights and collapsed unchanged regions.

    • id:"evt_1Qx8"
    • type:"invoice.paid"
    • livemode:false
    • created:1793350800
    • data:{…}
    • invoice:{…}
    • number:"INV-0042"
    • amount_due:4900
    • currency:"usd"
    • retries:Array(240)

    JSON Viewer

    Collapsible, searchable JSON with typed colors, copy value or path, and chunked large arrays.

    • 1Quarterly roadmap reviewStrategy
    • 2Migrate auth to passkeysSecurity
    • 3Redesign onboarding flowProduct
    • 4Optimize cold start latencyInfra
    • 5Write the incident runbookOps
    Press Space or Enter to pick up the item. Use arrow keys to reorder. Press Space or Enter again to drop. Press Escape to cancel.

    Sortable List

    Reorderable list with drag-and-drop and full keyboard accessibility.

  • Pick environments and replica counts.

    Stepper

    Multi-step flows with linear or free navigation.

    1. Deployed to production

      Noor Haddad rolled out v2.14.0 to 3 replicas.

    2. Review approved

      Tomasz Wierzba approved the release plan.

    3. Health check failed

      eu-west-1 returned 503 for 40 seconds.

    4. Preview build passed

      CI finished in 3m 12s.

    Timeline

    Activity feeds and changelogs with status indicators.

    • app
    • layout.tsx
    • globals.css
    • archive
    • Loading
    • package.json

    Tree View

    An ARIA tree with arrow keys, typeahead, selection and lazy children.

  • 1cloneStep 0 wrote a longer status line that wraps onto a second row, so this entry measures taller than its neighbours
    2installStep 1 finished
    3buildStep 2 finished
    4testStep 3 finished
    5uploadStep 4 finished

    Virtual List

    Renders only the visible rows of a long list, with variable row heights and keyboard focus that survives scrolling.

Workflow

3

Filters, selections and guided tours that sit on top of a screen.

    Bulk Action Bar

    A floating toolbar for acting on selected rows. Escape clears the selection.

    • MY-104Invoice totals round twice3 pts
    • MY-112Dark mode chart contrast2 pts
    • MY-118Invoice PDF missing logo1 pts
    • MY-121Retry webhook deliveries5 pts

    Filter Builder

    Field, operator and value filter chips with a matchesFilter helper for your rows.

  • Tour

    A step-by-step product tour that spotlights real elements on the page.

Primitives

8

Same API as shadcn/ui. Skip any you already have.

  • CNAL

    Avatar

    An image with a fallback for when it fails to load.

  • DefaultSecondaryOutlineDestructive Verified

    Badge

    A small status label.

  • Button

    A button with six variants and four sizes.

  • Create project
    Deploy a new project in one click.
    Beta

    Card

    A container with header, content, and footer slots.

  • Dialog

    A modal window that traps focus and closes on Escape.

  • Enter a full URL, starting with https://

    Input

    A text input with focus and invalid states.

  • Label

    An accessible label for form controls.

  • Popover

    Floating content anchored to a trigger.