Docs Components Tokens

All Components

Browse all available components organized by category.

Buttons

Interactive elements for triggering actions, toggling states, and making selections.

Button

Icon Button

Link Button

Toggle Button

Segmented

Chip

Collections

Components for displaying and selecting from lists of options, including dropdowns, menus, and searchable lists.

Combobox

Command

Right click me to open context menu

Context Menu

Dropdown

List

Menubar

Multi Select

Select

Forms

Input components for collecting and validating user data, from text fields to complex form controls.

Checkbox

Radio

Input

Textarea

Chips Input

Numeric Input

Search Input

Range

Switch

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Otp Input

Label

We'll never share your email with anyone else.

Description

Please enter a valid email address.

ErrorMessage

We'll never share with anyone else.

Text Field

Hello, ﻿@John Doe!

Context Input

Md Input

Form

Date & Time

Specialized inputs and calendars for selecting dates, times, and date ranges.

Date Input

Date Range Input

Month Calendar

Time Input

Time Range Input

Time Calendar

1970

Quarter Calendar

2020 - 2031

Year Calendar

Navigation

Components for moving between views, pages, and content sections within an application.

Tabs

Pagination

Stackflow

Feedback

John Doe

Avatar

Badge

Hint

Progress Bar

Progress Circle

Quisquam, quos.

Skeleton

Toast

Overlays

Floating UI elements like modals, dialogs, popovers, and tooltips that appear above the main content.

This action cannot be undone. Are you sure you want to delete this item?

Alert Dialog

Dialog

This is a popover content. It will be displayed when the button is clicked.

Popover

Tooltip

Layouts

Structural components for organizing and arranging content, including scroll areas, splitters, and grids.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

Scroll Area

Separator

Splitter

Virtualized Grid

Data Display

Components for presenting information, including tables, code blocks, and rich text rendering.


import React from 'react';

function TodoItem({ todo, onToggle }) {
  return (
    <li className="todo-item">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
    </li>
  );
}

Code Block

# Hello, world!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quasi dolorem, cum ratione accusantium vitae commodi minima dolorum beatae, adipisci odio!

- List item 1 - List item 2 - List item 3

1. List item 1 2. List item 2 3. List item 3

Md Render

⌘K⇧S⌥O⌃C

Kbd

Table

Preview

Picture Preview

Pickers

Specialized selection components like emoji pickers and color pickers for choosing from visual options.

Emoji Picker