Design System Components

A collection of foundational UI elements built with Tailwind CSS

Accordion

What is this?

An accordion is a collapsible section used to toggle visibility of content.

How does it work?

It's built with the HTML <details> tag styled using Tailwind.

Alert

Avatar

Avatar

Jane Doe

@janedoe

Badge

New

Button

Card

Card Title

This is a simple card component using Tailwind classes for spacing and structure.

Toast (Static Preview)

Success

Your changes were saved!

Typography

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline
H6 Headline

Body / Base — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Body Small — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

Caption / Overline

Code / Mono

Separator

Alert

Success

Your changes have been saved.

Error

We couldn't save your changes.

Warning

Double‑check the form inputs.

Info

A new update is available.

Toast / Sonner (static preview)

Progress

Skeleton

Aspect Ratio

16:9
1:1
4:5

Avatar

Avatar Avatar
Avatar

Badge

Default Info Success Warning Destructive

Card

Card Title

Simple container with border and shadow.

Media Card

Image header with body content.

Inverted Card

Dark card for contrast sections.

Chart (SVG preview)

Button

Input, Textarea & Label

Input OTP

Checkbox, Radio Group, Switch

Select, Combobox, Dropdown, Menubar, Navigation

Calendar & Date Picker

July 2025

Su
Mo
Tu
We
Th
Fr
Sa

Tabs

Content for first tab.

Dialog Variants

Pagination

Table & Data Table

Name Title Email Role
Lindsay Walton Front-end Developer lindsay@example.com Member
Courtney Henry Designer courtney@example.com Viewer

Command Palette & Context Menu

Right‑click here for context menu.

Resizable & Scroll Area

Drag the bottom-right corner to resize me.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, laboriosam.

Scrollable content line 1

Scrollable content line 2

Scrollable content line 3

Scrollable content line 4

Scrollable content line 5

Scrollable content line 6

Scrollable content line 7

Scrollable content line 8

Scrollable content line 9

Slider

Collapsible

Show details
Hidden content inside the collapsible.