LotOS UI — Component System
27 ComponentsWCAG 2.2 AAAReact 19
Component Library — Interactive Preview
27 production components. One design language.
Dark-first, accessible, and built to ship. Every component uses LotOS design tokens — no external UI library required.
Buttons — 6 variants
Badges & Status Chips
CriticalWarningSuccessInfoPremium● HIGH● MED● LOW
Stat Cards
$48.2KMonthly Revenue
2,341Active Users
99.8%Uptime SLA
Cards — 3 variants
Standard Card
Default surface for content containers. Border + background with subtle elevation.
Glass Card
Glass morphism surface with backdrop blur. Works best over gradient backgrounds.
GlassBlur
Accent Card
Electric red tint for highlighted surfaces, CTAs, and important action zones.
Progress Bars
API Load72%
Storage Used88%
Monthly Budget54%
Deployment Progress91%
Premium Tier Capacity35%
Form Elements
Alerts & Feedback
ℹ Your account is in free tier. Upgrade to unlock premium surfaces.
✓ Component library successfully installed. You are ready to build.
⚠ Entitlement check delayed. Vault will retry in 30 seconds.
✗ Payment processing failed. Check your Mercado Pago or PayPal account.
Status & Live Signals
React arm stable
CLI active
Backend stacks alpha
Desktop prototype
Vault gating live
Install the full component library in your project:
npm install @lotosui/claude-arm