---
title: "Show every component state in a catalogue · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue
updated: 2026-10-20
licence: "All rights reserved"
---

# Show every component state in a catalogue

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)
- Rule: Give every shared component a catalogue entry for each state it can show, such as default, loading, empty, error and disabled.
- How: Use a catalogue tool, such as Storybook, Histoire or Ladle, or a pattern library page for server-rendered templates. Write one story per state with fixed sample data. The same stories feed the [visual tests](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/visual-regression) and the accessibility scan.
- Check: A script lists every component file without a stories file next to it. The list is empty. For each component with a `status` type, the stories file exports one story per `status` value.

Example:

```tsx
// OrderTable.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-vite';
import { OrderTable } from './OrderTable';

const meta: Meta<typeof OrderTable> = { component: OrderTable };
export default meta;

export const Loaded: StoryObj<typeof OrderTable> = { args: { state: { status: 'success', orders: sampleOrders } } };
export const Loading: StoryObj<typeof OrderTable> = { args: { state: { status: 'loading' } } };
export const Empty: StoryObj<typeof OrderTable> = { args: { state: { status: 'success', orders: [] } } };
export const Failed: StoryObj<typeof OrderTable> = { args: { state: { status: 'error', reference: 'ERR-7F3C' } } };
```

```python
import pathlib
import sys

components = pathlib.Path("src/ui").glob("*.tsx")
missing = [
    str(path) for path in components
    if not path.name.endswith(".stories.tsx")
    and not path.with_name(path.stem + ".stories.tsx").exists()
]
print("\n".join(missing) or "every component has stories")
sys.exit(1 if missing else 0)
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/styles-and-components/component-catalogue`.

- Previous: [Change components through variants](https://agentwranglers.se/playbook/app-ui/styles-and-components/component-variants)
- [Styles and components](https://agentwranglers.se/playbook/app-ui/styles-and-components)