Components

Complete showcase of every shared UI component

Typography Specimen

The typographic scale used across the application.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

This is a lead paragraph used for introductions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is small text used for captions, footnotes, and secondary information.

This is muted text often used for descriptions and helper content.

The best way to predict the future is to invent it.

Use the console.log() function for debugging.

First unordered item
Second unordered item
Third unordered item

First ordered item
Second ordered item
Third ordered item

Color Palette

Theme colors derived from CSS custom properties.

background

foreground

primary

primary-foreground

secondary

secondary-foreground

muted

muted-foreground

accent

accent-foreground

destructive

border

input

ring

chart-1

chart-2

chart-3

chart-4

chart-5

chart-6

Buttons & Actions

Button variants, sizes, toggles, and toggle groups.

Variants

Sizes

Toggle

Toggle Group

Data Display

Avatars, badges, cards, keyboard shortcuts, and tables.

Avatars

ABCDEF

Badges

DefaultSecondaryOutlineDestructive

Card

Card Title

This is a card description with supporting text.

Cards are used to group related content and actions. They can contain headers, content, and footers.

Kbd

⌘ K

Table

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol Williams	carol@example.com	Viewer

Data Input

Form controls for collecting user input.

Feedback

Alerts, progress indicators, skeletons, spinners, empty states, and toasts.

Alerts

Heads up!

You can add components to your app using the CLI.

Error

Your session has expired. Please log in again.

Progress

Skeleton

Spinner

Empty State

No results found

Try adjusting your search or filters to find what you are looking for.

Toast

Layout

Accordion, collapsible, tabs, resizable panels, scroll areas, and aspect ratios.

Accordion

Collapsible

@peduarte starred 3 repositories

Tabs

Make changes to your account here. Click save when you are done.

Resizable

Panel One

Panel Two

Scroll Area

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Aspect Ratio (16:9)

16:9 Content

Navigation

Breadcrumbs, pagination, and menubars.

Breadcrumb

Pagination

Menubar

Overlays

Dialogs, sheets, drawers, dropdowns, popovers, hover cards, tooltips, command palettes, and context menus.

Command Palette

Context Menu

Right-click here