storybook

BaseTheme.js

// .storybook/FirstPaint.js

import { create } from '@storybook/theming'

export default create({
  base: 'light',
  brandTitle: 'FPKIT',
  brandUrl: '/',
  brandImage:
    'https://res.cloudinary.com/dqjs95c7n/image/upload/v1647385126/fp-text-logo-sm_efd59g.svg',
  // UI settings
  appBg: 'white',
  appContentBg: 'white',
  appBorderColor: 'transparent',
  colorSecondary: 'dimgray',
  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',
  // Toolbar default and active colors
  barTextColor: 'sliver',
  barSelectedColor: 'dimgray',
  barBg: 'transparent',
  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,
})

Configure.mdx

import { Meta } from "@storybook/blocks"; import Image from "next/image";

export const RightArrow = () => ( <svg viewBox="0 0 14 14" width="8px" height="14px" style={{ marginLeft: "4px", display: "inline-block", shapeRendering: "inherit", verticalAlign: "middle", fill: "currentColor", "path fill": "currentColor", }}

<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />

);

# Configure your project

Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.

{/* */}

Add styling and CSS

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

Learn more

  <h4 className="sb-section-item-heading">Provide context and mocking</h4>
  <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
  <a
    href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking"
    target="_blank"
  >Learn more<RightArrow /></a>
</div>
<div className="sb-section-item">

  <div>
    <h4 className="sb-section-item-heading">Load assets and resources</h4>
    <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
    `staticDirs` configuration option to specify folders to load when
    starting Storybook.</p>
    <a
      href="https://storybook.js.org/docs/react/configure/images-and-assets"
      target="_blank"
    >Learn more<RightArrow /></a>
  </div>
</div>

# Do more with Storybook

Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.

Addons

Integrate your tools with Storybook to connect workflows.

Discover all addons

  Join our contributors building the future of UI development.

  <a
    href="https://github.com/storybookjs/storybook"
    target="_blank"
  >Star on GitHub<RightArrow /></a>
</div>
<div className="sb-section-item">

  <div>
    Get support and chat with frontend developers.

    <a
      href="https://discord.gg/storybook"
      target="_blank"
    >Join Discord server<RightArrow /></a>
  </div>
</div>
<div className="sb-section-item">

  <div>
    Watch tutorials, feature previews and interviews.

    <a
      href="https://www.youtube.com/@chromaticui"
      target="_blank"
    >Watch on YouTube<RightArrow /></a>
  </div>
</div>
<div className="sb-section-item">

  <p>Follow guided walkthroughs on for key workflows.</p>

  <a
      href="https://storybook.js.org/tutorials/"
      target="_blank"
    >Discover tutorials<RightArrow /></a>
</div>

<style> {` .sb-container { margin-bottom: 48px; } .sb-section { width: 100%; display: flex; flex-direction: row; gap: 20px; } img { object-fit: cover; } .sb-section-title { margin-bottom: 32px; } .sb-section a:not(h1 a, h2 a, h3 a) { font-size: 14px; } .sb-section-item, .sb-grid-item { flex: 1; display: flex; flex-direction: column; } .sb-section-item-heading { padding-top: 20px !important; padding-bottom: 5px !important; margin: 0 !important; } .sb-section-item-paragraph { margin: 0; padding-bottom: 10px; } .sb-chevron { margin-left: 5px; } .sb-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px 20px; } .sb-socials { display: grid; grid-template-columns: repeat(4, 1fr); } .sb-socials p { margin-bottom: 10px; } .sb-explore-image { max-height: 32px; align-self: flex-start; } .sb-addon { width: 100%; display: flex; align-items: center; position: relative; background-color: #EEF3F8; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.05); background: #EEF3F8; height: 180px; margin-bottom: 48px; overflow: hidden; } .sb-addon-text { padding-left: 48px; max-width: 240px; } .sb-addon-text h4 { padding-top: 0px; } .sb-addon-img { position: absolute; left: 345px; top: 0; height: 100%; width: 200%; overflow: hidden; } .sb-addon-img img { width: 650px; transform: rotate(-15deg); margin-left: 40px; margin-top: -72px; box-shadow: 0 0 1px rgba(255, 255, 255, 0); backface-visibility: hidden; } @media screen and (max-width: 800px) { .sb-addon-img { left: 300px; } } @media screen and (max-width: 600px) { .sb-section { flex-direction: column; } .sb-features-grid { grid-template-columns: repeat(1, 1fr); } .sb-socials { grid-template-columns: repeat(2, 1fr); } .sb-addon { height: 280px; align-items: flex-start; padding-top: 32px; overflow: hidden; } .sb-addon-text { padding-left: 24px; } .sb-addon-img { right: 0; left: 0; top: 130px; bottom: 0; overflow: hidden; height: auto; width: 124%; } .sb-addon-img img { width: 1200px; transform: rotate(-12deg); margin-left: 0; margin-top: 48px; margin-bottom: -40px; margin-left: -24px; } } `} </style>

