Skip to content

How to use Radix Themes with Storybook? #391

@irfandyj

Description

@irfandyj

I tried importing it to a Storybook. It was really supposed to be a simple line like the following:

import type { Preview } from "@storybook/react";
import '@radix-ui/themes/styles.css';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

My Debugging Process

  1. CSS doesn't load.
    I tried to look for the CSS files in the dev console, it seems like it doesn't come out at all.
    I tried adding an Box, and check its class name which is rt-Box, but it doesn't appear.

  2. I have looked at the following issues Cannot import styles.css #46 and Is @radix-ui/themes currently working in plain React (without Next.js)? #59
    Although they are an issue closed, I think the problem remains the same.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions