Quarterly onboarding
Welcome flow for new workspace admins.
Live
Twentyfirst UI · Pro
Sharp, dense interfaces.
Pro is sharp, dense and dark-first: monochrome cells on a visible hairline grid, square corners, Geist, and colour only for state. Same components as Halo, switchable at runtime.
sh
npx @twentyfirstmedia/ui init --kit pro
18Projects
€48kRevenue
Waiting for approvalMEJPSL
Why these kits
- One API, two looks
Halo and Pro share every component, prop and piece of markup. Only tokens and CSS differ, so an app can switch at runtime.
- Mobile first
Every component works from a 320px screen up: shells collapse, tables scroll, dialogs become sheets and inputs never zoom.
- Ready-made states
Empty, loading, error and approval states come with the components, so screens look finished from the first render.
- Accessible
Keyboard paths, focus rings and ARIA follow the reference; axe runs on every preview of both kits, light and dark.
- Tokens only
No colour literals in component CSS. Tokens come from one file per kit and feed CSS variables and a Tailwind v4 preset.
- Private by default
Fonts are self-hosted, nothing phones home and components make no requests of their own.
Explore
InstallationPackage, styles, provider and the GitHub registry.CLIinit, add, list and diff.Theming and tokensLight, dark, density, and every token side by side.119 component groupsLive examples, code and props.AI agents and MCPMCP server, llms.txt and Markdown for every page.37 patternsComplete screens built only from kit parts.Status and approvalsStatus shapes, approval cards and the inbox.
Every page of these docs exists for both kits: the Halo/Pro switch in the header shows the same page in the other look. Load both and switch with data-kit.