Use with Remix - Flowbite React

Learn how to install Flowbite React for your Remix project to leverage quicker page loads with a full-stack web framework built by Shopify

Using the CLI#

Run the following command to scaffold a new Flowbite React project using Remix:

# npm
npm create flowbite-react@latest -- --template remix

# yarn
yarn create flowbite-react --template remix

# pnpm
pnpm create flowbite-react@latest --template remix

# bun
bun create flowbite-react@latest --template remix
Manual Installation

Create project#

Run the following command to create a new Remix project:

npx create-remix@latest

Setup Tailwind CSS#

  1. Install tailwindcss and its peer dependencies:
npm i -D tailwindcss
  1. Generate tailwind.config.ts file:
npx tailwindcss init --ts
  1. Add the paths to all of your template files in your tailwind.config.ts file:
import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;
  1. Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind's layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import the newly-created ./app/tailwind.css file in your ./app/root.tsx file:
import stylesheet from "~/tailwind.css";

export const links: LinksFunction = () => [
  // ...
  { rel: "stylesheet", href: stylesheet },
];

Install Flowbite React#

  1. Run the following command to install flowbite-react:
npm i flowbite-react
  1. Add the Flowbite plugin to tailwind.config.ts and include content from flowbite-react:
import flowbite from "flowbite/plugin";

import type { Config } from "tailwindcss";

export default {
  content: [
    // ...
    "node_modules/flowbite-react/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
    flowbite,
  ],
} satisfies Config;

Dark mode#

In server side rendered applications, such as Remix, to avoid page flicker (if dark mode is set) before Remix hydrates the content, ThemeModeScript component must be rendered in Head component (see implementation below).

ThemeModeScript renders a script tag that sets dark or removes dark from <html> element before hydration occurs.

Configure#

  1. Import and render ThemeModeScript in the <head> tag:
// app/root.tsx

import { ThemeModeScript } from "flowbite-react";

export default function App() {
  return (
    <html lang="en">
      <head>
        // ...
        <ThemeModeScript />
      </head>
    </html>
  );
}

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library.

import { Button } from "flowbite-react";

export default function Index() {
  return <Button>Click me</Button>;
}

Templates#