Socket
Socket
Sign inDemoInstall

@storybook/components

Package Overview
Dependencies
0
Maintainers
9
Versions
1657
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/components

Core Storybook Components


Version published
Maintainers
9
Weekly downloads
7,752,056
decreased by-0.69%
Install size
9.07 MB

Weekly downloads

Package description

What is @storybook/components?

The @storybook/components package provides a set of reusable components specifically designed for building UIs in Storybook. These components are used within Storybook's own UI but are also available for developers to use in their own stories. They include basic UI elements such as buttons, inputs, icons, typography, and more complex components like syntax-highlighted code blocks and controls for live-editing component props.

What are @storybook/components's main functionalities?

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>
);"}

Other packages similar to @storybook/components

Readme

Source

Storybook Components

Storybook Components is a React UI components collection used by the UI of Storybook and Addons.

All components use emotion for styling.

Keywords

FAQs

Last updated on 11 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc