Skip to main content

Setup

GingerBook is a single package and command that does not require any initial configuration. It is quickly deployable even into complex monorepo setups.

Dependencies​

pnpm add @ginger-society/ginger-book

It expects that react and react-dom are already installed.

Add a story​

GingerBook looks for all stories matching the glob src/**/*.stories.{js,jsx,ts,tsx,mdx}.

Let's create our first story:

src/hello.stories.tsx
export const World = () => <p>Hey!</p>;

If you use .js for your React components (JSX), you have to import React explicitly:

import * as React from "react";

Run and develop​

pnpm ginger-book serve

Development mode. It will start a dev server and open your browser. This is ideal when you want to quickly develop your components.

Build​

pnpm ginger-book build

Production build. It creates a build folder and outputs GingerBook assets into it. This is optimized and minified version that you can deploy or use for testing.

You need to serve it through a http server. GingerBook has the preview command you can use.

pnpm ginger-book preview

All-in-one​

This is a full set of commands you can follow to get a basic setup from scratch:

mkdir my-ui-project
cd my-ui-project
pnpm init
pnpm add @ginger-society/ginger-book react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
pnpm ginger-book serve