Component Library
Every UI pattern used across the Cuitty portal — buttons, badges, cards, forms, tables, modals, and more. 55+ components documented with live specimens.
Buttons
Variants
Sizes
With Icons
Icon Only
States
Badges & Pills
Semantic Variants
Sizes
Module Categories
Connector Status
Log Levels
Tier Badges
Cards
Surface Card
Card Title
The standard card pattern used throughout the portal. White background with subtle border and rounded corners.
Stat Cards (Widget type="stat")
Module Card
Runtime process metrics — CPU, memory, event loop, and GC
Collapsible Card
Expanded content goes here. The chevron rotates 180 degrees when expanded.
Form Elements
Text Input
Help text describing the expected input.
This field is required.
Search Input
Select Dropdown
Secret Input
Toggle Switch
Tables
Data Table (TanStack Pattern)
| Audit | config.update | alice@cuitty.dev | 2m ago | success | |
| Deploys | deploy.rollback | bob@cuitty.dev | 15m ago | warning | |
| Secrets | secret.rotate | carol@cuitty.dev | 1h ago | success | |
| Costs | alert.triggered | system | 3h ago | danger | |
| Configs | config.create | dave@cuitty.dev | 1d ago | success |
Empty State
No entries yet
Data will appear here once the module is configured.
Modals & Overlays
Confirm Modal — Danger Variant
Delete Secret
Are you sure you want to delete DATABASE_URL? This action cannot be undone and may break active deployments.
Command Palette (Cmd+K)
Navigation
Sidebar Navigation (260px)
Top Header (Sticky)
Notification Dropdown
Feedback & Status
Health Status Dots
Skeleton Loaders
SkeletonCard
SkeletonTable
SkeletonList
Toast Notifications
Floating Action Button (AI Assistant)
Empty States
No messages yet
When you receive messages, they'll appear here.
Basic (icon + title + description)
No results found
Try adjusting your search terms or filters.
With action button
Skeleton Loaders
Text Lines
Single line
3 lines (last shorter)
5 lines
Block
Block skeleton
Circle + Composition
User card skeleton