Design System Components
A comprehensive, production-ready UI kit built for corporate and business applications. Copy, paste, and customize.
đ¨ Color Palette
Core brand colors optimized for accessibility and corporate UI consistency.
Primary#2563eb
Primary Dark#1d4ed8
Secondary#06b6d4
Success#10b981
Warning#f59e0b
Danger#ef4444
Slate 900#0f172a
Background#f1f5f9
Aa Typography
System font stack for optimal performance and native feel across platforms.
Heading Scale
Display Heading
Section Title
Body Paragraph Text
Muted auxiliary text for descriptions and captions.
Inline code: npm install webcraft-ui
âŦ Buttons
Interactive elements with consistent hover, active, and disabled states.
Variants
Sizes
With Icons
đ Form Controls
Accessible inputs, toggles, and validation states.
Text Input
We'll never share your email.
Selection
Toggles & Checks
Enable notifications
Standard Plan
Enterprise Plan
đĻ Cards
Container components for grouping related information and actions.
Project Dashboard
Track metrics, manage sprints, and collaborate with your team in real-time.
Active
On Track
JD
John Doe
Product Manager
Managing the Q4 roadmap and cross-functional alignment across departments.
đ Data Display
Tables, badges, avatars, and progress indicators.
Data Table
| Employee | Role | Status | Progress | Action |
|---|---|---|---|---|
| Sarah Chen | UX Designer | Active |
|
|
| Marcus Reid | Developer | Review |
|
|
| Elena Volkov | Marketing Lead | Active |
|
Avatars & Badges
A
B
C
+3
đŦ Feedback
Alerts and notifications for user guidance and system status.
Information: Your session will expire in 15 minutes. Save your work to avoid losing changes.
Success: Profile updated successfully. Changes are now live across all devices.
Warning: API rate limit approaching. Please optimize your request frequency.
Error: Failed to connect to the database. Please check your network settings.
đĒ Modals & Overlays
Dialogs for focused interactions and confirmation workflows.