Skip to content

Docs: Rework Get Started page CTA positioning and copy #33244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kylegach merged 7 commits into from
Dec 1, 2025
Merged

Docs: Rework Get Started page CTA positioning and copy #33244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e616c83
Rework Get Started page CTA positioning and copy
Sidnioulz Nov 10, 2025
af9b028
Make create command codeblock a 'new users' variant
Sidnioulz Nov 14, 2025
b0f2dd0
Docs: Rewrite frameworks to focus on new users
Sidnioulz Nov 24, 2025
a9ea6de
Update docs/get-started/frameworks/react-native-web-vite.mdx
Sidnioulz Nov 25, 2025
6a2a2d9
Docs: Remove FAQ item relating to Storybook 6
Sidnioulz Nov 25, 2025
97cd440
Docs: Make version compat more visible in framework docs
Sidnioulz Nov 26, 2025
c1794fc
Docs: Change requirements headings
Sidnioulz Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 93 additions & 122 deletions docs/get-started/frameworks/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,102 +6,31 @@ sidebar:
title: Angular
---

Storybook for Angular is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It includes:
Storybook for Angular is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It uses Angular builders and integrates with [Compodoc](https://compodoc.app/) to provide automatic documentation generation.

* 🧱 Uses Angular builders
* 🎛️ Compodoc integration
* 💫 and more!
## Install

## Requirements
To install Storybook in an existing Angular project, run this command in your project's root directory:

* Angular ≥ 18.0 \< 21.0
* Webpack ≥ 5.0
<CodeSnippets path="create-command.md" variant="new-users" />

## Getting started
You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).

### In a project without Storybook
### Requirements

Follow the prompts after running this command in your Angular project's root directory:

{/* prettier-ignore-start */}

<CodeSnippets path="create-command.md" />

{/* prettier-ignore-end */}

[More on getting started with Storybook.](../install.mdx)

### In a project with Storybook

This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-upgrade.md" />

{/* prettier-ignore-end */}

#### Automatic migration

When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/angular`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

#### Manual migration

First, install the framework:

{/* prettier-ignore-start */}

<CodeSnippets path="angular-install.md" />

{/* prettier-ignore-end */}

Then, update your `.storybook/main.js|ts` to change the framework property:

{/* prettier-ignore-start */}

<CodeSnippets path="angular-add-framework.md" />

{/* prettier-ignore-end */}

Finally, update your `angular.json` to include the Storybook builder:

```jsonc title="angular.json"
{
"projects": {
"your-project": {
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
// The path to the storybook config directory
"configDir": ".storybook",
// The build target of your project
"browserTarget": "your-project:build",
// The port you want to start Storybook on
"port": 6006
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/schema.json
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "your-project:build",
"outputDir": "dist/storybook/your-project"
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/build-storybook/schema.json
}
}
}
}
}
}
```
<GetStartedVersions versions={[{
name: 'Angular',
range: '≥ 18.0 < 21.0',
icon: '/images/logos/renderers/logo-angular.svg'
}, {
name: 'Webpack',
range: '5',
icon: '/images/logos/builders/webpack.svg'
}]} />
Comment on lines +21 to +29
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

current latest version of Angular 2024 2025

💡 Result:

As of December 1, 2025 the latest stable major release is Angular 21 (release 21.0.0 on November 19, 2025). [1][2]

Sources:
[1] Angular official releases page.
[2] endoflife.date — Angular version history.

🌐 Web query:

Storybook Angular framework support versions compatibility matrix

💡 Result:

Here’s a concise compatibility matrix (major Storybook release → supported/minimum Angular version), with sources:

  • Storybook 6.x — Angular up to v13 (Storybook 6.4 added Angular 13 support). [1]
  • Storybook 7.x — Introduced new framework model; broadly used with Angular 13–14+ (migration notes & community reports show Angular 14 support arrived around early 7.x). [2][3]
  • Storybook 8.x — Requires Angular 15 or newer (listed as a hard requirement in the Storybook 8 migration notes). [4]
  • Storybook (current docs / latest CLI installs) — Storybook’s Angular framework currently requires Angular ≥18 and <21 (and Webpack ≥5). Use npm create storybook@latest to get the supported config. [5][6]

Sources

  1. Storybook 6.4 release notes (Angular 13 support). [Storybook blog / release]. [1]
  2. Storybook 7 migration / release notes (framework changes; community notes re: Angular 14 support). [2][3]
  3. Storybook 8 migration guide (Angular 15+ requirement). [4]
  4. Storybook “Storybook for Angular” docs — current framework requirements: Angular ≥18 <21; Webpack ≥5. [5][6]

If you’d like, I can produce a version-by-version table (including known patch/minor boundaries and exact Storybook package names, e.g. @storybook/angular for each Storybook major) and link the exact docs/releases for each entry.

Update Angular version range to include Angular 21 and allow future versions.

The specified range (≥ 18.0 < 21.0) excludes Angular 21, which was released on November 19, 2025 and is the current latest stable version. Update the constraint to ≥ 18.0 (or a higher upper bound if needed) to reflect current support.

🤖 Prompt for AI Agents 
In docs/get-started/frameworks/angular.mdx around lines 21-29, the Angular
version range currently reads "≥ 18.0 < 21.0" which excludes Angular 21; update
the versions prop to use an open-ended lower-bound (e.g. "≥ 18.0") or a higher
upper bound so it includes Angular 21 and future minor major releases — replace
the Angular object's range value with "≥ 18.0" (or another agreed open-ended
constraint) and keep the rest of the object unchanged.


## Run Storybook

To run Storybook for a particular project, please run the following:
To run Storybook for a particular project, run the following:

```sh
ng run <your-project>:storybook
Expand All @@ -115,15 +44,19 @@ ng run <your-project>:build-storybook

