CSS

You can import CSS files directly into your components or stories:

import "./styles.css";

If you want to use your stylesheet across all stories, you can create .ginger-book/components.tsx file and import it there. This file can be also used to specify a global provider. That can be useful for CSS-in-JS solutions.

CSS Modules

Any CSS file ending with .module.css is considered a CSS modules file. Importing such a file will return the corresponding module object:

/* example.module.css */
.red {
  color: red;
}

import type { Story } from "@ginger-society/ginger-book";
import classes from "./example.module.css";

export const MyStory: Story = () => {
  return <h1 className={classes.red}>Red Header</h1>;
};

PostCSS

If the project contains valid PostCSS config (any format supported by postcss-load-config, e.g. postcss.config.js), it will be automatically applied to all imported CSS.

GingerBook just defaults to Vite’s CSS handling.

Tailwind

There is a working example. You need to install tailwindcss and create

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

and

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  variants: {},
  plugins: [],
};

Emotion

Add these dependencies

pnpm add @emotion/react @swc/plugin-emotion @vitejs/plugin-react-swc

And create

import react from "@vitejs/plugin-react-swc";

export default {
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      plugins: [["@swc/plugin-emotion", {}]],
    }),
  ],
};

Styled-components

Styled-components work out of the box but it’s highly recommended to install the optional plugin.

pnpm add styled-components @swc/plugin-styled-components @vitejs/plugin-react-swc

And create

import react from "@vitejs/plugin-react-swc";

export default {
  plugins: [
    react({
      plugins: [["@swc/plugin-styled-components", {}]],
    }),
  ],
};

BaseWeb and Styletron

pnpm add baseui styletron-react styletron-engine-monolithic

and create a global provider:

import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-monolithic";
import { LightTheme, DarkTheme, BaseProvider } from "baseui";
import type { GlobalProvider } from "@ginger-society/ginger-book";

const engine = new Styletron();

export const Provider: GlobalProvider = ({ children, globalState }) => (
  <StyletronProvider value={engine}>
    <BaseProvider
      theme={{
        ...(globalState.theme === "dark" ? DarkTheme : LightTheme),
        direction: globalState.rtl ? "rtl" : "ltr",
      }}
    >
      {children}
    </BaseProvider>
  </StyletronProvider>
);

This will setup BaseWeb component library, Styletron and integrates Dark/Light themes with GingerBook.