daisy-ui-components-react-updated

📦 daisy-ui-components

A reusable and customizable React component library built with TypeScript.

✨ Features

• ⚛️ Built with React + TypeScript
• 🎨 Composable and customizable UI components
• 💅 Includes global and component-level styles
• 📦 Easy to install and integrate

---

📦 Installation

Using npm

npm install daisy-ui-components

Using yarn

yarn add daisy-ui-components

Using pnpm

pnpm add daisy-ui-components

---

🚀 Getting Started

1. Import Styles

To use the component library, you need to import the CSS styles in your main App.tsx file:

// App.tsx
import React from "react";
import "daisy-ui-components/dist/styles.css"; // Import library styles
import "./App.css"; // Your app styles

function App() {
  return <div className="App">{/* Your app content */}</div>;
}

export default App;

2. Import and Use Components

import React from "react";
import { Button, Card, Input } from "daisy-ui-components";

function MyComponent() {
  return (
    <div>
      <Card>
        <h2>Welcome to YourComponentLibrary!</h2>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Click me</Button>
      </Card>
    </div>
  );
}

export default MyComponent;

---

📚 Components

Button

import { Button } from "daisy-ui-components";

<Button variant="primary" size="large">
  Primary Button
</Button>;

Card

import { Card } from "daisy-ui-components";

<Card>
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>;

Input

import { Input } from "daisy-ui-components";

<Input placeholder="Enter text here" type="text" onChange={(e) => console.log(e.target.value)} />;

---

Custom Theming

You can override the default theme by defining CSS custom properties in your app:

/* App.css */
:root {
  --primary-color: #your-brand-color;
  --secondary-color: #your-secondary-color;
  --border-radius: 8px;
  --font-family: "Your Font", sans-serif;
}

---

🔧 Development

Local Development

# Clone the repository
git clone https://github.com/yourusername/daisy.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

Running Tests

npm run test

Building for Production

npm run build

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---