Design System

Core - Primitives

Overview
Review paths
Preview chat app surfacesOpen the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.Build an inline app surfaceUse the host-friendly card, rail, and fullscreen rules.Review widget inventoryCompare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.Review artifact cardsCompare reference, decision, and generated artifact patterns.Design a shellStart with bounded chat shells, context rails, and panel states.Compare mobileReview mode changes, device framing, and recipe-level examples.Inspect tokensCheck foundation rules before composing new surfaces.

Primitives

All shadcn/ui primitives with their cva variants and interactive states.

Button

All variant x size combinations.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/button

default

destructive

outline

secondary

ghost

link

disabled

Input

Text input field with states.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/input

Textarea

Multi-line text input.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/textarea

Select

Dropdown select with Radix primitives.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/select

Checkbox

Toggle boolean states.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/checkbox

Switch

Toggle on/off states.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/switch

Label

Form field label.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/label

PasswordInput

Input with visibility toggle.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/password-input

PasswordRequirements

Real-time password validation checklist.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/password-requirements

  • At least 8 characters(not met)
  • Contains a letter(met)
  • Contains a number(met)

Badge

All badge variants.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/badge

defaultsecondarydestructivesuccesswarningoutline

StatusBadge

Status-aware badge with tone mapping. Takes label and tone props.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/status-badge

neutralinfosuccesswarningdanger

Avatar

User avatar with image and fallback.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/avatar

ABJDKN

Skeleton

Loading placeholder shapes.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/skeleton

Spinner

Loading indicator.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/spinner

Progress

Determinate progress bar.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/progress

AIProgress

Multi-stage AI processing indicator with rotating tips. Takes stage and optional currentStep.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/ai-progress

Generating content

50%
Analyzing images
Generating content
Reviewing quality
Complete

Crafting your project description...

Generating content. Crafting your project description...

SaveIndicator

Auto-save status display. Takes status: idle | saving | saved | error.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/save-indicator

Saving...
Saved
Save failed

UploadProgress

File upload progress with status. Takes progress, fileName, status, and optional onCancel.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/upload-progress

project-photo.jpg

45%

Uploading...

hero-banner.png

80%

Processing...

logo.svg

100%

Complete!

broken-file.pdf

30%

Upload failed

Alert

Alert banners with variants: default and destructive.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/alert

Card

Container with header, content, and footer. Variants: default, elevated.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/card

Default Card
Card description text goes here.

Card body content.

Elevated Card
Elevated surface variant.

Card body content.

Separator

Horizontal and vertical dividers.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/separator

Left
Right

ScrollArea

Custom scrollbar container.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/scroll-area

Scrollable content item 1

Scrollable content item 2

Scrollable content item 3

Scrollable content item 4

Scrollable content item 5

Scrollable content item 6

Scrollable content item 7

Scrollable content item 8

Scrollable content item 9

Scrollable content item 10

Scrollable content item 11

Scrollable content item 12

Scrollable content item 13

Scrollable content item 14

Scrollable content item 15

Scrollable content item 16

Scrollable content item 17

Scrollable content item 18

Scrollable content item 19

Scrollable content item 20

Table

Data table with header, body, rows.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/table

NameStatusAmount
Project AlphaActive$2,500
Project BetaPending$1,200
Project GammaDraft$800

Tabs

Tabbed content navigation.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/tabs

Overview tab content.

Accordion

Collapsible content sections.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/accordion

CompactPanelTabs

Icon-based tab bar for panels. Variants: default, workspace.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/compact-panel-tabs

Dialog

Modal dialog overlay.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/dialog

AlertDialog

Confirmation dialog requiring explicit action.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/alert-dialog

Sheet

Slide-out panel overlay. Supports side: top, right, bottom, left.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/sheet

Drawer

Mobile-friendly bottom drawer (vaul).

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/drawer

Popover

Floating content panel anchored to a trigger.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/popover

Tooltip

Hover tooltip for additional context.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/tooltip

HoverCard

Rich content card on hover.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/hover-card

DropdownMenu

Contextual action menu.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/dropdown-menu

Breadcrumb

Hierarchical navigation trail.

Developer details

Start from these files when you need to trace the live implementation.

@/shared/ui/breadcrumb