@itfiers/daisyui NPM

Daisyui-React

React based component library with Tailwind CSS Utility classes

Screenshot from 2021-10-14 12-06-29

🌼 Features

Reactjs based
daisyui-react is a ReactJs based component library with Tailwind CSS Utility classes.
Semantic color names
Adds color names like primary, secondary, accent,….
Customizable
You can customize the design of components with Tailwind utility classes and CSS variables.
Themeable
Add multiple themes and customize colors. You can even set a theme for a specific section of your page.
RTL supported
Enable rtl config for right to left layouts.
Pure CSS
No script file, no dependencies. Works on all frameworks and environments!

📀 Install now!

with npm

`npm i daisyui @itfiers/daisyui`

with yarn

`yarn add daisyui @itfiers/daisyui`

install Tailwind CSS

`npm i -D tailwindcss postcss autoprefixer`

Follow installation guide at tailwind official website to configure tailwind for your project.

Add daisyui plugin in your tailwind.config.js.

module.exports = {
  //...
  purge: ["./node_modules/\\@itfiers/daisyui/**/*.js"],
  plugins: [require("daisyui")], // add to plugin array
  // ...
};

🚀 Useage

Use Daisyui-React component to build your UI.

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@itfiers/daisyui";
function App() {
  return (
    <Button size="small" buttonType="primary" className="p-1">
      Hello World
    </Button>
  );
}
ReactDOM.render(<App />, document.querySelector("#app"));