Storybook

@storybook.js.org

3489 Followers 142 Following

Develop, test, and document UI in isolation 🔗 storybook.js.org 🛠️ Maintained by Chromatic

How to review agent-built UI with Storybook webinar

how to review agent-build ui with storybook webinar

Orders.stories.ts file containing:

import { mocked } from 'storybook/test';
// 👇 Automatically mocked
import { getOrders } from '../server/orders';
import { OrdersList } from './OrdersList';

const meta = {
component: OrdersList,
} satisfies Meta<typeof OrdersList>;

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

// 👇 This story will render with a network error
export const OrdersFailed: Story = {
beforeEach: async () => {
mocked(getOrders).mockRejectedValueOnce(new Error('Network unreachable'));
},
};

The Page.stories.ts file containing:

import type { Meta, StoryObj } from '@storybook/tanstack-react';
import { Route } from './Page';

const meta = {
parameters: {
layout: 'fullscreen',
tanstack: {
router: {
route: Route, // 👈 Supply the Route here
// 👇 Rest of these properties are type-safe
params: { id: '42' },
query: { tab: 'details' },
},
},
},
} satisfies Meta<typeof Route>;

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

export const Default: Story = {};

Page.stories.ts file, containing:

import type { Meta, StoryObj } from '@storybook/tanstack-react';

import { Route } from './Page';

const meta = {
parameters: {
layout: 'fullscreen',
tanstack: {
router: {
route: Route, // 👈 Supply the Route here
// 👇 Rest of these properties are type-safe
params: { id: '42' },
query: { tab: 'details' },
},
},
},
} satisfies Meta<typeof Route>;

export default meta;

Share toolbar menu open. Heading, Publish a build to share. This Storybook will be uploaded and available to collaborators for feedback. Button, Publish and copy link. Heading, Who has access. Anyone with the link. Link, learn more.

Filter menu open, with items for New, Modified, and Related

how to use parallel agents to fix a11y issues

what's next for storybook and AI webinar invitation

// CSF 3
import type { Meta, StoryObj } from '@storybook/your-framework';
import Button from './Button';

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

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
args: { label: 'Button', primary: true }
};

// CSF Factories - Less boilerplate and no type assignments! 🎉
import preview from '../.storybook/preview';
import Button from './Button';

const meta = preview.meta({ component: Button });

export const Primary = meta.story({
args: { label: 'Button', primary: true }
});

Accessibility. 1249 violations, 263 components, 1226 total tests. Accessibility violations charted from Oct 8 2025 thru Jan 5, 2026. On Nov 13, 2025, they decline sharply from 2728 to the current 1249.

MCP is here. Video icon. Storybook AMA. Tuesday, Mar 31. 2:00 PM EDT / 20:00 CEST

GitHub Copilot agent in VS Code running component tests. Storybook is open next to it, and test results appear as it runs.

GitHub Copilot agent presenting live story previews after completing its work.

All numbers compare Baseline vs. MCP Docs. Quality: 12.8% improved code usage. Speed: 2.76x faster duration. Cost: 27% fewer tokens used.

Simulated AI agent chat running through a workflow with Storybook MCP, with Storybook updating next to it.

how to ship ui with storybook mcp webinar

Chromatic Webinar - How GitHub does Frontend Performance

Force AI agents to build accessible UI Chromatic webinar

agentic-design-design-systems-2026-brad-fost

Code snippet containing:

import preview from '../.storybook/preview';
import Button from './Button';

const meta = preview.meta({ component: Button });

export const Disabled = meta.story({
args: { disabled: true }
});

// 🆕 .test method: Attach tests to a story!
// The test function can run the same code as the play function
Disabled.test('should be disabled', async ({ canvas, userEvent, args }) => {
const button = await canvas.findByRole('button');
await userEvent.click(button);

await expect(button).toBeDisabled();
await expect(args.onClick).not.toHaveBeenCalled();
});

The open filter menu containing Clear filters, experimental (checked), Documentation, and Play

A menu showing Copy story link, Open in isolation mode, and Scan me with a QR code

Code snippet containing:

// CSF 3
import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import Button from './Button';

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

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
args: { label: 'Button', primary: true }
};

// CSF Factories - Less boilerplate and no type assignments! 🎉
import preview from '../.storybook/preview';
import Button from './Button';

const meta = preview.meta({ component: Button });

export const Primary = meta.story({
args: { label: 'Button', primary: true }
});

$Code snippet containing: // .storybook/preview.ts import type { Preview } from '@storybook/nextjs-vite'; import { sb } from 'storybook/test'; // 👇 Automatically spies on all exports from the `lib/session` local module sb.mock(import('../lib/session.ts'), { spy: true }); // 👇 Automatically spies on all exports from the `uuid` package in `node_modules` sb.mock(import('uuid'), { spy: true }); const preview: Preview = { // ... }; export default preview;$

Storybook 10 is 29% lighter than Storybook 9, which is 50% lighter than Storybook 8.

Webinar invitation – CSF Next: Less Boilerplate, faster story writing

kevin-leneway-webinar-rapid-frontend-prototyping-cursor-storybook

A yellow 8 with a large and complex dependency graph underneath, a right arrow extending from that labeled 50% lighter pointing to a pink 9 with a much smaller and simpler graph underneath, another right arrow extending from that labeled 15% lighter pointing to a blue 10 with a simpler dependency graph labeled ESM and a graph with a red line through it labeled No CJS

The file Dashboard.stories.ts containing the code:

import { mocked } from 'storybook/test';
import { trackEvent } from '../lib/analytics.ts';

export const MyStory = {
beforeEach: () => {
/*
* The `trackEvent` function is already a mock!
* The `mocked` utility is just for proper mock function types
*/
mocked(trackEvent).mockResolvedValue({ status: 'ok' });
},
play: async () => {
// ... interact with the component
await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed');
},
};

$The file .storybook/preview.ts containing the code: import { sb } from 'storybook/test'; // Replaces imports with `../lib/__mocks__/analytics.js`, if found sb.mock('../lib/analytics.ts'); // Works for external modules, too: `/__mocks__/uuid.js` sb.mock('uuid');$