Skip to main content

Set up your existing app

Add governance while keeping the components, styles and providers your app already uses.

These examples use shadcn CLI 4, Tailwind 4 and Fragments UI 3 in React 19 and Vite 8 apps. Start with your app rendering correctly; use the installation links below if needed.

Activate governance

Run this from the application root:

npx @usefragments/cli@latest init --install --metadata-only

This installs the project CLI and configures governance, hooks and local MCP. It preserves your runtime app setup. --govern is an alias for --metadata-only. If setup reports action required because no local components are approved, review and select them below, then finish activation in the final step.

shadcn/ui

Follow the official Vite setup first. The current default uses Base UI, local components under src/components/ui and tokens in src/index.css.

Fragments selects the tailwind@2 preset. Detection does not approve local components. After reviewing your Button implementation, add this selection inside the existing govern object in fragments.config.ts, keeping the other generated settings:

canonicalSources: [
  { kind: "directory", path: "src/components/ui", include: ["Button"] },
],

Keep imports pointed at the actual component file: import { Button } from "@/components/ui/button";. In the checked example, replacing a raw button with this Button cleared FUI1007.

Tailwind

Follow the official Vite setup first. Fragments selects tailwind@2 and reads your stylesheet tokens. Tailwind supplies utilities; choose the local components you want agents to reuse.

This example uses an existing src/components/Button/Button.tsx. After reviewing it, add this selection to the existing govern object in fragments.config.ts:

canonicalSources: [
  { kind: "directory", path: "src/components", include: ["Button"] },
],

Define your theme tokens in the stylesheet. With --color-brand declared in @theme, the checked example replaced text-[#123456] with text-brand and cleared FUI2007.

Fragments UI

Follow the package installation guide to install @usefragments/ui, import its stylesheet and set up providers. Then run the shared governance command above.

Fragments selects fragments@2 and uses the package’s component and token metadata. The checked composition uses the real Stack, Text and Button exports:

import { Button, Stack, Text } from "@usefragments/ui";

export function ExamplePage() {
  return (
    <Stack>
      <Text>Ready to continue</Text>
      <Button>Continue</Button>
    </Stack>
  );
}

The raw-button version produced FUI1007. This composition passed the CLI and local MCP checks. A wrapper that only duplicates Button can still receive a shadow-component finding.

Check a change and start your agent

After selecting local components, refresh the manifest and rerun setup to finish configuring your agent integrations:

npx @usefragments/cli@latest discover --write
npx @usefragments/cli@latest init --install --metadata-only

Run a saved-file check, follow its findings, then check again. Component findings are advisory by default; the command’s exit status follows your configured policy.

npx @usefragments/cli check

Start a fresh agent session and approve its project integration when prompted. Ask it to use your selected Button, make a UI change and inspect the automatic feedback. A configured integration becomes live-verified only after real host delivery; see the agent guide and local MCP tools.

Next steps