Developer handbook

Albiorix UI component library

Browse shared UI primitives and see recommended usage. Import from @/components/ui/* instead of creating ad-hoc components.

← Back to home

Tokens & principlesv0.1

All UI components follow a neutral slate palette with a primary blue accent, rounded corners, and comfortable spacing for dense business UIs.

Use these primitives to build screens for employees, HR, and admins. Keep layouts minimal, with clear hierarchy and strong affordances for primary actions.

Spacing: 4 / 8 / 12 / 16 px grid.
Border radius: 8px for cards, 9999px for pills and primary CTAs.
Typography: use Tailwind text sizes (xs, sm, base) and font-semibold for titles.

Button

Primary and secondary actions with size and variant support.

@/components/ui/button

Preview

Usage

import { Button } from "@/components/ui/button";

<Button size="sm">Save</Button>
<Button size="sm" variant="outline">Cancel</Button>