Skip to main content
Fragments scans this page as it loads. The early-access form ships with a raw color, raw typography, and a raw button element; each finding is named in plain words, conforms to the contract, and the page passes with zero findings.

Govern the user interfaces your agents ship.

Invite-only for now — one email when your spot opens.

The Overview page of an example workspace: no open findings, no pull requests needing attention.

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. Installed hooks bring it into agent sessions and check supported edits. Add the contract check to CI and require it before merging.

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.

Keep your React library

Point it at the components you already ship. The manifest is yours to curate — no rewrite, no new library.

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.

Put it to work

Five proofs, one contract.

From the session to the merge queue, the same manifest answers everywhere your interface code gets written.

  • fragments check --ci

    The 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 install

    The loop in the editor

    Claude Code, Cursor and Codex hooks supply the vocabulary and check supported edits. Setup starts with advisory feedback; Claude Code also supports explicit blocking policies.

  • fragments mcp --stdio

    Local 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/errors

    Versioned finding codes

    Every finding carries an FUI code with a public explain page.

Works with the stackyou already run

See how it reads your repo
  • React
  • Next.js
  • Vite
  • TypeScript
  • Material UI
  • Radix
  • Chakra
  • Mantine
  • CSS
  • SCSS
  • CSS Modules
  • Tailwind
  • styled-components
  • Emotion
  • vanilla-extract
  • Storybook
  • GitHub Actions
  • Claude Code
  • Codex
  • Cursor
  • Copilot
  • MCP
Fragments UI · MIT · github.com/fragments-sdk/uinpx @usefragments/cli add button

Bring your own library. Or borrow ours.

Fragments works with whatever you ship today. Starting fresh? Fragments UI is open source, built on Base UI and styled by tokens, and every primitive carries the card an agent reads before it writes a line.

size
one setting, every control

Open findings

128

−34% since the contract activated

Merges held

3

2 waiting on a fix

Merge gate

How findings meet a pull request.

Block on findingsHold the merge until every bypass is fixed.
Comment inlineReview comments on the offending lines.
Require a receiptAgents prove compliance before they merge.

Activate a contract

What the gate enforces, and where.

Scope

Reviewers

Who approves a contract change.

Jules Ortegajules@acme.co
Priya Nairpriya@acme.co
Tom Webertom@acme.co

Dismiss finding

FUI1004 · Toolbar.tsx:41 renders a raw button.

Reason

acme/web #482

Toolbar filters · 2 checks

Fragments2h

FUI1004 · Toolbar.tsx:41 renders a raw <button>. The contract names Button.

Jules Ortega1h

Swapped it for Button and moved the icon to the leading slot.

Fragments58m

Check passed. The merge is open.

Findings

acme/web · main

finding
severity
FUI1004Toolbar.tsx:41
high
FUI2005Sidebar.module.scss:12
medium
FUI1001Modal.tsx:88
high
FUI3001IconButton.tsx:30
low
1 of 4 selected

Agent access

Every agent reads the same contract.

Claude Coderead the contract 4 minutes ago
Cursorread the contract yesterday
Codexproposed a change last week

acme/mobile-web

First scan · 1,204 files

Reading src/components
Files read62%
x
Cover of the Untitled UI piece: a tilted wall of library and tool logos — the Fragments star among GitHub, React, OpenAI, Tailwind and MUI.

“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.

Browse componentsRead the piece

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.

Give your agents a design system they can't ignore.

Invites go out in small batches. Leave your work email and you're in the queue.

No newsletter. No spam.