Use with Remix - Flowbite React

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

2. Generate tailwind.config.ts file:

npx tailwindcss init --ts

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

4. Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind's layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

Additional Info#

To ensure smooth navigation within your application while using Remix components, it's important to align with Remix's API layer. By following these guidelines, you can optimize your navigation experience for users.

Best Practices

1. Consider to instead of href: When incorporating Remix components such as Navbar.Link or Sidebar.Item, keep in mind the usage of to instead of href when employing as={Link}. This step ensures seamless integration with Remix's API layer, maintaining consistency in navigation across your application.
2. Leverage Remix's API Layer: Embrace Remix's API layer for enhanced routing capabilities. Utilizing Link components with the to prop enables you to specify navigation destinations accurately.
3. Example:

// Before
<Navbar.Link href="/about">About</Navbar.Link>

// After
<Navbar.Link as={Link} to="/about">About</Navbar.Link>

By making this simple adjustment, replacing href with to and employing as={Link}, you adhere to Remix's API conventions seamlessly.