Button
Buttons trigger actions or navigation. Available in primary and dark variants.
UI Component Library
A collection of reusable, accessible components built with React. Browse the components below to see what's available.
Input
Text inputs for collecting user data. Supports labels, placeholders, and different states.
Textarea
Multi-line text input for longer content like messages or descriptions.
Select
Dropdown select for choosing from predefined options.
Checkbox & Radio
Selection controls for single or multiple choices.
Toggle
Switch control for binary on/off states.
Dark ModeEnable dark theme
NotificationsReceive push notifications
Auto-saveAutomatically save changes
Badge
Small status indicators and labels for categorization.
DefaultSuccessWarningErrorInfo
Alert
Contextual feedback messages for user actions and system status.
Information
Success
Warning
Error
Avatar
User profile images with different sizes and fallback initials.
JD
AB
MK
TS
Progress
Visual indicators for completion status and loading states.
Storage25%
Upload60%
Complete100%
Tabs
Navigation tabs for switching between different views or sections.
Card
Container component for grouping related content.
Project Alpha
ActiveA comprehensive dashboard for monitoring system performance and user analytics.
Project Beta
In ProgressMobile application for real-time notifications and team collaboration.
Feature Card
Display features or benefits with a title and description.
High Performance
Optimized for speed and efficiency with modern best practices.
Customizable
Easily adapt components to match your brand and design system.
Developer Friendly
Simple APIs and clear documentation for rapid development.
Stat Item
Display key metrics or statistics with a number and label.
99.9%
Uptime
10K+
Users
50ms
Response Time
24/7
Support
Pricing Card
Display pricing plans with features, price, and call-to-action.
Table
Structured data display with rows and columns.
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Wilson | bob@example.com | Viewer | Pending |
| Alice Brown | alice@example.com | Editor | Inactive |
Skeleton
Placeholder loading states for content that is being fetched.
Tooltip
Contextual information displayed on hover.
This is a tooltip
InfoAdditional information
Color Palette
The design system uses a minimal dark theme with these CSS variables.
Background
#000000Element
#0d0d0dDark Button
#262626Text
#ffffffText Secondary
#707070Typography
The design system uses two font families for different purposes.
Headings — Space Grotesk
The quick brown fox
Body — Kode Mono
The quick brown fox jumps over the lazy dog.