Cursor UI Component Showcase
A comprehensive showcase of all components in the Cursor-inspired design system. Modern flat design with subtle depth, smooth animations, and professional polish.
Color System
Dark theme with purple accents - Cursor-inspired palette
Buttons
Flat buttons with 2px hover lift effect - 200ms transitions
<button class="btn btn-primary">Primary Button</button>
Cards
Elevated panels with subtle shadows and hover effects
Basic Card
Clean card design with flat background and subtle shadow.
Card with Header
Card body content goes here.
<div class="card">...</div>
Form Elements
Minimal borders with purple focus glow
<input type="text" class="input" placeholder="..." />
Tables
Clean tables with hover row highlighting
| Asset | Price | 24h Change | Market Cap |
|---|---|---|---|
| Bitcoin | $45,123.45 | +5.2% | $850B |
| Ethereum | $2,345.67 | -2.1% | $280B |
| Cardano | $0.567 | +3.8% | $20B |
<div class="table-container"><table class="table">...</table></div>
Badges & Pills
Semantic color-coded badges
<span class="badge badge-primary">Primary</span>
Animations
Smooth 200ms animations - Cursor-style
Hover Lift
Lifts 2px on hover
Hover Scale
Scales to 102% on hover
Hover Glow
Purple glow on hover
<div class="card hover-lift">...</div>
Progress Bars
Clean progress indicators
Cursor-Inspired UI Design System • Version 1.0.0
Modern Flat + Subtle Depth • 200ms Smooth Animations • Purple Accents