How to use Radix Themes with Storybook?

[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.

[irfandyj]

The only workaround that works for me is to copy-paste the styles.css to a folder, then refer to it.
Reference: #59 (comment)

[vladmoroz]

This is most likely not an issue with Radix Themes.

You probably need to configure Storybook so that it knows how to resolve CSS files from node_modules.

[irfandyj]

Ah alright, thanks for the reply! I haven't tried any other solutions though, I just snatched solution related to that. But I will update if I ever tried to find another solution.

[JavierBrooktec]

You need to add the Theme provider from radix-themes

// .storybook/preview.tsx
import { FC } from 'react';
import '@radix-ui/themes/styles.css';
import type { Preview } from '@storybook/react';
import { Theme, ThemePanel } from '@radix-ui/themes';
import React from 'react';


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

export const decorators = [
  (Story: FC) => {
    return (
      <Theme>
        <Story />
        <ThemePanel defaultOpen={false} />
      </Theme>
    );
  },
];

export default preview;

Also recommend that you just import your global css file, and inside of it radix-themes styles

/* src/styles/globals.css */

@import 'tailwindcss';
@import '@radix-ui/themes/styles.css';

.radix-themes {
  --default-font-family: var(--font-Open_Sans);
}

So in preview you just import your global css file

// .storybook/preview.tsx
import { FC } from 'react';
import '../src/styles/globals.css';
import type { Preview } from '@storybook/react';
import { Theme, ThemePanel } from '@radix-ui/themes';
import React from 'react';

....