Storybook

Where Front-End Development becomes a breeze.

Storybook

Open-system React component library powered by Radix UI Primitives, and Tailwind CSS.

Shadcn/ui Storybook - JheanAntunes

Well-configured Storybook, no longer maintained.

Shadcn/ui Storybook - LloydRichards

Ongoing project to add Official Storybook support to Shadcn/ui through CLI.

Installation

Terminal

npx storybook@latest init

A browser window open up at localhost:6006, and Storybook will crash due to picking up the Fumadocs .mdx files.

The state of Storybook is currently an absolute mess. Still figuring out its quirks.

You can view my progress here. It's mostly complete, including a sane dark mode.

For convenience, the following code is in sync based on the current Storybook configuration of this project using doc-gen.

pnpm i -D \
  @storybook/{addon-a11y,addon-actions,addon-backgrounds,addon-controls,addon-designs,addon-docs,addon-interactions,addon-links,addon-measure,addon-onboarding,addon-outline,addon-storysource,addon-themes,addon-toolbars,addon-viewport,blocks,components,icons,manager-api,nextjs,react,source-loader,test,test-runner,theming,types} \
  @chromatic-com/storybook \
  storybook \
  storybook-dark-mode

custom-viewports.ts

main.ts

preview.tsx

stack-builder.svg

themes-storybook-ui.ts

Extend the range of viewports with more options.

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
export const customViewports = {
  ...INITIAL_VIEWPORTS,
  '720p': {
    name: '720p',
    styles: {
      width: '1280px',
      height: '720px',
    },
  },
  '1080p': {
    name: '1080p',
    styles: {
      width: '1920px',
      height: '1080px',
    },
  },
  '2k': {
    name: '2K',
    styles: {
      width: '2560px',
      height: '1440px',
    },
  },
  '4k': {
    name: '4K',
    styles: {
      width: '3840px',
      height: '2160px',
    },
  },
  '21/9': {
    name: '21/9',
    styles: {
      width: '2560px',
      height: '1080px',
    },
  },
}

Inspiration

Fin UI

Storybook

Storybook

Shadcn/ui Storybook - JheanAntunes

Shadcn/ui Storybook - LloydRichards

Installation

Inspiration

On this page