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

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: [
    // ...
  plugins: [
    // ...
} satisfies Config;

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>;