Typography
Display & Headings
Display 1
Display 3
Heading 1
Heading 2
Heading 3
Heading 4
Body & Special
Lead paragraph for introductory text that needs emphasis.
Body 1 is the default body text size for most content areas.
Body 2 is slightly smaller, useful for secondary content.
Small text for captions, footnotes, and fine print.Inline & Formatting
Text with strong emphasis and italic emphasis.
Use inline code for technical terms and highlighted text for key points.
Visit example.com for more.
Good design is as little design as possible.
Lists
- First unordered item
- Second unordered item
- Third unordered item
- First ordered item
- Second ordered item
- Third ordered item
Dialog
Basic dialog
With form
Sheet
Right (default)
Left side
Tabs
Basic
Overview content. Tabs help organise related content into switchable panels.
Accordion
Single
Tooltip
Positions
Avatar
Sizes
ABCSDJ
Customised
AJGC
CodeBlock
TypeScript with line numbers
greet.ts
CSS
css
InlineCode
Use npm install to install dependencies, then run pnpm dev to start the dev server.
InputOTP
6-digit code
4-digit PIN
Card
Basic
Card Title
A brief description of this card's content.
Cards group related content and actions. They support headers, content areas, and footers.
With action
Notifications
Manage your notification preferences.
You have 3 unread notifications.
ProgressBar
Sizes
Small (default)
Medium
Values
0%
33%
100%
QRCode
DefaultPure SVG. Foreground defaults to currentColor.
Branded (logo overlay)Logo accepts a React node or an image src.
Foreground colorSet
color or a Tailwind text-* class.Foreground + background
EC level H keeps it scannable under the logo.