How to import flowbite in my react project?

Question

I am trying to add flowbite to my react project but I am having this error everytime

Uncaught SyntaxError: expected expression, got '<'

My tailwind.config files is

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/flowbite/**/*.js"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Rubik", "sans-serif"],
        kanit: ["Kanit", "sans-serif"],
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};

And I have included flowbite in index.js

import "flowbite";

Answer 1

You should install it with:

npm i flowbite-react

Then import inside your components with:

import { Tooltip } from 'flowbite-react'

Here's a full example:

import React from 'react'
import InfoIcon from '@mui/icons-material/Info'
import { Tooltip } from 'flowbite-react'

const InfoCircle = ({ tooltip }) => (
  <Tooltip content={tooltip}>
    <InfoIcon />
  </Tooltip>
)

export default InfoCircle

Answer 2

try import Flowbite from "flowbite-react"; cmiiw

Answer 3

Try

 import { Badge } from 'flowbite-react/lib/cjs/components/Badge';

Answer 4

This is how I got it working with the flowbite-react library:

import React from 'react'

import "./style.css";

import { Card } from 'flowbite-react';

function App() {
  return (
    <div className="h-screen flex justify-center items-center flex-col">
      <h1 className="text-2xl font-bold text-blue-600 mb-8 border-b-4 border-purple-600">
        Card
      </h1>
      <div className="max-w-sm">
        <Card imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
          <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            Lorem ipsum dolor sit amet
          </h5>
          <p className="font-normal text-gray-700 dark:text-gray-400">
           Lorem ipsum dolor sit amet, qui minim labore minim sint cillum sint consectetur cupidatat. Lamet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
          </p>
        </Card>
      </div>
    </div>
  );
}

export default App;

Answer 5

import { Your Components Name } from 'flowbite-react';