📦 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

1npm install daisy-ui-components

Using yarn

1yarn add daisy-ui-components

Using pnpm

1pnpm 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:

1// App.tsx
2import React from "react";
3import "daisy-ui-components/dist/styles.css"; // Import library styles
4import "./App.css"; // Your app styles
5
6function App() {
7  return <div className="App">{/* Your app content */}</div>;
8}
9
10export default App;

2. Import and Use Components

1import React from "react";
2import { Button, Card, Input } from "daisy-ui-components";
3
4function MyComponent() {
5  return (
6    <div>
7      <Card>
8        <h2>Welcome to YourComponentLibrary!</h2>
9        <Input placeholder="Enter your name" />
10        <Button variant="primary">Click me</Button>
11      </Card>
12    </div>
13  );
14}
15
16export default MyComponent;

---

📚 Components

Button

1import { Button } from "daisy-ui-components";
2
3<Button variant="primary" size="large">
4  Primary Button
5</Button>;

Card

1import { Card } from "daisy-ui-components";
2
3<Card>
4  <h3>Card Title</h3>
5  <p>Card content goes here</p>
6</Card>;

Input

1import { Input } from "daisy-ui-components";
2
3<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:

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

---

🔧 Development

Local Development

1# Clone the repository
2git clone https://github.com/yourusername/daisy.git
3
4# Install dependencies
5npm install
6
7# Start development server
8npm run dev
9
10# Build the library
11npm run build

Running Tests

1npm run test

Building for Production

1npm run build

---

📄 License

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

---