Welcome to Chromia UI
Chromia UI is a modern Flutter design system that provides a complete set of production-ready UI components for mobile, desktop, and web applications. Built with flexibility and consistency in mind, it offers powerful theming capabilities, multi-brand support, and a comprehensive token-based design system.Status: Chromia UI is under active development. API may change before version 1.0.0.
What is Chromia UI?
Chromia UI is a comprehensive Flutter UI component library that gives developers everything they need to build beautiful, consistent applications across all platforms. With 34+ components, dynamic theming, and a complete design token system, Chromia UI accelerates development while maintaining design consistency.Key Features
Multi-Platform Support
Works seamlessly on mobile, desktop, and web platforms out of the box
Dynamic Theming
Runtime theme switching with built-in light, dark, and custom theme support
Multi-Brand Support
Manage multiple brands with independent themes and color palettes
34+ Components
Complete set of production-ready UI components ready to use
Design Tokens
Consistent color, typography, spacing, radius, shadow, and animation tokens
Type Safe
Strongly typed API for better developer experience and fewer runtime errors
Responsive Design
Adaptive layouts and breakpoint tokens for any screen size
BLoC Ready
Example app demonstrates BLoC integration for state management
Design Token System
Chromia UI uses a comprehensive token-based design system to ensure consistency across all components:| Token Category | Class | Description |
|---|---|---|
| Colors | ChromiaColors | Semantic color roles (brand, surface, state, border) |
| Typography | ChromiaTypography | Text style scale from display to label |
| Spacing | ChromiaSpacing | Consistent margin, padding, and gap values |
| Radius | ChromiaRadius | Border radius scale |
| Shadows | ChromiaShadows | Elevation shadow definitions |
| Animation | AnimationTokens | Durations and curves |
| Breakpoints | BreakpointTokens | Responsive layout breakpoints |
Component Categories
Chromia UI provides components organized into five main categories:Display Components
- Avatar - User profile images with fallback initials
- Badges & Labels - Status indicators and notification counts
- Chip - Compact elements for tags and filters
- Text - Styled text components with typography system
Feedback Components
- Dialog - Modal dialogs for confirmations and alerts
- Progress Indicators - Linear, circular, and stepped progress displays
- Snackbar - Temporary messages and notifications
- Tooltip - Contextual help and information
Input Components
- Button - Primary action triggers with variants
- Checkbox - Single and multi-select options
- Date Picker - Date and time selection
- Dropdown - Selection from predefined options
- Radio Button - Exclusive selection groups
- Slider - Value selection from continuous ranges
- Text Field - Text input with validation
- Toggle Button - Binary state switches
Layout Components
- Card - Container for grouped content
- Divider - Visual content separators
Navigation Components
- App Bar - Top navigation with actions
- Bottom Navigation - Bottom tab navigation
- Drawer - Side navigation panel
- Menu - Contextual menus and dropdowns
Requirements
Before getting started with Chromia UI, ensure your development environment meets these requirements:- Dart:
>=3.10.0 <4.0.0 - Flutter:
>=3.38.0
Next Steps
Installation
Add Chromia UI to your Flutter project
Quick Start
Build your first app with Chromia UI