📖 Table of Contents

1. 🚀 Features
2. 📦 Installation
3. 🏁 Quick Start
4. 🧩 Components
5. 📚 Documentation
6. 🛠️ Development
7. 🤝 Contributing
8. 📄 License
9. 📞 Support
10. 👤 Stay in Touch

🚀 Features

• 📦 10+ Components: Intuitive, reusable UI elements for rapid development.
• 🎨 Customizable: Full Tailwind CSS support for easy theming and branding.
• 🌗 Dark Mode: Built-in light/dark theme support.
• 🔧 TypeScript First: Complete type definitions for robust, scalable development.
• 📚 Storybook Integration: Interactive live previews and API documentation.

📦 Installation

Install Bugg-ui

npm install @bugg-m/bugg-ui
# or
yarn add @bugg-m/bugg-ui

Set Up Tailwind CSS

Follow the Tailwind CSS installation guide to configure Tailwind CSS in your project.

🎨 Set Up CSS

Add the following directive to your root CSS file (e.g., index.css)

@import '@bugg-m/bugg-ui/style.css';

Alternatively, import it in your root app file (e.g., index.tsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import '@bugg-m/bugg-ui/style.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

🏁 Quick Start

// Importing components from Bugg-ui
import { Button, Input, Card } from '@bugg-m/bugg-ui';

function App() {
  return (
    <Card>
      <h1>Welcome to Bugg-ui</h1>
      <Input placeholder='Enter your name' />
      <Button variant='primary'>Get Started</Button>
    </Card>
  );
}

For advanced usage, see our full documentation.

🧩 Components

Bugg-ui provides versatile components, including:

• Button: Configurable buttons with multiple variants.
• Card: Stylish container for grouping elements.
• Input: Forms simplified with accessible input fields.
• Modal: Easy-to-use modal dialogs.
• Loader: Visual indicators for loading states.

Check out live examples and code snippets in Storybook.

📚 Documentation

Visit our Documentation Site for details about:

• Component properties and examples.
• Theming and dark mode setup.
• Accessibility best practices.

🛠️ Development

# Clone the repository
git clone https://github.com/bugg-m/bugg-ui.git

# Install dependencies
npm install

# Run the development server
npm run dev

# Start Storybook
npm run storybook

# Build for production
npm run build

🤝 Contributing

We welcome contributions! Check out our Contributing Guide for guidelines on how to contribute.

📄 License

Licensed under the MIT License.

📞 Support

If you encounter any issues or have questions, feel free to:

• Open an issue.
• Contact the author via GitHub.

👤 Stay in Touch

• Author: Manish Kumar
• GitHub Repository: bugg-ui