Playground

Live components from the design system. Toggle day/night using the nav to test both themes.

Button

src/components/ui/Button.tsx

Primary

Sizes

With icons

Disabled

Secondary

Sizes

With icons

Disabled

Ghost

Sizes

With icons

Disabled

IconButton

src/components/ui/IconButton.tsx

Hover any button to see the tooltip. The label also provides the accessible name.

Ghost (default)

Sizes

Different actions

Disabled

Secondary

Sizes

Primary

Sizes

Tooltip

src/components/ui/Tooltip.tsx

Wraps any element and shows a label above it on hover. Used internally by IconButton.

On arbitrary elements

Hover meShortLong content (hover to see wrap)

On buttons

InputText

src/components/ui/InputText.tsx

Sizes

sm / md / lg

Small

Medium

Large

States

Default + help text

Name

Required

Name

Read-only

Username

Error

Disabled

Name

Leading + trailing icons

Leading icon

Trailing icon

Password

Amount

USD

Both

Textarea

src/components/ui/Textarea.tsx

States

Default

Message

With help text + character count

Bio

Error

Message

Disabled

Notes

Tag

src/components/ui/Tag.tsx

Variants

Default (sm)

UX DesignDesign SystemsReact

Subtle (sm)

Front-EndAITokens

Accent (sm)

ActiveFeatured

Sizes

sm vs md

Small tagMedium tagSmall subtleMedium subtleSmall accentMedium accent

Removable

With remove button

RemovableSubtleAccentMedium removable

Badge

src/components/ui/Badge.tsx

Variants

Count badges

33333

Max count

4299+99+

String labels

NewBeta!

Dot mode

Dot variants

Card

src/components/ui/Card.tsx

Layout shell only — surface + border + radius. Children are laid out freely inside.

Examples

Simple content card

DESIGN SYSTEMS

Component Library

A scalable token-driven system built alongside product code.

Card with tags and action

AIUX Engineering

AI-Powered Innovation

Designed and shipped AI-native features using a Builder workflow.

Card as article element

Q4 Report

Updated 2 days ago