You will find the output in the configured `outputDir` (default is `dist/storybook/<your-project>`).

## Setup Compodoc
## Configure

To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](/docs/writing-stories/decorators/) based on your project needs.

### Compodoc

You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are elements you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).

### Automatic setup
#### Automatic setup

When installing Storybook via `npx storybook@latest init`, you can set up Compodoc automatically.

### Manual setup
#### Manual setup

If you have already installed Storybook, you can set up Compodoc manually.

Expand Down Expand Up @@ -187,7 +120,7 @@ const preview: Preview = {};
export default preview;
```

## `applicationConfig` decorator
### Application-wide providers

If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.

Expand Down Expand Up @@ -230,7 +163,7 @@ export const WithCustomApplicationProvider: Story = {
}
```

## `moduleMetadata` decorator
### Angular dependencies

If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../../writing-stories/decorators.mdx) either for all stories of a component or for individual stories.

Expand Down Expand Up @@ -270,66 +203,104 @@ export const WithCustomProvider: Story = {
};
```


## FAQ

### How do I migrate to an Angular Storybook builder?
### How do I manually install the Angular framework?

The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
The easiest way to install the Angular framework is to run the upgrade command, but you can also set it up manually. First, install the framework:

You can run `npx storybook@latest automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.
{/* prettier-ignore-start */}

#### Do you have only one Angular project in your workspace?
<CodeSnippets path="angular-install.md" />

First, go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).
{/* prettier-ignore-end */}

Second, adjust your `package.json` script section. Usually, it will look like this:
Then, update your `.storybook/main.js|ts` to change the framework property:

```jsonc title="package.json"
{
"scripts": {
"storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
"build-storybook": "build-storybook" // or `storybook build`
}
}
```
{/* prettier-ignore-start */}

<CodeSnippets path="angular-add-framework.md" />

{/* prettier-ignore-end */}

Now, you can run Storybook with `ng run <your-project>:storybook` and build it with `ng run <your-project>:build-storybook`. Adjust the scripts in your `package.json` accordingly.
Finally, update your `angular.json` to include the Storybook builder:

```json title="package.json"
```jsonc title="angular.json"
{
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook"
"projects": {
"your-project": {
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
// The path to the storybook config directory
"configDir": ".storybook",
// The build target of your project
"browserTarget": "your-project:build",
// The port you want to start Storybook on
"port": 6006
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/schema.json
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "your-project:build",
"outputDir": "dist/storybook/your-project"
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/build-storybook/schema.json
}
}
}
}
}
}
```

Also, `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If we're running `compodoc` in your `package.json` scripts like this:
### How do I migrate to an Angular Storybook builder?

```json title="package.json"
The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.

You can run `npx storybook@latest automigrate` to let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.

#### With a single project in your Angular workspace

Go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).

Then, adjust your `package.json` script section, to replace the existing Storybook scripts with the Angular CLI commands:

```diff title="package.json"
{
"scripts": {
"docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
"storybook": "npm run docs:json && start-storybook -p 6006",
"build-storybook": "npm run docs:json && build-storybook"
- "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
- "build-storybook": "build-storybook" // or `storybook build`
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
}
```

Change it to:
Note that `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If you were running `compodoc` in your `package.json` scripts, you can remove the related script:

```json title="package.json"
```diff title="package.json"
{
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook"
- "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
- "storybook": "npm run docs:json && start-storybook -p 6006",
- "build-storybook": "npm run docs:json && build-storybook"
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
Comment on lines +278 to 296
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix duplicate storybook script entries in migration guidance.

Lines 278 and 280 both define a "storybook" key with the same value, which will cause the second to overwrite the first. The second key should be "build-storybook" to align with the migration pattern shown.

Apply this diff to fix the duplicate keys:

  "scripts": {
-    "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
-    "build-storybook": "build-storybook" // or `storybook build`
+    "storybook": "ng run <project-name>:storybook",
+    "build-storybook": "ng run <project-name>:build-storybook",
  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
- "build-storybook": "build-storybook" // or `storybook build`
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
}
```
Change it to:
Note that `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If you were running `compodoc` in your `package.json` scripts, you can remove the related script:
```json title="package.json"
```diff title="package.json"
{
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook"
- "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
- "storybook": "npm run docs:json && start-storybook -p 6006",
- "build-storybook": "npm run docs:json && build-storybook"
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook",
}
}
🤖 Prompt for AI Agents 
In docs/get-started/frameworks/angular.mdx around lines 278 to 296, there are
duplicate "storybook" script keys in the example JSON; change the second
occurrence to "build-storybook" so the scripts object contains distinct
"storybook" and "build-storybook" entries (also correct any typos in the command
string if present, e.g., ensure the ng run invocation uses the proper project
selector syntax).

}
```

#### I have multiple projects in my Angular workspace

In this case, you have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook. Please note that each project should have a dedicated `.storybook` folder placed at the project's root.
#### With multiple projects in your Angular workspace

In case you have multiple projects, you will have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook with. Please note that each project should have a dedicated `.storybook` folder placed at the project's root directory.

You can run `npx storybook@latest init` sequentially for each project to set up Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.

Expand Down
11 changes: 10 additions & 1 deletion docs/get-started/frameworks/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,13 @@ sidebar:
title: Frameworks
---

<HomeRenderers />

## Supported frameworks

<HomeRenderers />

## Community-maintained frameworks

Storybook includes an active community that supports additional frameworks and libraries. These community-maintained frameworks are actively developed and maintained by community contributors.

<CommunityRenderers />
Loading
Loading