Review changes where
your components live.

Install and register

In your existing Storybook project, install the CLI and addon. The quick start includes npm, pnpm, Yarn, and Bun commands.

npm install --save-dev @juxtapose/cli @juxtapose/storybook
npx -p @juxtapose/cli jux browser install

Add '@juxtapose/storybook' to your existing addons array in .storybook/main.ts or main.js, then restart Storybook. Keep your current framework and other addons.

Establish the baseline, then compare edits

npx storybook build --quiet --disable-telemetry --loglevel error
npx -p @juxtapose/cli jux init

init writes configuration, captures, and approves the initial baselines. Start from a state you intend to keep, review the captures, and commit the generated manifest and structure metadata.

After editing a component, rebuild and compare:

npx storybook build --quiet --disable-telemetry --loglevel error
npx -p @juxtapose/cli jux run --html

The addon provides the review panel, changed-story sidebar markers, and live recapture on edits. Storybook's Run tests integration requires 8.5 or later. The CLI also writes a standalone HTML report when --html is set.

Capture a story at another viewport

For a CSF story, put capture settings in parameters.juxtapose. This example adds a mobile capture alongside the default; each has its own baseline.

export const Default = {
  args: { title: 'Account settings' },
  parameters: {
    juxtapose: {
      variants: {
        mobile: { viewport: { width: 375, height: 812 } },
        dark: { colorScheme: 'dark' },
      },
    },
  },
};

The component still needs to implement its dark theme. Emulating a color scheme does not add one.

Keep a review focused

npx -p @juxtapose/cli jux list
npx -p @juxtapose/cli jux run 'card--*' --dry-run
npx -p @juxtapose/cli jux run 'card--*'

Replace the example IDs with your project's IDs and quote globs so the shell does not expand them. Review an intended change before jux approve --story <id>. Unstable stories need investigation, not blanket approval.

Next: add CI checks, configure live capture, or set readiness, masks, and renderer options.