DesignX

Components

55 components across 5 namespaces. Click any card to see a live preview and source code.

MD3 tokens

Core

Material Design 3 color, shape, and state tokens seeded from Paxeer blue #2841B8. Dark is default.

md3-tokensLive

LTWave typography

Core

LTWave and LTWaveMono typeface hooks. Font files are optional; CSS variables are required.

typographyLive

Utils

Core

className merge helper and dense MD3 focus-ring class.

utilsLive

Button

Core

shadcn Button restyled to MD3. Aliases: filled=default, error=destructive, tonal=secondary.

buttonLive

Virtual list

Core

Windowed list for dense IDE, tape, and roster rows.

virtual-listLive

Numeric stepper

Core

Increment/decrement field composed from Button + Input.

numeric-stepperLive

Status chip

Core

Badge wrapper. Tones map only to MD3 roles.

status-chipLive

Scroll region

Core

Named ScrollArea wrapper with a dense focus ring.

scroll-regionLive

Split handle

Core

Resizable start/end panes built on shadcn Resizable.

split-handleLive

Dialog

Core

Modal dialog primitive. Registry id is dialog — never modal or sheet.

dialogLive

Surface

Core

MD3 surface container. Registry id is surface — never modal or sheet.

surfaceLive

Badge

Core

shadcn Badge restyled to MD3 roles.

badgeLive

Input

Core

shadcn Input restyled to MD3.

inputLive

Textarea

Core

shadcn Textarea restyled to MD3.

textareaLive

Separator

Core

shadcn Separator restyled to MD3 outline-variant.

separatorLive

Skeleton

Core

shadcn Skeleton on surface-variant.

skeletonLive

Alert

Core

shadcn Alert. Destructive maps to error-container.

alertLive

Empty

Core

shadcn Empty state.

emptyLive

Scroll area

Core

shadcn ScrollArea. scroll-region wraps this.

scroll-areaLive

Table

Core

shadcn Table restyled to MD3.

tableLive

Tabs

Core

shadcn Tabs restyled to MD3.

tabsLive

Card

Core

shadcn Card on surface-container.

cardLive

Command

Core

shadcn Command (cmdk) composed with dialog.

commandLive

Resizable

Core

shadcn Resizable. split-handle wraps this.

resizableLive

Progress

Core

shadcn Progress on primary.

progressLive

Toggle group

Core

shadcn ToggleGroup restyled to MD3.

toggle-groupLive

Command palette

IDE

shadcn Command + Dialog overlay with grouped results.

command-paletteLive

File tree

IDE

Nested workspace tree with expand, selection, and git status chips.

file-treeLive

Editor tabs

IDE

shadcn Tabs strip with dirty markers and overflow scrolling.

editor-tabsLive

Terminal panel

IDE

Multi-session terminal chrome on Card + Tabs + ScrollArea.

terminal-panelLive

Problems panel

IDE

Diagnostics table with Alert and Badge severity tones.

problems-panelLive

Order ticket

Trading

Limit ticket. buy-emphasis maps to primary; sell-emphasis maps to error.

order-ticketLive

Trade tape

Trading

Print tape on virtual-list. Buy uses primary; sell uses error.

trade-tapeLive

Positions table

Trading

Open positions table with P&L badges.

positions-tableLive

Order book

Trading

Bid/ask tables. Bid text uses primary; ask text uses error.

order-bookLive

Market ticker

Trading

Horizontal quote strip with MD3 change badges.

market-tickerLive

Risk banner

Trading

Exposure callout using Alert. Hot usage maps to error.

risk-bannerLive

Agent roster

Agent Ops

Selectable agent table with MD3 status chips.

agent-rosterLive

Run timeline

Agent Ops

Vertical run event timeline with Separator.

run-timelineLive

Tool call trace

Agent Ops

Table of tool invocations and latency.

tool-call-traceLive

Task queue

Agent Ops

Ordered task table with owner and state.

task-queueLive

Health heartbeat

Agent Ops

Liveness card with Progress and latency.

health-heartbeatLive

Approval gate

Agent Ops

Operator approval using Alert + Dialog.

approval-gateLive

Budget panel

Agent Ops

Session spend against a cap.

budget-panelLive

Capability grants

Agent Ops

Read/write grants table.

capability-grantsLive

Session keys

Agent Ops

Active and revoked session key table.

session-keysLive

Message thread

AI Chat

Role-mapped conversation on Card + ScrollArea.

message-threadLive

Composer

AI Chat

Chat composer using Textarea + Button.

composerLive

Streaming text

AI Chat

Token stream renderer with Skeleton while empty.

streaming-textLive

Tool call card

AI Chat

Card for a single tool invocation.

tool-call-cardLive

Citation chip

AI Chat

Citation marker using tertiary Badge.

citation-chipLive

Suggestion chips

AI Chat

Suggested prompt buttons.

suggestion-chipsLive

Model switcher

AI Chat

ToggleGroup of available models.

model-switcherLive

System prompt panel

AI Chat

Editable system prompt on Card + Textarea.

system-prompt-panelLive

Compare pane

AI Chat

Side-by-side model output cards.

compare-paneLive