How can I integrate a custom Flowbite theme in Storybook for a React/TypeScript project?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm using Flowbite as my UI library in a React/TypeScript project. I installed Tailwind and Storybook, and everything was working fine.
Next, I tried setting a custom theme.

I initially wrapped my App with the following code:

TYPESCRIPT
import { Flowbite } from "flowbite-react";
import { customTheme } from "../theme.ts";

export default function App() {
    return <Flowbite theme={{ theme: customTheme }}>TEST</Flowbite>;
}

However, Storybook is not picking up my custom theme. I set it in .storybook/preview.ts as follows:

TYPESCRIPT
import type { Preview } from "@storybook/react";
import "../src/index.css";
import { Flowbite } from "flowbite-react";
import { customTheme } from "../theme.ts";

const preview: Preview = {
    decorators: [
        (Story) => (
            <Flowbite theme={{ theme: customTheme }}>
                 <Story />
            </Flowbite>
        ),
    ],
};

The Storybook documentation appears to describe a similar approach, but it still does not work for me. React isn't even recognizing Flowbite as a component.

Below are the error messages I received:

Parsing error: '>' expected.
Flowbite' refers to a value, but is being used as a type here. Did you mean 'typeof Flowbite'?

Has anyone successfully integrated a Flowbite theme with Storybook?

Comments 0

•

Answers 3

•

3 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The error you're seeing (Parsing error: '>' expected and React not treating Flowbite as a component) is usually caused by using JSX syntax in a file with a .ts extension. Since .ts files don’t support JSX out-of-the-box, TypeScript thinks you’re using Flowbite as a type rather than as a component.

To fix this, rename your Storybook preview file from preview.ts to preview.tsx. For example:

BASH
mv .storybook/preview.ts .storybook/preview.tsx

Then update your Storybook config (if necessary) to point to the new preview.tsx file.

Your updated file might look like this:

TYPESCRIPT
import type { Preview } from "@storybook/react";
import "../src/index.css";
import { Flowbite } from "flowbite-react";
import { customTheme } from "../theme.ts";

const preview: Preview = {
  decorators: [
    (Story) => (
      <Flowbite theme={{ theme: customTheme }}>
        <Story />
      </Flowbite>
    ),
  ],
};

export default preview;

This change should allow TypeScript to correctly parse the JSX, recognize Flowbite as a component, and apply your custom theme in Storybook.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by InterstellarRanger454 • 1 month ago

You are attempting to use JSX in a .ts file by passing the theme to flowbite directly in the preview file, giving you this error. Have you tried theming your components directly on them? otherwise, storybook has documentation on theming with storybook:

Theming - Storybook Docs

No comments yet.

Answer by LunarResearcher968 • 1 month ago

Since the file ./storybook/preview.ts must to be ts, can't be tsx, so I modified my preview.ts file as below, and it worked well : )

TYPESCRIPT
import React from "react";
import type { Preview } from "@storybook/react";
import "../src/index.css";
import { Flowbite } from "flowbite-react";
import { customTheme } from "../theme.ts";

const FlowbiteWrapper = ({ children }: { children: React.ReactNode }) =>
    React.createElement(Flowbite, { theme: { theme: customTheme } }, children);

const preview: Preview = {
    decorators: [
        (Story) =>
            React.createElement(
                FlowbiteWrapper,
                null,
                React.createElement(Story, null)
            ),
    ],
};

export default preview;

How can I integrate a custom Flowbite theme in Storybook for a React/TypeScript project?

3 Answers

Discussion

Similar Posts

How can I apply a continuous gradient to animated split text in React?

Why is Framer Motion Not Animating Colors from CSS Variables in Next.js?