What Is Fragments?

Fragments is the desktop app for directing frontend work in your running React app. Open a project, point at what you want to change, give your coding agent the instruction, and review the result beside the app.

It is Mac only for now. Local work is free, and paid plans are coming soon. Those plans are not available to buy yet.

Start with the app

Fragments brings the running app, its source, your design system and your agent into one place. You can work with an existing React app; adopting the Fragments component library is optional.

The app helps you inspect pages, direct Claude Code or Codex, check design drift, and compare agent changes. Review what changed before keeping or undoing a turn. Coverage and available actions depend on the project and the captured evidence.

See the desktop guide for setup and the Checks guide for reviewing design drift.

The packages

Public Fragments packages use the @usefragments/* scope:

• @usefragments/ui provides React components, styles and design tokens. Start with the package installation guide.
• @usefragments/font provides the Fragments font assets.

Install them from npm and import them where they help. You don't need either to open a project in the app.

FAQ

What is Fragments?

Fragments is a desktop app for working on the frontend of a running React app with your coding agent. It is Mac only for now.

Do I have to use Fragments UI?

No. You can open an existing React app with its own components and tokens. The @usefragments/ui package is available if you want to use it.

Is Fragments free?

Local work is free. Paid plans are coming soon; they are not available to buy yet.

Where should I start?

Start with the Fragments app. If you need the React library, use the package installation guide.