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
This guide provides three ways to integrate Flowbite React with Remix:
- Quick Start: Create a new project with everything pre-configured
- Add to Existing Project: Add Flowbite React to an existing Remix project
- Manual Setup: Set up everything from scratch manually
Quick Start (Recommended)
#
Quick StartThe fastest way to get started is using our project creation CLI, which sets up a new Remix project with Flowbite React, Tailwind CSS, and all necessary configurations:
npx create-flowbite-react@latest -t remix
This will:
- Create a new Remix project
- Install and configure Tailwind CSS
- Set up Flowbite React with all required dependencies
- Configure dark mode support
- Set up example components
Add to Existing Project
#
Add to Existing ProjectIf you already have a Remix project and want to add Flowbite React, you can use our initialization CLI:
npx flowbite-react@latest init
This will automatically:
- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Set up necessary configurations for dark mode
Manual Setup
#
Manual SetupIf you prefer to set everything up manually or need more control over the configuration, follow these steps:
#
1. Create ProjectCreate a new Remix project:
npx create-remix@latest
#
2. Install Flowbite ReactInstall Flowbite React:
npx flowbite-react@latest init
This will:
- Install Flowbite React and its dependencies
- Configure Tailwind CSS to include Flowbite React plugin
- Configure Vite to include Flowbite React plugin
#
3. Configure Dark ModeIn server-side rendered applications like Remix, to avoid page flicker (if dark
mode is set) before Remix hydrates the content, the ThemeModeScript
component must be rendered in the <head>
tag.
ThemeModeScript
renders a script tag that sets dark
or removes dark
from the <html>
element before hydration occurs.
Import and render ThemeModeScript
in app/root.tsx
the <head>
tag:
import { ThemeModeScript } from "flowbite-react";
export default function Layout() {
return (
<html lang="en">
<head>
{/* ... */}
<ThemeModeScript />
</head>
<body>{/* ... */}</body>
</html>
);
}
#
Try it outNow that you have successfully installed Flowbite React you can start using the components from the library:
// app/routes/_index.tsx
import { Button } from "flowbite-react";
export default function Index() {
return <Button>Click me</Button>;
}