A compact reference for the shared UI package used across the site. Components, tokens, and patterns from @sachikit/ui.
Actions
Buttons cover primary actions, quieter controls, and lightweight links without leaving the shared visual language.
Variants
Primary for commitment, ghost for low emphasis, destructive for irreversible actions.
Sizes
Four sizes cover compact controls through more prominent CTAs.
Links
LinkButton keeps inline and outbound actions aligned with the rest of the system.
Typography
Text primitives define hierarchy and tone while staying tied to the app's semantic color system.
Variants
Display hierarchy, body copy, semantic emphasis, and monospace utilities come from one primitive.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Sizes
Copy sizes remain compact and editorial rather than oversized.
Body text in xs
xsBody text in sm
smBody text in base
baseBody text in lg
lgForms
Inputs compose around labels, descriptions, validation, and grouped controls without needing extra wrapper code in most flows.
Label and field
Standalone labels can carry optional text and extra context. Fields handle layout for native controls too.
Field also supports native controls such as checkboxes and switches.
Inputs
The same input primitive supports plain fields, richer descriptions, and inline validation.
Short helper text keeps the field self-explanatory.
Textarea shares the same field patterns.
Input group
Grouped controls keep related actions visually attached to the input they affect.
Feedback
Lightweight status indicators and loading states keep flows communicative without adding visual noise.
Badges
Badges label state, maturity, and emphasis at a glance.
Loading
Use the loader for active work and skeleton lines for content still resolving.
Overlays
Tooltips and dialogs cover quick context and focused interruption while staying within the same surface and motion system.
Tooltip
A small wrapper gives labels and controls additional context without adding permanent copy.
Hover or focus the trigger to preview the shared tooltip styling.
Dialog
Dialogs inherit the same surface treatment and support multiple width presets.
Compact content works well with the default dialog size.
Surfaces
Surface and aspect-ratio primitives help create calm containers for content, media, and compact dashboard modules.
Surfaces and media
The same primitive can frame content blocks or muted supporting areas.
System preview
Balanced neutrals, compact type, and restrained emphasis.
Packaging
Consume from the public package entrypoint to stay aligned with the supported surface area.