Mr-Bhardwa7
NextuiQ - UI Component Library 🚀
Made with ❤️ using TypeScript & Tailwind CSS.
✨ Modern, Lightweight UI Library
NextuiQ is a fast, accessible, and fully customizable UI component library designed for Next.js and React. With built-in support for dark mode, accessibility, and semantic theming, NextuiQ helps you build modern UIs effortlessly.
🚀 Features
- 🎨 Modern Design – A consistent UI system
- 🌗 Dark Mode – Out-of-the-box support
- ♿ Accessibility – WAI-ARIA compliant (ongoing improvements)
- 📱 Responsive Design – Fully optimized for mobile & desktop
- 🎯 TypeScript Support – Ensures type safety
- ⚡ Performance Optimized – Minimal bundle size
- 🔌 Next.js & React Friendly – Seamless integration
- 🎨 Theming & Customization – Easy to style with Tailwind CSS
- 📚 Comprehensive Documentation – With interactive examples
📺 Demo
- Storybook: View Component Library
📦 Installation
Install NextUIQ using npm or yarn:
npm install nextuiq
# or
yarn add nextuiq🏁 Quick Start
1️⃣ Import Styles
Add the following import to your global CSS file:
@import "nextuiq/style.css";2️⃣ Use Components
Example usage in a Next.js/React project:
import { Button } from "nextuiq";
const MyComponent = () => {
return <Button variant="primary">Click Me</Button>;
};
export default MyComponent;🎨 Theming & Customization
NextUIQ supports light and dark themes out of the box. You can customize the theme using CSS variables:
1️⃣ Enable Dark Mode
Wrap your application with the ThemeProvider:
import { ThemeProvider } from "nextuiq";
function App({ children }) {
return <ThemeProvider>{children}</ThemeProvider>;
}2️⃣ Customize Theme Colors
NextUIQ uses OKLCH color format for better accessibility:
@theme {
--theme-primary: 0.546 0.245 262.881;
--theme-secondary: 0.541 0.281 293.009;
--theme-background: 1 0 0;
--theme-foreground: 0.208 0.042 265.755;
}
[data-theme="dark"] {
--theme-background: 0.129 0.042 264.695;
--theme-foreground: 0.984 0.003 247.858;
}3️⃣ Apply Theme in Components
function MyComponent() {
const { theme, toggleTheme } = useTheme();
return (
<div className="bg-[oklch(var(--theme-muted))] p-4 rounded-lg">
<h1 className="text-[oklch(var(--theme-foreground))] text-xl font-semibold mb-4">
Current Theme: {theme}
</h1>
<Button
variant="primary"
onClick={toggleTheme}
className="flex items-center gap-2"
>
{theme === "dark" ? "🌞" : "🌙"} Switch to{" "}
{theme === "dark" ? "Light" : "Dark"} Mode
</Button>
</div>
);
}🛠️ Available Components
📌 Base Components
- Button
- Link
- Card
- Badge
- Avatar
🔢 Forms
- Input
- Select
- Multiselect
- Searchable select
- Checkbox
- Radio
- Toggle Switch
- Phone Input
- File Input
- Dropbox Input
- Multi-step form
- OTP Input
🧭 Navigation
- Breadcrumb
- Tabs
- Dropdown
🏗 Overlays
- Modal
- Popover
- Dialog
- Tooltip
📊 Data Display
- Table
- Alert
- Loader
- Responsive Image
- Grid
🪝Hooks
- useBreakpoint
- useTheme
- useModal
- useTable
🛠 Development & Contribution
Want to contribute? Follow these steps:
1️⃣ Clone the repository
git clone https://github.com/Mr-Bhardwa7/nextuiQ.git
cd nextuiQ2️⃣ Install dependencies
npm install3️⃣ Start the development server
npm run dev4️⃣ Run Storybook for component testing
npm run storybook📌 Contribution Guidelines
- Fork the repo & create a new branch
- Follow Conventional Commits for commit messages
- Open a Pull Request (PR) with a detailed description
📜 License
MIT License © Animesh Bhardwaj
🤝 Community & Support
Join the NextuiQ community to get help, report issues, and contribute!
📖 Documentation
Find everything you need to get started and use NextuiQ effectively:
- 📘 Getting Started – README.md
- 📜 Changelog – CHANGELOG.md
- 📖 Storybook – View Components Library
💬 Community & Support
- 🐞 Report Issues – Found a bug or need a feature? GitHub Issues
- 🚀 Contribute – Help improve NextuiQ by submitting issues, pull requests, and feedback.
- 💬 Community Chat – Connect with other developers, ask questions, and get support: Join our Discord (Coming soon!)
_We’d love to hear your feedback and ideas to make NextuiQ even better! 💡