Skip to content

The component collection

Build your visual language.

Refine every surface. Explore live interactions and take the configured React source with you.

FigmaOpen Studio
Live canvasAurora · Dark

One system. Your signature.

Choose a palette for the collection, then explore materials and effects on each specimen.

Color palette
44 / 44 components

Button

Actions

Six styles, five sizes, focus and loading states.

Color palette
Button shape
Button size
Button material

Ready to save this local preview.

Clear the name to try disabled. Tab to explore focus. Small controls keep a 44px touch target.

src/components/ui/button.tsxElevated

ButtonGroup

Actions

A shared container for related actions.

src/components/ui/button-group.tsxElevated

TextLink

Actions

A text action with a consistent focus treatment.

A little more context ↗
src/components/ui/link.tsxElevated

Breadcrumb

Navigation

A labelled navigation trail with current-page semantics.

src/components/ui/breadcrumb.tsxElevated

Pagination

Navigation

Controlled pages with previous and next actions.

Page 1 of 5

src/components/ui/pagination.tsxElevated

Tabs

Navigation

Keyboard-aware tabs built on Base UI.

A little clarity on your workspace.

src/components/ui/tabs.tsxElevated

Sidebar

Navigation

Composable navigation groups and responsive shell support.

src/components/ui/sidebar.tsxElevated

Command

Navigation

Searchable grouped actions in a focus-managed dialog.

src/components/ui/command.tsxElevated

Input

Form controls

A native input with semantic focus and invalid states.

src/components/ui/input.tsxElevated

Field

Form controls

A linked label, description and error message.

Only used as local demo state.

src/components/ui/field.tsxElevated

Textarea

Form controls

Multiline input with a consistent visual vocabulary.

src/components/ui/textarea.tsxElevated

Select

Form controls

Controlled selection with popup keyboard navigation.

Choose a plan
src/components/ui/select.tsxElevated

Combobox

Form controls

A searchable single-select control.

src/components/ui/combobox.tsxElevated

MultiSelect

Form controls

Search, select and remove multiple values.

src/components/ui/multi-select.tsxElevated

Checkbox

Form controls

Checked, unchecked, mixed and disabled states.

src/components/ui/checkbox.tsxElevated

RadioGroup

Form controls

One choice from a clearly labelled set.

src/components/ui/radio-group.tsxElevated

Switch

Form controls

A controlled on/off setting.

src/components/ui/switch.tsxElevated

Slider

Form controls

Pointer and keyboard control for a numeric value.

A little more intensity64%

src/components/ui/slider.tsxElevated

DatePicker

Form controls

A localized single-date calendar popup.

src/components/ui/date-picker.tsxElevated

DateRangePicker

Form controls

A localized from/to date selection.

src/components/ui/date-picker.tsxElevated

InputOTP

Form controls

A single accessible input with visual digit slots.

src/components/ui/input-otp.tsxElevated

FileUpload

Form controls

Browse or drop files with size and MIME checks.

Drop a little inspiration here.

Images, PDF, text, JSON or CSV · Up to 10 MB per file

    src/components/ui/file-upload.tsxElevated

    Card

    Data & structure

    Composable header, content and footer sections.

    A little more intention.

    For your next good idea.

    Content with a clear place to belong.

    src/components/ui/card.tsxElevated

    Avatar

    Data & structure

    Generated portraits, initials fallback and three sizes.

    AMITLM
    NPInitials fallback
    src/components/ui/avatar.tsxElevated

    Badge

    Data & structure

    Five semantic tones for status and metadata.

    ActiveDraftPendingNeeds reviewConsidered
    src/components/ui/badge.tsxElevated

    Table

    Data & structure

    Native table elements in a scroll-safe wrapper.

    PlanSeatsStatus
    Starter1Active
    Pro5Active
    Enterprise25Active
    src/components/ui/table.tsxElevated

    DataTable

    Data & structure

    Typed sorting, filtering, selection and pagination.

    Table density
    Table material

    Customer portfolio

    8 records

    Choose columns, change the page size and select records.

    8 illustrative customers · Monthly value in USD
    Olivia RhyePro$249
    Phoenix BakerEnterprise$699
    Lana SteinerPro$249
    1–3 of 8 recordsPage 1 of 3
    src/components/ui/data-table.tsxElevated

    Chart

    Data & structure

    Six chart types with accessible data-table alternatives.

    Demo growth by month
    Demo growth by monthCurrentPrevious
    May2824
    June3429
    July3230
    August4234
    src/components/ui/chart.tsxElevated

    Alert

    Feedback

    Four semantic tones with alert announcements.

    Changes saved

    Everything is up to date.

    A little attention needed

    Review the remaining details.
    src/components/ui/alert.tsxElevated

    Toast

    Feedback

    Non-blocking feedback with Sonner.

    src/components/ui/toast.tsxElevated

    Tooltip

    Overlays

    Contextual help with pointer and keyboard access.

    src/components/ui/tooltip.tsxElevated

    Popover

    Overlays

    A positioned surface for contextual controls.

    src/components/ui/popover.tsxElevated

    Dialog

    Overlays

    Modal content with a title, description and focus trap.

    src/components/ui/dialog.tsxElevated

    Drawer

    Overlays

    A side sheet with the same focus contract as Dialog.

    src/components/ui/drawer.tsxElevated

    DropdownMenu

    Overlays

    Keyboard-aware actions, groups and separators.

    src/components/ui/dropdown-menu.tsxElevated

    Progress

    Feedback

    A labelled, clamped determinate progress indicator.

    Your progress64%

    src/components/ui/progress.tsxElevated

    Spinner

    Feedback

    A loading indicator with an accessible label.

    Loading…
    src/components/ui/spinner.tsxElevated

    Skeleton

    Feedback

    Reduced-motion-friendly loading shapes.

    src/components/ui/skeleton.tsxElevated

    Empty

    Feedback

    A clear empty state with an optional next action.

    A little quiet here.

    Make room for something new.

    src/components/ui/empty.tsxElevated

    Accordion

    Overlays

    Expandable sections built on Base UI.

    Original source components, semantic tokens and complete application examples.

    src/components/ui/accordion.tsxElevated

    Carousel

    Media

    Generated images with manual navigation and labelled controls.

    An ivory sculptural arch and sage sphere in warm side light

    Slide 1 · 3

    src/components/ui/carousel.tsxElevated

    Gallery

    Media

    Generated images in a responsive grid with a focus-managed lightbox.

    src/components/ui/gallery.tsxElevated

    VideoPlayer

    Media

    Playback, seeking, mute, captions and fullscreen.

    0:000:00
    src/components/ui/video-player.tsxElevated

    Ribbon

    Media

    A compact accent for highlights and releases.

    New releaseConsideredComing next
    src/components/ui/ribbon.tsxElevated

    Palette changes apply across the collection. Specimen overrides stay local and are included in the copied example. Accessibility notes →