Trouble with Navbar Component.

[skyras13]

How do I fix the styling on the Navbar component on the client side?

I have been trying to build out a simple Navbar but the styling is all wrong.

RIght now I am using the exact code from the example even but it does not resemble the navbar shown in the docs.

'use client'

import Link from 'next/link'
import { Navbar } from 'flowbite-react'

export default function Header() {
  return (
    <Navbar fluid rounded>
      <Navbar.Brand as={Link} href='https://flowbite-react.com'>
        <img
          src='/favicon.svg'
          className='mr-3 h-6 sm:h-9'
          alt='Flowbite React Logo'
        />
        <span className='self-center whitespace-nowrap text-xl font-semibold dark:text-white'>
          Flowbite React
        </span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link href='#' active>
          Home
        </Navbar.Link>
        <Navbar.Link as={Link} href='#'>
          About
        </Navbar.Link>
        <Navbar.Link href='#'>Services</Navbar.Link>
        <Navbar.Link href='#'>Pricing</Navbar.Link>
        <Navbar.Link href='#'>Contact</Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  )
}

This is the result.

Is there a step I am missing when using this component?

[SutuSebastian]

Hey there, it seems like u have an older version of flowbite-react installed, please follow the most recent installation guide.

I'm guessing the main problem u have right now is the tailwind.config.js content does not scan for the correct flowbite-react files in node_modules.

[skyras13]

That fixed it, thank you for the help!