![New Socket Web Extension, Take Socket with You](https://cdn.sanity.io/images/cgdhsj6q/production/7c7e90f37af51d175eaf8b2ae56124aec35c57c8-874x566.png?w=400&fit=max&auto=format)
Product
New Socket Web Extension, Take Socket with You
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
@storybook/components
Advanced tools
Package description
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.
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>
);"}
Ant Design (antd) is a design system and React UI library that provides a multitude of components, similar to @storybook/components, but with a focus on implementing the Ant Design system rather than integrating with Storybook.
Material-UI offers React components that implement Google's Material Design. It is similar to @storybook/components in providing a wide range of UI components but is designed for general application use rather than specifically for Storybook.
React-Bootstrap provides Bootstrap 4 components built with React. It offers a similar set of components to @storybook/components but is tailored to fit into the Bootstrap ecosystem.
Semantic UI React is the official React integration for Semantic UI. It is a collection of components that help create beautiful, responsive layouts using human-friendly HTML, similar to @storybook/components but with a focus on Semantic UI's themes and styles.
Changelog
Readme
Storybook Components is a React UI components collection used by the UI of Storybook and Addons.
All components use emotion
for styling.
FAQs
Core Storybook Components
The npm package @storybook/components receives a total of 4,430,636 weekly downloads. As such, @storybook/components popularity was classified as popular.
We found that @storybook/components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
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.
Product
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
Product
Socket introduces three new customizable default security policies for users to choose from: Low Noise (traditional SCA), Default, and Higher Noise.
Security News
MITRE has just minted its 400th CNA, as the NVD struggles to tame its backlog of CVEs awaiting analysis, which has increased by 30% since June.