Get started with Fragments

Choose Open folder for an existing React app, then start its development server. Fragments asks before running the project’s code. Use the folder containing the runnable app.

Or choose Create project, give it a folder name, choose a parent folder and select Fragments UI, shadcn/ui, Base UI or Untitled UI’s free components. The starter uses Vite, React and TypeScript. Setup needs internet access to install packages; it initializes Git, checks and builds the project before opening it.

Projects open in Page, where you can use the running app. Switch to All pages to review the pages Fragments found together. Select an element to inspect its source when React’s development information is available.

A route may need a parameter example or your app’s own sign-in before it can be pictured. Follow the reason shown for a missing picture. Hidden routes and states are not guaranteed to appear in All pages.

Choose your installed Claude Code or Codex agent and describe the change in Chat. A selected element adds context to the request. The agent works in your project with its own instructions and tools, plus Fragments’ page and design-system context.

Check the permission mode in Settings. Progress appears as the agent works, and saved edits appear through the development server. Stopping a turn keeps the work already written; review its receipt before deciding what to keep.

Open Changes to inspect the changed files and compare before and after where compatible pictures are available. Fragments labels missing or incompatible comparisons so you can see what still needs review.

Use Undo for recorded project-file changes. It checks that a file still matches the saved change and preserves conflicting later saves. File Undo does not reinstall dependencies, remove commits or reverse external actions. Files outside the recorded scope stay excluded; read any exclusions in the receipt.

Open Checks in the right panel and choose Check now. Read each finding’s message and location, then inspect Where it looks for coverage. Review the running interface too: a clean source check does not establish every rendered state. The Checks guide explains the findings, approved tokens and project policy.