Installation

Install the package#

npm install neelam-ui

React 18 or newer and a matching react-dom are peer dependencies.

Configure Tailwind#

This is the step that is easy to miss. The library ships Tailwind utility classes on its elements and no stylesheet of its own — nothing to import, nothing to override. That keeps your bundle free of CSS you did not ask for, but it means Tailwind has to be told to scan the package, or none of the classes the components reference will exist in your build.

Add the package's dist folder as a source in your global stylesheet:

@import "tailwindcss";
@source "../node_modules/neelam-ui/dist";

Tailwind CSS v4 is required. The components use v4-only features — @custom-variant, starting:, backdrop:, and transition-discrete among them — that have no v3 equivalent.

Enable dark mode#

Every component carries dark: variants that resolve against a .dark class rather than the prefers-color-scheme media query, so your app can offer a theme toggle. Declare the matching variant once:

@custom-variant dark (&:where(.dark, .dark *));

See Dark Mode for wiring up the toggle itself.

Optional: charts#

Chart is a shell around a plot you supply — it owns the caption, legend, validated series palette, reserved plot box, and the accessible data-table fallback, and renders whatever you pass as children. Recharts is an optional peer dependency. Nothing is bundled from it and nothing is imported unless you install it:

npm install recharts

Consumers who do not chart pay nothing for this.

Use a component#

import { Button, Dialog, DialogContent, DialogTrigger } from "neelam-ui";
 
export function Example() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>Hello</DialogContent>
    </Dialog>
  );
}

Requirements#