System Tokens & Kitchen Sink

The foundational theme variables and component library overview.

Colors

Tokens
Brand Primary
Brand Secondary
Brand Tertiary
Brand Quaternary
Primary Subtle
Success
Warning
Error
Background
Surface
Background Muted
Ring
Border
Text FG
Text FG Muted
Text FG Inverse

Surfaces & Borders

Surface Gradients

Primary
Secondary
Tertiary
Subtle

Border Colors

Border Primary
Border Secondary
Default Border

Typography

Typography.tsx
Hero

Hero

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Title

Title

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Heading 1

Heading 1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Heading 2

Heading 2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Heading 3

Heading 3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Heading 4

Heading 4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Paragraph

Paragraph

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Lead

Lead

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Small
SmallABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+
Muted

Muted

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+

Buttons

Button.tsx

Standard Actions

History / Tertiary Actions

Outline Actions

Destructive Actions

Other & States

Badges

Badge.tsx

Status Badges

SuccessWarningErrorInfoDefault

Action Badges (Button Matched)

PrimarySecondaryTertiaryDangerOutline

Protocol Badges (Metadata & Tags)

Protocol PrimaryProtocol Secondary

Avatars

Avatar.tsx
SM
MD
LG
@shadcn

Divider

Default Divider

Divider between content

Item 1
Item 2

Inputs

This field is required

Radio Group

Selected value: option-1

Page Layouts

PageContainer.tsx

PageContainer

Sample Page

This is how every dashboard and admin page looks by default.

Page content goes here...

Cards

Card.tsx

Card Title

This is a simple card component. It can contain any content.

Interactive Card

Cards can be used to group related content and actions.

Standard Card

This card follows the standard design with a header, divider, and content area.

Brand Primary

Blue themed card with primary accents.

Brand Secondary

Pink themed card with secondary accents.

Brand Tertiary

Teal themed card with tertiary accents.

Brand Quaternary

Clean white background card variant.

Promotion Card

High-visibility card for alerts or calls to action.

Table

Table.tsx
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
Total$1,750.00

Charts

Chart.tsx

Line Chart

Bar Chart

Dashboard Components

MetricCard.tsx
Total Revenue

$45,231

Total earnings this month

12%
last month
System Health

98.2%

Average uptime

Active Issues

3

Requires immediate attention

Structural Components

Modal

Modal.tsx

Toast Notifications

Toast.tsx

Select & Switch

Select.tsx, Switch.tsx

TextArea & Spinner

TextArea.tsx, Spinner.tsx

Utility Components

OrderedList, Tooltip, Breadcrumbs, Dots

Ordered List

  • First item in the list
  • Second item with custom bullet
  • Third item showing the style

Tooltip

Breadcrumbs

Dots

Specialized Modals

StatusModal.tsx