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
```