Getting Started
Get started with Mono UI
Getting Started with Mono UI
What you get
Mono UI includes three components:
- Figma library — 400+ components with variants and auto-layout
- React starters — Unstyled component code ready to customize
- Token system — CSS variables and JSON tokens for consistency
Choose your starting point based on your workflow.
Designers: Access the Figma library
- Purchase Mono UI and you'll receive a link
- Open the link and click Duplicate to your account
- You now have your own editable copy of all 400+ components
The library is organized by component type:
- Forms (inputs, selects, checkboxes)
- Buttons (primary, secondary, sizes)
- Navigation (tabs, breadcrumbs, sidebars)
- Feedback (alerts, modals, toasts)
- Layout (cards, grids, dividers)
Dark and light modes
Every component is designed for both dark and light themes. Toggle between them in the Figma sidebar.
Developers: Use the React starters
- Download the React starter components
- Extract the archive
- Copy components into your project
- Apply the Mono UI tokens to your design system
Components are unstyled — you own the look and feel. All tokens map 1:1 to CSS variables.
Example usage
import { Button } from './components/Button';
export default function MyApp() {
return <Button variant="primary">Click me</Button>;
}
CSS variables power the styling:
:root {
--color-primary: #000;
--color-secondary: #666;
--spacing-xs: 4px;
--spacing-sm: 8px;
}
Token system
Mono UI ships with a complete token file (JSON):
{
"colors": {
"primary": "#000",
"secondary": "#666"
},
"spacing": {
"xs": "4px",
"sm": "8px"
}
}
Import into your project and map to CSS variables. One source of truth for design.
Theming
Switch between dark and light mode:
<html class="light-theme">
<!-- or -->
<html class="dark-theme"></html>
</html>
Both themes are production-ready. No contrast issues, no color fumbling.