Overview
Primitives, patterns and components for Rook’s product screens: Rook Library, the Portal, the docs and release notes.
Start here
Four entry points. Read them in this order the first time; after that, jump straight to the sheet you need.
- P-201PrimitivesColor, type, size and spacing tokens: the values every component is built from.Read the sheet →
- P-204Elevation & depthSheets on the drafting table: what rests, what sits below, and what floats.Read the sheet →
- P-301UI patternsForms, navigation, feedback and data display, assembled from the components.Read the sheet →
- C-501ComponentsButtons, form controls, content, overlays, layout and data, with states and props.Read the sheet →
Principles
What every screen we build should do, whether it lists details in the Library or seats in the Portal.
- 01 · Clarity over decoration
- Engineers read our screens to make decisions. Hierarchy, labels and alignment carry the design; ornament doesn’t.
- 02 · Dense but calm
- A detail grid or a members roster shows a lot at once. Every size sits on the 8px grid, so dense screens still read in order.
- 03 · Every state designed
- Rest, hover, focus, pressed, disabled, empty, loading and failed are part of the spec, not left to the build.
- 04 · Accessible by default
- WCAG 2.2 AA is the floor: 4.5:1 text, a visible focus ring, full keyboard use, never color alone.
Component status
What ships in src/components/ui today. Stable parts were restyled for depth; new parts replace markup that was built by hand; planned parts are designed first.
| Component | Source | Notes | Status |
|---|---|---|---|
| Button | @/components/ui/button | Restyled: edge, pressed inset, 40px. | Stable |
| Input, Textarea | @/components/ui/input · textarea | Recessed, strong edge. | Stable |
| Field | @/components/ui/field | Label, hint and error. | Stable |
| Badge | @/components/ui/badge | The one pill: 24px, 8px radius. | Stable |
| StatusBadge, Tag | @/components/library/StatusBadge | Dot and word; built on Badge. | Stable |
| Alert | @/components/ui/alert | Flat; no shadow. | Stable |
| Sheet | @/components/ui/sheet | Overlay shadow, no border. | Stable |
| Table | @/components/ui/table | Ruled; sortable header. | Stable |
| Dialog | @/components/ui/dialog | Replaces the hand-built edit dialog. | New |
| Lightbox | @/components/ui/lightbox | Full-screen drawing viewer. | New |
| Menu | @/components/ui/menu | The account menu. | New |
| Switch | @/components/ui/switch | Review switches. | New |
| SegmentedControl | @/components/ui/segmented-control | Recessed track, raised segment. | New |
| NativeSelect | @/components/ui/native-select | A field with a chevron. | New |
| RadioGroup, RadioCard | @/components/ui/radio-group | Import matches. | New |
| Collapsible | @/components/ui/collapsible | Older release notes. | New |
| Card | @/components/ui/card | Resting shadow; hover edge. | New |
| Skeleton | @/components/ui/skeleton | Loading placeholders. | New |
| EmptyState | @/components/ui/empty-state | With the dog, or inline. | New |
| SearchField, SearchTrigger | @/components/ui/search-field | Field with a magnifier; palette trigger. | New |
| SectionHeading | @/components/ui/section-heading | Title, count, action, ink rule. | New |
| MetaLine | @/components/ui/meta-line | Facts joined with a middle dot. | New |
| ListRow | @/components/ui/list-row | Title, meta, trailing action. | New |
| KeyValueList | @/components/ui/key-value-list | Ruled facts. | New |
| NavTabs | @/components/ui/nav-tabs | Route tabs with a cyan underline. | New |
| Meter | @/components/ui/meter | Named seats. | New |
| LoadMore | @/components/ui/load-more | The next page of a list. | New |
| Avatar, Kbd | @/components/ui/avatar · kbd | Initials; keyboard keys. | New |
| DownloadButton | @/components/ui/download-button | With the downloading swap. | New |
| Toast | — | Inline alerts cover it today. | Planned |
| Tooltip | — | Not yet needed. | Planned |
| Tabs (in-page) | — | NavTabs covers route tabs. | Planned |