Getting Started

Introduction

Form & Input

Button
Button Group
Checkbox
Field
Input
Input Group
Input OTP
Label
Native Select
Combobox
Radio Group
Select
Slider
Switch
Textarea
Toggle
Toggle Group

Display

Avatar
Badge
Card
Carousel
Chart
Empty
Item
Kbd
Progress
Skeleton
Spinner
Table

Navigation

Breadcrumb
Menubar
Navigation Menu
Pagination
Sidebar
Tabs

Overlay

Alert Dialog
Context Menu
Dialog
Drawer
Dropdown Menu
Hover Card
Popover
Sheet
Tooltip

Data

Accordion
Collapsible
Command
Data Table
Separator

Feedback

Alert
Sonner

Utility

Aspect Ratio
Calendar
Date Picker
Scroll Area

Foundations

Icons

Design Tokens

Colors
Typography
Spacing
Radius

Documentation

Docs
Form & Input
Input OTP

Input OTP

Form & Input

Accessible one-time-password input.

[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; } }

1

2

3

4

5

6