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


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  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 

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


import React from "react";

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

export default App;
install tailwind daisyUI in react

install tailwind daisyUI in react