Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
- Tweets 7,023
- Following 394
- Followers 25,679
- Likes 6,645
ALT 10.4. Anthropic, OpenAI, Gemini, and TanStack logos
ALT Component testing- a practical guide for frontend developers from Storybook
ALT Why agents get frontend context wrong. August 27, 2026 (Thursday). 12PM EDT. 18:00 CET. Live
ALT Sneak peek of Chromatic API for Agents webinar
ALT How to review agent-built UI with Storybook webinar
ALT how to review agent-build ui with storybook webinar
ALT TanStack + Storybook
ALT 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')); }, };
ALT 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 = {};
