HomeAboutComponentsFoundations

Instructions

Storybook

Walk users through a process in order

Each step gets a numbered badge and an optional connecting line to the next. Can run vertically for detailed walkthroughs or horizontally for compact progress indicators.

Numbered

Getting started

  1. 1

    Install dependencies

    Run npm install to set up the project.

  2. 2

    Configure tokens

    Import the token CSS files into your app entry point.

  3. 3

    Import components

    Start using components from the design system.

With icons

Setup pipeline

  1. Design in Figma

    Create components and define tokens.

  2. Generate code

    Use Claude Code to read Figma via MCP.

  3. Deploy

    Push to GitHub and auto-deploy to Vercel.

Horizontal

  1. Design

  2. Develop

  3. Test

  4. Deploy

Compact

Quick start

  1. 1

    Install

    npm install @design-system/components

  2. 2

    Import tokens

    Add token CSS to your app

  3. 3

    Use components

    Import and render components