Back to all FAQs

Why are the story names in Chromatic different than what I have in Storybook?

Chromatic follows Storybook’s naming best practice. The last level in the hierarchy is tracked as the component name.

// Button.stories.ts|tsx

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  title: "App/Components/Button",
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;


/*
 *👇 Render functions are a framework-specific feature to allow you control over how the component renders.
 * See https://storybook.js.org/docs/api/csf#custom-render-functions
 * to learn how to use render functions.
 */
export const Primary: Story = {
  render: () => <Button primary>Button</Button>,
};

export const Secondary: Story = {
  render: () => <Button secondary>Button</Button>,
};

In the example above, Button is the component name, while Primary and Secondary are the story names respectively. If your Storybook is organized in a different way, that will affect how your components and story names appear in both Chromatic and Storybook. There’s no way to configure name detection.

Folks often encounter naming issues when customizing their Storybook sidebar. In most cases, you can achieve your desired groupings while also adhering to naming best practices using these organizational tips.