nextuiq
Version:
NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat
237 lines (167 loc) • 6.16 kB
Markdown
# NextuiQ - UI Component Library 🚀
Made with ❤️ using **TypeScript** & **Tailwind CSS**.
[](https://www.npmjs.com/package/nextuiq)
[](https://opensource.org/licenses/MIT)
[](https://github.com/Mr-Bhardwa7/nextuiQ)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://github.com/Mr-Bhardwa7/nextuiq/blob/main/CONTRIBUTING.md)
### ✨ 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](https://nextuiq.vercel.app)
## 📦 Installation
Install NextUIQ using **npm** or **yarn**:
```bash
npm install nextuiq
# or
yarn add nextuiq
```
## 🏁 Quick Start
### 1️⃣ Import Styles
Add the following import to your global CSS file:
```css
@import "nextuiq/style.css";
```
### 2️⃣ Use Components
Example usage in a **Next.js/React** project:
```tsx
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`:
```tsx
import { ThemeProvider } from "nextuiq";
function App({ children }) {
return <ThemeProvider>{children}</ThemeProvider>;
}
```
### 2️⃣ Customize Theme Colors
NextUIQ uses **OKLCH color format** for better accessibility:
```css
@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
```tsx
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>
);
}
```
➡️ **[Full Theming Guide](https://github.com/Mr-Bhardwa7/nextuiQ/tree/master/examples/theme-example)**
## 🛠️ 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**
```bash
git clone https://github.com/Mr-Bhardwa7/nextuiQ.git
cd nextuiQ
```
2️⃣ **Install dependencies**
```bash
npm install
```
3️⃣ **Start the development server**
```bash
npm run dev
```
4️⃣ **Run Storybook for component testing**
```bash
npm run storybook
```
### 📌 Contribution Guidelines
- Fork the repo & create a new branch
- Follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages
- Open a **Pull Request (PR)** with a detailed description
## 📜 License
[MIT License](https://github.com/Mr-Bhardwa7/nextuiQ/blob/master/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](https://github.com/Mr-Bhardwa7/nextuiQ/blob/master/README.md)
- 📜 **Changelog** – [CHANGELOG.md](https://github.com/Mr-Bhardwa7/nextuiQ/blob/master/CHANGELOG.md)
- 📖 **Storybook** – [View Components Library](https://nextuiq.vercel.app)
### 💬 Community & Support
- 🐞 **Report Issues** – Found a bug or need a feature? [GitHub Issues](https://github.com/Mr-Bhardwa7/nextuiQ/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! 💡