Component Library
15 production-ready components — animated, accessible, and theme-aware. All installable via the shadcn CLI registry.
Cards & Containers
Glass-morphism card variants with backdrop blur, translucent backgrounds, and subtle borders — designed to float above rich visual backgrounds.
Frosted
Ideal for overlaying content on vivid backgrounds.
Subtle
Gentle visual separation without heavy blur.
Colored
Brand-color wash with soft border highlight.
Elevated
Highest-level depth for modals and drawers.
Badges & Labels
Gradient badges for status, category, and tag use cases, plus keyboard shortcut indicators in multiple sizes.
Gradient Badge variants
Gradient badges in context
Keyboard shortcuts — sizes
Keyboard shortcut combinations
Data Display
Stat cards with trend indicators, circular progress rings, and timeline components for activity feeds and version history.
Stat cards
Progress rings
Default — 72%
Success — 94%
Warning — 58%
Info — 35%
Timeline
Deployment successful
v2.4.0 deployed to production — all health checks passed.
Pull request merged
#482 — Add OTP input component with paste support.
Review requested
#481 — Tabs fancy: add segmented + underline variants.
Branch created
feature/extended-component-library branched from main.
Inputs & Forms
Floating-label inputs, instant search with clear action, and OTP entry — all keyboard-navigable, screen-reader friendly, and fully styled.
Float label input
Default
With error
Please enter a valid email address.
Disabled
Search input
Default
Loading state
Large size
OTP input
6-digit code
Enter the 6-digit code sent to your phone.
4-digit PIN (small size)
Enter your 4-digit PIN.
OTP with separators
6-digit code (3-3 groups)
Separators visually group digit pairs for readability.
8-digit code (4-4 groups)
Dash separator for backup or recovery codes.
Avatars
Stacked avatar groups with automatic overflow count — three sizes, ring-bordered, and built with Radix Avatar for accessible fallbacks.
Small — max 3 (shows +2)
Default — max 4 (shows +1)
Large — all visible
Layout & Navigation
Accordion and tab components with multiple visual variants — bordered, separated, flush, underline, pill, and segmented styles.
AccordionFancy variants
Bordered
npx shadcn@latest add followed by the component name to install from the registry.Separated
motion-safe: to respect user preferences.Flush
TabsFancy variants
Underline
A high-level summary of your project — active users, recent deployments, and key performance indicators at a glance.
Pill
Showing all 42 components across Phase 1 and Phase 2 of the component library.
Segmented
Today's activity: 284 page views, 31 new sign-ups, 12 conversions.
Animation
Staggered list entrance animations and contextual tooltip variants — all motion is gated behind prefers-reduced-motion for accessibility compliance.
MotionList — staggered entrance
Slide up (default)
Instant deploy
Push to main and go live in seconds
Auto SSL
TLS certificates provisioned automatically
Live metrics
Real-time performance dashboards
Global CDN
Edge-cached assets in 50+ regions
Zero cold starts
Always-warm serverless functions
Slide left
Design tokens
Component variants
Dark mode support
Accessibility audit
Registry publish
EnhancedTooltip — variants