Storybook
Published in

Storybook

Storybook Controls

Live edit UI components with no code

  • ⚡ Live edit components. Dynamically tweak component arguments.
  • 🐇 Instant setup. No setup cost. No maintenance as you modify APIs.
  • 🎛 Automatic generation. No extra glue code needed.
  • 🔑 No lock-in. No dependency on Storybook-specific APIs.

🤷‍♀️ Can’t I already do this?

✨ Stories get Controls automatically

interface ButtonProps { label?: string; }
const Button = ({ label='' }: ButtonProps) => (
<button>{label}</button>
);
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello button' };

📚 Perfect for Storybook Docs

🚚 Write stories once and take anywhere

import { text } from '@storybook/addon-knobs';export const Basic = () => (
<Button label={text('Label', 'hello')} />
);
export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };

⚡ 1 minute install

npx sb upgrade
npx sb init
import { Button } from '@storybook/react/demo';export default { title: 'Button/Controls', component: Button };export const Basic = (args) => <Button {...args} />;
Basic.args = { children: 'hello' };

Get involved

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Shilman

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️