🧩 Nikhil UI

A modern, lightweight, and developer-friendly React component library built with TypeScript, TailwindCSS, and Next.js design principles.
Easily integrate reusable, accessible, and customizable UI components into your project.

🚀 Installation

Install nikhil-ui from npm:

npm install nikhil-ui

Or using Yarn:

yarn add nikhil-ui

⚙️ TailwindCSS Setup (Required)

If your project already uses TailwindCSS, make sure to update your tailwind.config.js to include the library’s components.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nikhil-ui/dist/**/*.{js,ts,jsx,tsx}", // 👈 Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

📝 Note: This ensures that TailwindCSS doesn’t purge the styles used inside nikhil-ui components.

🎨 (Optional) Import Styles

If the library provides a base stylesheet (for global utilities or variables), import it in your main CSS or globals.css file:

@import "nikhil-ui/dist/style.css";

Only needed if mentioned in the component documentation (you can skip this if components already include styles internally).

🧠 Prerequisites

Make sure your app has the following installed:

• React ^18 or higher

• TailwindCSS ^3 or higher (if you want theme extension support)

If you’re starting fresh with Next.js, install and configure Tailwind with these commands:

npx create-next-app@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then update your tailwind.config.js and globals.css as usual.

🪄 Usage Example

After installation and setup, you can directly import and use components like this:

import { Button } from "nikhil-ui";

export default function HomePage() {
  return (
    <div className="flex items-center justify-center h-screen">
      <Button
        variant="primary"
        size="lg"
        label="Click Me 🚀"
        primary={false}
        backgroundColor="red"
        className="text-justify"
      />
    </div>
  );
}

💅 Example Button Props

| Prop | Type | Default | Description | | ------- | --------------------------------------- | ----------- | ------------------------------- | | variant | "primary" \| "secondary" \| "outline" | "primary" | Defines the button style | | size | "sm" \| "md" \| "lg" | "md" | Adjusts the button size | | onClick | () => void | undefined | Function called on button click |

🧱 Available Components

| Component | Description | | ---------- | ---------------------------------------------------------------------------------- | | Button | A customizable button component with multiple variants and sizes. | | Card | (Coming soon) A responsive card layout for UI sections. | | Input | (Coming soon) Beautifully styled input fields with labels and validation states. | | Modal | (Coming soon) Lightweight and accessible modal component. |

More components will be added regularly — stay tuned!

🧩 Importing Components Individually

You can import components as needed:

import { Button, Input } from "nikhil-ui";

🛠 For Tailwind Users (Custom Theming)

You can extend your project’s theme to match nikhil-ui:

theme: {
  extend: {
    colors: {
      primary: "#3b82f6",
      secondary: "#9333ea",
    },
  },
}

This allows full color and variant customization of all components.

⚡ Troubleshooting

| Issue | Cause | Fix | | -------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------- | | Styles not applying | Tailwind isn’t scanning the package | Add "./node_modules/nikhil-ui/dist/**/\*.{js,ts,jsx,tsx}" to your content in **tailwind.config.js** | | Unknown class errors | Missing Tailwind setup | Run npx tailwindcss init -p in your project | | Component not found | Wrong import | Ensure you’re importing from nikhil-ui |

🧾 License

MIT © Nikhil Kumar

Support

If you find bugs or have feature requests:

• 🐛 Open an issue on GitHub

• ⭐ Star the repo if you find it helpful

• 🧠 Follow Nikhil Kumar on LinkedIn for developer tips