@bugg-m/bugg-ui
v2.2.3
Published
A design system built with Vite, React, TypeScript, Tailwind, and Storybook
Downloads
457
Maintainers
Readme
📖 Table of Contents
- 🚀 Features
- 📦 Installation
- 🏁 Quick Start
- 🧩 Components
- 📚 Documentation
- 🛠️ Development
- 🤝 Contributing
- 📄 License
- 📞 Support
- 👤 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:
👤 Stay in Touch
- Author: Manish Kumar
- GitHub Repository: bugg-ui