0
# Addon Management
1

2
Add, remove, and manage Storybook addons with automatic configuration and dependency handling. The addon management system handles package installation, configuration updates, and postinstall scripts to seamlessly integrate addons into your Storybook setup.
3

4
## Capabilities
5

6
### Add Addon Command
7

8
Installs and configures a Storybook addon in your project.
9

10
```bash { .api }
11
storybook add <addon> [options]
12

13
Parameters:
14
  addon                                Name of the addon package to install
15

16
Options:
17
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager for installing dependencies
18
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
19
  --skip-install                       Skip installing deps
20
  -s, --skip-postinstall               Skip package specific postinstall config modifications  
21
  -y, --yes                           Skip prompting the user
22
  --skip-doctor                       Skip doctor check
23
```
24

25
**Usage Examples:**
26

27
```bash
28
# Add a popular addon
29
npx storybook add @storybook/addon-docs
30

31
# Add addon with version specifier
32
npx storybook add @storybook/addon-controls@^7.0.0
33

34
# Add addon and skip dependency installation
35
npx storybook add @storybook/addon-actions --skip-install
36

37
# Add addon with specific package manager
38
npx storybook add @storybook/addon-viewport --package-manager yarn1
39

40
# Add addon in custom config directory
41
npx storybook add @storybook/addon-knobs --config-dir .custom-storybook
42

43
# Add addon without prompts
44
npx storybook add @storybook/addon-backgrounds --yes
45

46
# Add addon and skip postinstall configuration
47
npx storybook add @storybook/addon-links --skip-postinstall
48
```
49

50
### Remove Addon Command
51

52
Uninstalls and removes a Storybook addon from your project.
53

54
```bash { .api }
55
storybook remove <addon> [options]
56

57
Parameters:
58
  addon                                Name of the addon package to remove
59

60
Options:
61
  --package-manager <npm|pnpm|yarn1|yarn2|bun>  Force package manager for installing dependencies
62
  -c, --config-dir <dir-name>          Directory where to load Storybook configurations from
63
  -s, --skip-install                   Skip installing deps
64
```
65

66
**Usage Examples:**
67

68
```bash
69
# Remove an addon
70
npx storybook remove @storybook/addon-docs
71

72
# Remove addon with specific package manager
73
npx storybook remove @storybook/addon-controls --package-manager pnpm
74

75
# Remove addon and skip dependency uninstallation
76
npx storybook remove @storybook/addon-actions --skip-install
77

78
# Remove addon from custom config directory
79
npx storybook remove @storybook/addon-viewport --config-dir .custom-storybook
80
```
81

82
### Addon Version Parsing
83

84
The system can parse addon names with version specifiers:
85

86
```bash
87
# Different version specification formats
88
npx storybook add @storybook/addon-docs@7.0.1      # Exact version
89
npx storybook add @storybook/addon-docs@^7.0.0     # Compatible version
90
npx storybook add @storybook/addon-docs@latest     # Latest version
91
npx storybook add addon-name@beta                  # Beta version
92
```
93

94
### Configuration Integration
95

96
When adding addons, Storybook automatically:
97

98
1. **Updates main.js/ts** - Adds addon to the addons array
99
2. **Installs dependencies** - Adds addon package to package.json
100
3. **Runs postinstall scripts** - Executes addon-specific setup if available
101
4. **Updates configuration** - Modifies Storybook config as needed
102

103
### Popular Addons
104

105
Common addons you can install:
106

107
```bash
108
# Essential addons
109
npx storybook add @storybook/addon-essentials    # Bundle of common addons
110
npx storybook add @storybook/addon-docs          # Documentation
111
npx storybook add @storybook/addon-controls      # Interactive controls
112
npx storybook add @storybook/addon-actions       # Action logging
113

114
# UI addons  
115
npx storybook add @storybook/addon-viewport      # Viewport simulation
116
npx storybook add @storybook/addon-backgrounds   # Background colors
117
npx storybook add @storybook/addon-toolbars      # Custom toolbar items
118

119
# Testing addons
120
npx storybook add @storybook/addon-a11y          # Accessibility testing
121
npx storybook add @storybook/addon-jest          # Jest test results
122
npx storybook add chromatic                      # Visual testing
123

124
# Design system addons
125
npx storybook add @storybook/addon-design-tokens # Design tokens
126
npx storybook add @storybook/addon-figma         # Figma integration
127
```
128

129
### Postinstall System
130

131
Addons can define postinstall scripts for automatic configuration:
132

133
- **Configuration updates** - Modify main.js, preview.js
134
- **File generation** - Create example stories or configuration files  
135
- **Dependency management** - Install peer dependencies
136
- **Framework integration** - Set up framework-specific configurations
137

138
### Package Manager Support
139

140
Full integration with all major package managers:
141

142
- **npm** - Standard npm installation and management
143
- **yarn1** - Yarn Classic support
144
- **yarn2** - Yarn Berry with PnP support
145
- **pnpm** - pnpm with workspace support
146
- **bun** - Bun package manager support
147

148
### Programmatic Usage
149

150
```typescript { .api }
151
import { add } from "@storybook/cli";
152

153
/**
154
 * Add an addon programmatically
155
 * @param addon - The addon name/package
156
 * @param options - Configuration options
157
 */
158
function add(addon: string, options: PostinstallOptions): Promise<void>;
159

160
interface PostinstallOptions {
161
  packageManager: PackageManagerName;
162
  configDir: string;
163
  yes?: boolean;
164
  skipInstall?: boolean;
165
}
166

167
/**
168
 * Extract addon name and version specifier from input string
169
 * @param addon - The input string (e.g., "@storybook/addon-docs@7.0.1")
170
 * @returns Tuple of [addonName, versionSpecifier]
171
 */
172
function getVersionSpecifier(addon: string): readonly [string, string | undefined];
173
```
174

175
**Programmatic Examples:**
176

177
```typescript
178
import { add, getVersionSpecifier } from "@storybook/cli";
179

180
// Add addon programmatically
181
await add("@storybook/addon-docs", {
182
  packageManager: "npm",
183
  configDir: ".storybook",
184
  yes: true
185
});
186

187
// Parse addon name and version
188
const [name, version] = getVersionSpecifier("@storybook/addon-docs@7.0.1");
189
// name: "@storybook/addon-docs", version: "7.0.1"
190
```