---
title: Storybook | Integrations
keywords: 'component testing, storybook, stories, components, qwik'
contributors:
  - manucorporat
  - igorbabko
  - Benny-Nottonson
  - mrhoodz
  - thenhawke
updated_at: '2024-01-15T18:53:23Z'
created_at: '2023-04-25T19:05:53Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';

# Storybook

[Storybook](https://storybook.js.org/) is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Since version 7.0, Storybook supports Vite natively, which means it has first-class support for Qwik too.

## Usage

You can add Storybook to your existing app, or library use:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add storybook
```
</span>
<span q:slot="npm">
```shell
npm run qwik add storybook
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add storybook
```
</span>
<span q:slot="bun">
```shell
bun run qwik add storybook
```
</span>
</PackageManagerTabs>

The previous command installs the necessary dependencies and adds an example component and stories

Now you can serve the Storybook dashboard:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run storybook
```
</span>
<span q:slot="npm">
```shell
npm run storybook
```
</span>
<span q:slot="yarn">
```shell
yarn run storybook
```
</span>
<span q:slot="bun">
```shell
bun run storybook
```
</span>
</PackageManagerTabs>

## Examples

### Simple component

The following demonstrates a simple story that uses a qwik component:

```tsx title="src/components/button.tsx"
import { component$ } from "@qwik.dev/core";

export interface ButtonProps {
  label: string;
}

export const Button = component$<ButtonProps>(({label}) => {
  return (
    <button>
      {label}
    </button>
  );
});
```

```tsx title="src/components/button.stories.tsx"
import type { Meta, StoryObj } from "storybook-framework-qwik";
import {Button, type ButtonProps} from "./button";

const meta: Meta<ButtonProps>  = {
  component: Button,
};

export default meta;
type Story = StoryObj<ButtonProps>; 

export const Primary: Story = {
  args: {
    label: "Hello World", 
  }
};
```

### Component That Uses Qwik Router

When using Qwik Router, you must pass a context to the story by using the [`<QwikRouterMockProvider>`](https://qwik.dev/docs/api/#qwikroutermockprovider):

```tsx title="src/components/with-link.tsx"
import { component$ } from "@qwik.dev/core";
import { Link } from "@qwik.dev/router";

export const WithLink = component$(() => {
  return (
    <Link href="https://google.com">Google Link</Link>
  );
});
```

```tsx title="src/components/with-link.stories.tsx"
import type { Meta, StoryObj } from "storybook-framework-qwik";
import { QwikRouterMockProvider } from "@qwik.dev/router";

import { WithLink } from "./with-link";

const meta: Meta = {
  component: WithLink,
};

type Story = StoryObj;
export default meta;

export const Primary: Story = {
  render: () =>
    <QwikRouterMockProvider>
      <WithLink />
    </QwikRouterMockProvider>
};
```

For more information please refer to the [storybook documentation.](https://storybook.js.org/docs)
