Install DaisyUI in React Example

In this section we will see how to use daisy ui as a tailwind css components in react js.

Tool Use

React JS

Tailwind CSS 3.v

DaisyUI (Plugin)

Example 1

Install Daisy UI Step by Step in ReactJS

Install & setup tailwind css v3 in reactjs. you can read tailwind css doc or read below article

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Install daisyui

npm i daisyui

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Run server

npm run dev

Example 2

Install Daisy UI Tailwind in React with Create TW

Create react js project with npx:

npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>

Create react js project with yarn:

yarn create tw
# OR
yearn create tw <project-name> --template <id> 

Select ReactJS.

? Project name reactjs-daisyui
? App type (Use arrow keys)
 Next.js (create-next-app) 
 Vanilla (create-vite) 
 ❯ React (create-vite) 
 Vue (create-vite) 
 Astro (create-astro) 
 Svelte Kit (create-svelte) 
 Preact (create-vite) 
 Solid (degit solidjs/templates/js) 

Select typescript.

? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript 

Select Daisy UI Plugin.

? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ @tailwindcss/typography
 ◯ @tailwindcss/forms
 ◯ @tailwindcss/aspect-ratio
 ◯ @tailwindcss/line-clamp
❯◯ daisyui
 ◯ prettier-plugin-tailwindcss

Move to project and run the server.

cd reactjs-daisyui
npm run dev

src/App.tsx

import React from "react";

function App() {
  
  return (
    <div>
      <div className="h-screen justify-center items-center flex flex-col">
        <div className="card w-96 bg-base-100 shadow-xl">
          <figure>
            <img src="https://placeimg.com/400/225/arch" alt="Daisy UI with React" />
          </figure>
          <div className="card-body">
            <h2 className="card-title">Install Daisy UI Plugin in React JS</h2>
            <p>
            install & setup tailwind daisyui in React JS
            </p>
            <div className="card-actions justify-end">
              <button className="btn btn-primary">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

install tailwind daisyUI in react