{"library":"storybook","title":"Storybook","type":"library","description":"Storybook is a widely adopted open-source tool for developing, documenting, and testing UI components in isolation. It enables developers to create \"stories\" that represent different states of a component, facilitating visual testing, collaboration, and automated testing. The current stable version is 10.3.5, with major releases roughly once a year and minor releases every eight weeks, preceded by alpha/beta/rc pre-releases. Key differentiators include its extensive addon ecosystem, cross-framework support (React, Vue, Angular, etc.), and emphasis on Component Story Format (CSF) for portable story definitions. It's an essential tool for building and maintaining robust design systems, providing a dedicated environment to explore and showcase component variations.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install storybook"],"cli":{"name":"storybook","version":null}},"imports":["import type { Meta, StoryObj } from '@storybook/react';","import type { Meta, StoryObj } from '@storybook/react';","import type { Preview } from '@storybook/react';","import type { StorybookConfig } from '@storybook/react-vite';","import { action } from '@storybook/addon-actions';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://storybook.js.org","github":"https://github.com/storybookjs/storybook","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\ninterface ButtonProps {\n  /**\n   * Is this the principal call to action on the page?\n   */\n  primary?: boolean;\n  /**\n   * What background color to use\n   */\n  backgroundColor?: string;\n  /**\n   * How large should the button be?\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n}\n\nconst Button: React.FC<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  return (\n    <button\n      type=\"button\"\n      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\n// More on default exports: https://storybook.js.org/docs/react/writing-stories/introduction#default-export\nconst meta: Meta<typeof Button> = {\n  title: 'Example/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    backgroundColor: { control: 'color' },\n  },\n  args: {\n    onClick: () => console.log('Button clicked'), // Example action\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n\nexport const Large: Story = {\n  args: {\n    size: 'large',\n    label: 'Button',\n  },\n};\n\nexport const Small: Story = {\n  args: {\n    size: 'small',\n    label: 'Button',\n  },\n};","lang":"typescript","description":"This quickstart demonstrates how to define a React component and its stories using TypeScript and Component Story Format (CSF) 3. It showcases basic props, argTypes for control customization, and multiple story variants.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}