The kit
Every piece Fragms is built from, on one set of tokens. Surfaces go card, well, control. Motion opens in 250ms and closes in 150ms.
Type
Geist throughout. Six sizes, each with its own spacing.
Display
Beautiful, ready made
Title
Components for AI interfaces
Heading
A glow that follows a voice
Body and muted
Copy one file, change it however you like.
It takes its colours from the text around it.
Label and caption
Seconds on each page
Off, soft lines stand in
Surfaces
A card holds a well. Controls sit on either. Each has a dark and a light value.
Page
background
Card
card
Well
well
Control
control
Picked
control-active
Ink
foreground
Muted
muted
Buttons
Primary for the one next step, secondary for the rest, ghost in a row, outline beside a primary.
Variants
Sizes
With an arrow, an icon, only an icon, and off
Picking
Chips for filters and options, a segmented track for views and tabs.
Chips
Segmented
Choosing
A select for longer lists. It looks like a field, floats its list over anything that would clip it, and works from the keyboard, letters included.
Fonts, grouped, each in itself
Themes, with a swatch
Small, one locked
Cards
A frame with room inside, a well for the thing itself, and its name under it.
Points
Little agents with a face
Points
Thinking it over
Points
Reading along
Panel
Settings, lists and anything that is not a showcase.
Well
A sunken area for code, previews and fields.
Fields
Typing, switching and sliding.
Name
Shown on the card
What it saysPro
Floating
Menus grow from their button, tooltips wait a beat, dialogs scale up from 96%.
Folding
Rows that open in 250ms, both ways.
<Trail pages={visited} busy={browsing} />Every setting, what it takes, and what it starts at.
A compact row, for side panels like the Studio inspector.
Folded to start.
Finding your way
Sidebars, trails and the next page.
Components
Small things
Code, links, badges and keys.
import { Composer } from "@/components/composer";// Send turns into stop while it answers<Composer busy={answering} onStop={stop} />