reactjsflowbite

How to style Flowbite React Components

Is there a way to style Flowbite react components? Like, how do i make the navbar transparent.

<Navbar fluid={true} rounded={true}></Navbar>

Solution

  • You can style the Navbar and other Flowbite React components using the className prop.

    For example, to make the navbar transparent, you can use the following TailwindCSS:

    <Navbar fluid={true} rounded={true} className="bg-transparent"></Navbar>

    See Navbar Source: https://github.com/themesberg/flowbite-react/blob/cdea61e56e89ee023e8a5daa4c1743692b8a3899/src/lib/components/Navbar/index.tsx#L18

    TailwindCSS Background Color Docs: https://tailwindcss.com/docs/background-color

    NOTE This is assuming you have setup TailwindCSS with Flowbite according this doc: https://flowbite.com/docs/getting-started/react/