nextuiq

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>
  );
}

➡️ Full Theming Guide

🛠️ 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 nextuiQ

2️⃣ Install dependencies

npm install

3️⃣ Start the development server

npm run dev

4️⃣ 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! 💡