The design system every product owns.
Start with shared components, then make them yours. Shelf puts the source in every product and tracks every copy, so teams and agents move fast without leaving the system behind.
- StyleX
- Base UI
- React
- Next
- TanStack Start
Consistent by default
Every product installs the same source on the same tokens. Files nobody edited stay identical and update as-is.
Change without waiting
Most changes are small: spacing, a color, a variant. A product edits the style in its copy, not an override that breaks on the next upgrade.
Every change is visible
shelf status shows what a product changed. shelf usage shows it across all your products.
Edited copies still update
shelf update merges upstream fixes into files you changed. Only overlapping edits conflict.
Why Shelf
Consistent products without a bottleneck
A shared package keeps products consistent, but even a spacing or color change becomes an override that breaks on upgrade, or a request that waits on the system team. Copied files make changes easy, but nobody knows what changed, and fixes stop reaching anyone. Shelf keeps every product on one registry and makes each difference deliberate, visible, and still updatable.
Registry
One registry for every product
The system team publishes components, blocks, and foundations as plain files on any static host, public or behind sign-in. Products add from it.
Browse every item with its source, revisions, previews, and the products that use it.
Workflow
Add it. Change it. Check it.
Four steps, each one command. Everything else is normal code.
shelf add button2 filesAdd
shelf add copies the source, the items it depends on, and installs its packages.
- button.tsxYoursSave changes
Change
Adjust spacing, color, or markup where it is defined. It is a normal file in your repository.
- FileStatusbutton.tsxModifieddialog.tsxUnchanged
Review
shelf status and shelf diff show what you changed and what is new upstream.
- Config
- Provenance
- Dependencies
- Imports
Check
shelf check confirms the install is intact. A failure names the file and the fix.
Agents
Give agents the source the file that actually renders
An agent edits the file that renders instead of wrapping a package it can't change. shelf search finds what exists, and shelf check says what to fix.
A real session: find, add, change, check.
Provenance
Diverge without drifting
Products change their copy and the registry keeps moving. Shelf knows the version both started from, so an update is a three-way merge, not a rewrite.
Untouched files update. Edited files merge. Overlapping edits get standard conflict markers.
Who it's for
Shared foundations owned implementations
The system team owns tokens, accessibility, and defaults. Product teams own what they ship. Both work from the same registry.
- System teams
Own the foundations, not every product's UI.
Publish to one registry and see which products use each item, and which changed it.
- Product engineers
Edit the style, not an override.
Adjust spacing, color, or a variant in the component itself, and keep taking updates.
- Coding agents
Work from the source, not the docs.
Commands with stable output and failures that say what to run.
- DesignersIn progress
Design with what ships.
Native Figma components compiled from the same React source.
Themes
Your brand from one set of tokens
Components read semantic tokens for color, radius, and type. Pick a preset, then edit one file to match your brand, in light and dark.
FAQ
Questions teams ask first
Drift, updates, hosting, and what happens if you leave.