custom-docs.tsx

import * as React from 'react'
import * as DocBlock from '@storybook/blocks'

export const CustomDocs = () => (
  <>
    <DocBlock.Title />
    <DocBlock.Subtitle />
    <DocBlock.Description />
    <DocBlock.Primary />
    <DocBlock.Controls />
    <DocBlock.Source />
    <DocBlock.Stories />
  </>
)

export default CustomDocs

main.js

const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = {
  stories: [
    '../libs/react/guides/**/*.stories.mdx',
    '../libs/react/**/*.stories.mdx',
    '../libs/react/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@geometricpanda/storybook-addon-badges',
    '@storybook/addon-storysource',
    '@storybook/addon-coverage',
    '@storybook/addon-mdx-gfm',
    '@storybook/addon-coverage',
    '@chromaui/addon-visual-tests',
    '@storybook/addon-mdx-gfm',
    '@chromaui/addon-visual-tests',
  ],
  features: {
    interactionsDebugger: true, // 👈 Enable playback controls
  },

  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: true,
    defaultName: 'Interactive Guide',
  },
}

main.ts

import type { StorybookConfig } from "@storybook/nextjs";
import * as React from "react";

import CustomDocs from "./templates/custom-docs";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y",
    "@chromaui/addon-visual-tests",
  ],
  framework: {
    name: "@storybook/nextjs", // 👈 you can change the framework name/type
    options: {},
  },
  docs: {
    autodocs: true,
    defaultName: "Interactive Guide",
  },
};
export default config;

manager-head.html

<style>
#root {
  font-family: 'Roboto', sans-serif !important;
}
</style>

manager.js

// .storybook/manager.js

import { addons } from '@storybook/addons'
import { themes } from '@storybook/theming'
import BaseTheme from './BaseTheme'

addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  enableShortcuts: true,
  isToolshown: true,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  theme: BaseTheme,
  sidebar: {
    showRoots: true,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false },
    zoom: { hidden: true },
    eject: { hidden: false },
    copy: { hidden: false },
    fullscreen: { hidden: true },
  },
})

preview.head.html

<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/libs/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shawnsandy/first-paint@latest/dist/css/components/input.min.css" />

preview.tsx

import './style.css'
import '@shawnsandy/first-paint/dist/css/libs/all.min.css'

import * as React from 'react'
import * as DocBlock from '@storybook/blocks'
import CustomDocs from './templates/custom-docs'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  // viewMode: 'docs',
  // previewTabs: { 'storybook/docs/panel': { index: -1 } },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    sort: {
      method: 'alphabetical',
    },
  },
  docs: {
    page: CustomDocs,
    toc: true, // 👈 Enables the table of contents
  },
  layout: 'centered',
  // @geometricpanda/storybook-addon-badges
  badgesConfig: {
    beta: {
      styles: {
        backgroundColor: '#FFF',
        borderColor: '#018786',
        color: '#018786',
      },
      title: 'Beta',
    },
    deprecated: {
      styles: {
        backgroundColor: '#FFF',
        borderColor: '#6200EE',
        color: '#6200EE',
      },
      title: 'Deprecated',
    },
  },
}