---
sidebar: { hide: true }
title: Why are the story names in Chromatic different than what I have in Storybook?
section: "usage"
---

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

Chromatic follows Storybook's [naming best practice](https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy). The last level in the hierarchy is tracked as the component name.

```tsx title="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 = {
  title: "App/Components/Button",
  component: Button,
} satisfies Meta<typeof Button>;

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

/*
 *👇 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](https://storybook.js.org/blog/structuring-your-storybook/).