Keep your React library
Point it at the components you already ship. The manifest is yours to curate — no rewrite, no new library.
Govern the user interfaces your agents ship.
Fragments keeps agents on your design system while they write. Two commands start the loop in your editor; the gate makes the same contract required to merge.
Invite-only for now — one email when your spot opens.
A wall of 15 rendered interface primitives — buttons, fields, badges, toggles, tabs — in which four have drifted off the design contract: a raw hex background (FUI2005), a raw button element (FUI1004), an unknown badge variant (FUI6002), and off-scale padding (FUI2006). The Fragments check scans the wall, pins each finding to its component, and conform rewrites them one at a time — the counter ticks down to 15 components with zero drift, and the kit settles governed.
governed · 15 components on contract
Works with the stackyou already run
Bring the design system you already have.
- React
- Next.js
- Vite
- TanStack
- Storybook
- TypeScript
- Tailwind
- GitHub
- GitHub Actions
- Claude Code
- Codex
- Cursor
- Copilot
- MCP
You told your agent to build UI.It didn’t build yours.
It ignored your design system — again. One rogue hex at a time, your brand’s identity slips away.
Fragments closes the loop. Your components become the contract, every agent session opens with it, every write is checked as it lands, and the same contract is required to merge.
Writesettings/NotificationsForm.tsx
PostToolUse · fragments hook · 47 ms
NotificationsForm.tsx:9FUI1004Bespoke <button> has a library equivalent. Swap to <Button> from @acme/ui.
NotificationsForm.tsx:10FUI2005Raw color #7c3aed on inline background. Use a token.
2 findings introduced · returned to the agent
The loop first. The gate second.Local while the agent writes. Required when the branch merges.
The loop runs in the editor
The agent reads your vocabulary before it writes and gets the repair the moment it drifts. Nothing leaves your machine.
The gate required to merge
Pin one contract id on the branch. The check passes, blocks or holds, and every verdict leaves a receipt.
Surfaces built for teams and their agents
From the session to the merge queue, the same manifest answers everywhere your interface code gets written.
fragments check --ciThe gate on every pull request
fragments/contract-compliance is the required check. One verdict per head against one FCID, with a receipt your reviewers can open.
fragments hook installThe loop in the editor
Claude Code, Cursor and Codex hooks read the card at session start, check each write, and refuse to stop while a finding is open.
fragments mcp --stdioLocal MCP search
search("three stats in a row") answers with the pattern and its exemplar from your own repository.
/evaluations/evr_…Receipts
Every verdict persists as evr_… with the head, the FCID and the findings it introduced.
usefragments.com/errorsVersioned finding codes
Every finding carries an FUI code with a public explain page.
Fragments UI · open source
A component library of our own
“The most explicitly AI-native design system we've seen … the most forward-thinking option available.”
Untitled UI, on AI-native design systems
Fragments UI is how teams adopt. Fragments Cloud is how teams enforce.
Frequently asked questions
No. The manifest names your own Fragments and tokens — any React library. Fragments UI is an optional MIT starting point, not a prerequisite.
Your spot is one email away
Invites go out in small batches. Leave your work email and you're in the queue.
No newsletter. No spam.