@storybook/components

Buttons

Provides styled button components that can be used in stories.

{"import { Button } from '@storybook/components';

export const MyButton = () => <Button>Click me</Button>;"}

Typography

Includes components for displaying titles, subtitles, and text with consistent styling.

{"import { Title, Subtitle } from '@storybook/components';

export const MyTypography = () => (
  <>
    <Title>This is a title</Title>
    <Subtitle>This is a subtitle</Subtitle>
  </>
);"}

Form Controls

Contains various form elements like text inputs and textareas for use in stories.

{"import { Input, Textarea } from '@storybook/components';

export const MyForm = () => (
  <>
    <Input placeholder='Enter text' />
    <Textarea placeholder='Enter multiline text' />
  </>
);"}

Icons

Provides a set of icons that can be easily included in stories.

{"import { Icons } from '@storybook/components';

export const MyIcons = () => <Icons icon='check' />;"}

Syntax Highlighter

Allows for the display of syntax-highlighted code blocks within stories.

{"import { SyntaxHighlighter } from '@storybook/components';

export const MyCodeBlock = () => (
  <SyntaxHighlighter language='javascript'>
    {`const myFunction = () => console.log('Hello, world!');`}
  </SyntaxHighlighter>
);"}