Components

Components are the reusable building blocks of our design system. Each component is designed to meet a specific interaction or UI need while ensuring consistency, accessibility, and usability.

Available Components

Forms and Inputs

• Badges - Display status, category, or tags consistently.
• Breadcrumbs - Show navigation path and current location.
• Buttons - Trigger actions and interactions.
• Checkboxes - Allow users to select multiple options.
• Notification Badges - Indicate status, notifications or activity.
• Radio Buttons - Let users select a single option from a set.
• Range Slider - Enable selection of a value within a range.
• Toggle / Switch - A binary switch between two states.

Foundations

• Colors - The color system for our UI.
• Tokens - Store visual values like colors, sizes, and spacing.

Each component follows best practices for accessibility, usability, and performance.

How to Use

1. Browse the components and their guidelines.
2. Copy & Implement the provided examples and code snippets.
3. Customize styles using our design tokens.

More components will be added as the design system evolves. Stay tuned!