We built this UI kit because we were rebuilding the same dark-mode SaaS components on every engagement. After our twelfth project, we extracted the common patterns, documented the token system, and made the library available for free. Every component in it is used in production work today.
What's Included
The kit ships with 200+ components across six categories. Everything is built on a token-based design system — colours, spacing, typography, and radii are abstracted into variables so reskinning for a specific brand takes minutes rather than days.
- Navigation — topbar, sidebar, breadcrumbs, tabs, and mobile nav variants with open/close states
- Forms — inputs, selects, checkboxes, radio groups, toggles, date pickers, and full form layout patterns
- Data display — tables, cards, stat tiles, progress bars, badges, tags, and empty states
- Modals and overlays — dialogs, drawers, tooltips, popovers, and notification toasts
- Marketing sections — hero variants, feature grids, pricing tables, testimonial blocks, and CTA banners
- Icons — 80 line icons designed to match the component aesthetic at 16×16, 20×20, and 24×24
The Token System
Every component references a shared token library rather than hardcoded values. The token set covers background layers (bg, bg-surface, bg-elevated), text hierarchy (primary, secondary, tertiary), border opacity, accent colour, and the full shadow and radius scale.
Design System Principle
A component library without tokens is a collection of static assets. The token layer is what makes it a system — the difference between a one-time shortcut and a reusable foundation. Swap the accent token and the entire library updates instantly.
How to Set It Up in Figma
- Download the .fig file and open it in Figma — no plugins or paid tiers required
- Use "Move to project" to add the file to your workspace as a shared library source
- Publish the library from Assets panel → library icon → Publish
- In your working file, enable the library under Assets → Team Libraries
- Components appear in your Assets panel; insert them like any native Figma component
- To apply a brand: open the token page, update accent and background base, republish — the change propagates to all 200+ components instantly
Design Decisions Worth Knowing
The background layering (bg → bg-surface → bg-elevated) is intentional and critical to the visual hierarchy. bg is the base canvas. bg-surface is one step up — cards, panels. bg-elevated is above that — modals, dropdowns. Using the wrong layer flattens the depth and makes the UI feel unstructured.
The kit uses a single accent colour throughout. This is a deliberate constraint. Multiple accent colours in a dark SaaS product signal either brand inconsistency or an underdeveloped system. The default is Kairo indigo (#5E6AD2), but the token makes it a one-variable change.
Components
Before
Build from scratch
After
With this kit
Brand application time
Before
Manual (1 day)
After
Token swap
Downloads to date
Before
After
Free resource
Categories covered
Before
After
Nav to Marketing
“We used the Kairo UI kit as the foundation for a client dashboard project. Having a production-quality dark component library to start from saved us at least three weeks of design work on the first sprint alone.”
— Product Designer, Series A SaaS
Licence
Free for personal and commercial use. No attribution required. The kit cannot be resold or redistributed as a standalone product — use it in your projects freely.