06 — Components
06.1 — Buttons
06.2 — Badges & Pills
06.3 — Cards
06.4 — Form Elements
06.5 — Tables
06.6 — Modals & Overlays
06.7 — Navigation
06.8 — Feedback & Status
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
DefaultPrimarySuccessWarningDanger
Sizes
SmallMediumLarge
Module Categories
securitydeploymentmonitoringtoolsdevelopment
Connector Status
ConnectedReadyDegradedErrorNot Configured
Log Levels
TRACEDEBUGINFOWARNERRORFATAL
Tier Badges
EnterpriseProFreeNativeThird-party
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")
Total Deploys
1,247
+12%Monthly Cost
$4,892
-8%Uptime
99.97%
+0.02%Avg Response
142ms
-23msModule Card
Performancev2.1.0
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
Enable notificationsReceive alerts for deployments
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)
ESC
Modules
Go to Deploys→
Deploy Settings
Actions
View Audit Log
Export Deploy History
↑↓ navigate↵ openK
Navigation
Sidebar Navigation (260px)
C
Cuitty PortalModules
Audit
Deploys
Logs
Performance
Secrets
Top Header (Sticky)
Deployshealthy
Notification Dropdown
Notifications3
Deploy failedapi-gateway production2m ago
Secret rotatedDATABASE_URL refreshed1h ago
Cost alertGCP exceeded $500 threshold3h ago
View All
Feedback & Status
Health Status Dots
Healthy
Degraded
Unhealthy
Skeleton Loaders
SkeletonCard
SkeletonTable
SkeletonList
Toast Notifications
✓Deploy completed successfully
✕Failed to rotate secret
ℹCopied to clipboard