Design System
A comprehensive collection of reusable components and design tokens built for consistency, accessibility, and developer experience.
Foundations
Components
Button
Primary action buttons with multiple variants and sizes.
Chip
Compact element for tags, filters, or selections.
CountBadge
Badge for displaying counts or numeric values.
NavItem
Navigation item for sidebars and menus.
ProfileBox
Expandable profile selector with dropdown.
SegmentControl
Tabbed navigation for switching between sections.
Sidebar
Complete sidebar with profile and navigation.
SocialIcons
Circular icon buttons for social media links.
SocialProfileItem
Clickable social media profile link.
About
Profile avatar component with hover effect for personal branding.
Development
New components in development
Input
Text input field with label, icons, and error states.
Select
Dropdown selector with search and keyboard navigation.
Tooltip
Contextual information popup on hover or focus.
Card
Container for grouped content with optional header and footer.
Switch
Toggle switch for binary on/off states.
Skeleton
Animated placeholder for loading content.
Divider
Visual separator for content sections.
Avatar
User avatar with image, initials, or fallback icon.
Modal
Dialog overlay for focused interactions.