0
# Storybook Components
1
2
Storybook Components is a comprehensive UI component library that provides all the building blocks for creating Storybook's interface. While officially deprecated as a standalone package, it serves as a compatibility shim that re-exports all functionality from Storybook's internal component system, ensuring backward compatibility during architectural transitions.
3
4
## Package Information
5
6
- **Package Name**: @storybook/components
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @storybook/components`
10
- **Status**: Deprecated (compatibility shim)
11
- **Peer Dependency**: `storybook ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0`
12
13
## Core Imports
14
15
```typescript
16
import { Button, Icons, Modal, Tabs } from "@storybook/components";
17
```
18
19
For CommonJS:
20
21
```javascript
22
const { Button, Icons, Modal, Tabs } = require("@storybook/components");
23
```
24
25
Import all components:
26
27
```typescript
28
import * as StorybookComponents from "@storybook/components";
29
```
30
31
## Basic Usage
32
33
```typescript
34
import { Button, H1, P, Badge, Modal } from "@storybook/components";
35
36
// Basic button usage
37
<Button variant="solid" size="medium" onClick={() => console.log('clicked')}>
38
Click me
39
</Button>
40
41
// Typography components
42
<H1>Main Title</H1>
43
<P>This is a paragraph with proper Storybook styling.</P>
44
45
// UI components
46
<Badge status="positive">New Feature</Badge>
47
48
// Complex components
49
<Modal open={true} onOpenChange={() => {}} width={400}>
50
<P>Modal content here</P>
51
</Modal>
52
```
53
54
## Architecture
55
56
Storybook Components is built around several key areas:
57
58
- **Typography System**: Complete set of styled HTML elements (H1-H6, P, Code, etc.) with consistent theming
59
- **Form Controls**: Button, IconButton, and Form components with multiple variants and states
60
- **UI Components**: Modal, Tabs, ActionBar, ScrollArea, Badge, ErrorFormatter, Loader, and other interface building blocks
61
- **Graphics System**: Icon components, logos, and visual elements (with deprecation notices)
62
- **Layout Components**: Bar, Separator, and spacing utilities for component arrangement
63
- **Tooltip System**: Comprehensive tooltip components with various display options
64
- **Utility Components**: ClipboardCode, SyntaxHighlighter, and other specialized utilities
65
66
## Capabilities
67
68
### Typography Components
69
70
Complete set of styled HTML elements with consistent theming and typography. Perfect for building documentation interfaces and content display.
71
72
```typescript { .api }
73
// HTML Elements
74
const A: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
75
const H1: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
76
const H2: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
77
const H3: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
78
const P: React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>>;
79
const Code: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
80
81
// Typography utilities
82
const components: Record<string, React.ComponentType>;
83
const resetComponents: Record<string, React.ComponentType>;
84
```
85
86
[Typography Components](./typography.md)
87
88
### Form Controls
89
90
Button components and form utilities with multiple variants, sizes, and animation options.
91
92
```typescript { .api }
93
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
94
variant?: 'outline' | 'solid' | 'ghost';
95
size?: 'small' | 'medium';
96
padding?: 'small' | 'medium' | 'none';
97
animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
98
disabled?: boolean;
99
active?: boolean;
100
asChild?: boolean;
101
}
102
103
const Button: React.ForwardRefExoticComponent<ButtonProps>;
104
const IconButton: React.ComponentType;
105
const Form: Record<string, React.ComponentType>;
106
```
107
108
[Form Controls](./forms.md)
109
110
### UI Components
111
112
Core interface components including modals, tabs, action bars, and layout utilities.
113
114
```typescript { .api }
115
const Modal: React.ComponentType<ModalProps>;
116
const Badge: React.ComponentType<BadgeProps>;
117
const Tabs: React.ComponentType;
118
const ActionBar: React.ComponentType;
119
const ScrollArea: React.ComponentType;
120
const Placeholder: React.ComponentType;
121
const Spaced: React.ComponentType;
122
const Zoom: React.ComponentType;
123
const ErrorFormatter: React.ComponentType;
124
const Loader: React.ComponentType;
125
const ProgressSpinner: React.ComponentType;
126
const ClipboardCode: React.ComponentType;
127
```
128
129
[UI Components](./ui-components.md)
130
131
### Tooltip System
132
133
Comprehensive tooltip components with link lists, messages, and notes for enhanced user interactions.
134
135
```typescript { .api }
136
const WithTooltip: React.ComponentType;
137
const WithTooltipPure: React.ComponentType;
138
const TooltipMessage: React.ComponentType;
139
const TooltipNote: React.ComponentType;
140
const TooltipLinkList: React.ComponentType<{
141
links: TooltipLinkListLink[];
142
}>;
143
144
interface TooltipLinkListLink {
145
id: string;
146
title: string;
147
href?: string;
148
onClick?: () => void;
149
}
150
```
151
152
[Tooltip System](./tooltips.md)
153
154
### Graphics and Icons
155
156
Icon components, brand elements, and visual utilities. Note that Icons component is deprecated in favor of @storybook/icons.
157
158
```typescript { .api }
159
interface IconsProps {
160
icon: IconType;
161
useSymbol?: boolean;
162
onClick?: () => void;
163
}
164
165
const Icons: React.ComponentType<IconsProps>; // Deprecated
166
const StorybookLogo: React.ComponentType;
167
const StorybookIcon: React.ComponentType;
168
const Symbols: React.ComponentType;
169
```
170
171
[Graphics and Icons](./graphics.md)
172
173
### Syntax Highlighting
174
175
Code highlighting components with extensive language support and customization options.
176
177
```typescript { .api }
178
interface SyntaxHighlighterProps {
179
language: SupportedLanguage;
180
children: string;
181
showLineNumbers?: boolean;
182
theme?: string;
183
}
184
185
const SyntaxHighlighter: React.ComponentType<SyntaxHighlighterProps>;
186
function createCopyToClipboardFunction(): (text: string) => void;
187
188
type SupportedLanguage = "javascript" | "typescript" | "jsx" | "tsx" | "css" | "html" | "json" | "markdown" | string;
189
```
190
191
[Syntax Highlighting](./syntax-highlighting.md)
192
193
### Layout and Navigation
194
195
Bar components, separators, tabs, and navigation utilities for building complex interfaces.
196
197
```typescript { .api }
198
const Bar: React.ComponentType;
199
const FlexBar: React.ComponentType;
200
const Separator: React.ComponentType;
201
const TabBar: React.ComponentType;
202
const TabWrapper: React.ComponentType;
203
const TabButton: React.ComponentType;
204
const AddonPanel: React.ComponentType;
205
206
function interleaveSeparators<T>(items: T[]): (T | React.ReactElement)[];
207
```
208
209
[Layout and Navigation](./layout.md)
210
211
### Utilities
212
213
Navigation and helper utilities for Storybook-specific functionality.
214
215
```typescript { .api }
216
/**
217
* Utility to generate story URLs for navigation
218
*/
219
function getStoryHref(storyId: string, options?: {
220
viewMode?: 'story' | 'docs';
221
[key: string]: any;
222
}): string;
223
```
224
225
## Migration Notes
226
227
This package is deprecated and serves as a compatibility shim. All functionality is re-exported from `storybook/internal/components`. Users should eventually migrate to importing from the internal module structure:
228
229
```typescript
230
// Current (deprecated but supported)
231
import { Button } from "@storybook/components";
232
233
// Future (recommended)
234
import { Button } from "storybook/internal/components";
235
```
236
237
Many individual components include deprecation warnings with migration guidance. The @storybook/icons package should be used instead of the deprecated Icons component.
238
239
## Common Types
240
241
```typescript { .api }
242
interface ActionItem {
243
id: string;
244
title: string;
245
onClick: () => void;
246
disabled?: boolean;
247
}
248
249
type IconType = string; // Specific icon names from the icon library
250
251
interface SyntaxHighlighterFormatTypes {
252
[key: string]: any;
253
}
254
255
interface SyntaxHighlighterRendererProps {
256
rows: any[];
257
stylesheet: any;
258
useInlineStyles: boolean;
259
}
260
```