---
# System prepended metadata

title: Storybook Cheatshet
tags: [Storybook, Frontend, Atlassian, UI Library, ADG]

---

# Storybook Cheatsheet

| | |
|-|-|
| Install Storybook | `npx storybook@latest init --type=next.js` |
| Setup Wizard | `http://localhost:6006/?path=/onboarding` |
| Install Atlassian addon |1.`yarn add @atlaskit/storybook-addon-design-system`</br>2.`yarn add @atlaskit/storybook-addon-design-system`|
| Start Storybook | `yarn storybook` |


`mkdir sb-atlaskit && cd sb-atlaskit && yarn init -y && yarn add next react react-dom && yarn add -D @storybook/next @atlaskit/storybook-addon-design-system@1.1.1 && npx sb init
`


yarn dlx storybook@latest init --type next.js;
yarn add -D @storybook/react @atlaskit/storybook-addon-design-system@1.1.1

yarn sb init; yarn add @atlaskit/storybook-addon-design-system

`npx create-next-app@latest .`

    √ What is your project named? ... storybook-next.js
    √ Would you like to use TypeScript? ... No / Yes
    √ Would you like to use ESLint? ... No / Yes
    √ Would you like to use Tailwind CSS? ... No / Yes
    √ Would you like to use `src/` directory? ... No / Yes
    √ Would you like to use App Router? (recommended) ... No / Yes
    √ Would you like to customize the default import alias (@/*)? ... No / Yes


`npx sb init`

`yarn add @atlaskit/storybook-addon-design-system@1.1.1`