Installation
Guide to installing and configuring Nurav UI in your project.Copy Markdown
Installation GUIDE
Follow these steps to integrate Nurav UI into your React/Next.js project.
Nurav UI is built on top of shadcn/ui primitives. If you haven't already, initialize shadcn in your project:
npx shadcn@latest initpnpm dlx shadcn@latest inityarn dlx shadcn@latest initbunx shadcn@latest initInstall the core dependencies required for animations and utility functions:
npm install motion lucide-react clsx tailwind-mergeWe use motion (formerly framer-motion) for all our high-performance animations.
The @nurav-ui shorthand only works once you tell shadcn where to find the registry.
Add the following to components.json at the root of your project:
{
"registries": {
"@nurav-ui": "https://nurav-ui.vercel.app/r"
}
}Automatic Setup Available: If you prefer, we provide an automated CLI setup that configures the registry and dependencies for you instantly. See the section below for details.
Nurav UI is not yet officially listed on the shadcn registry. Until it is,
you must add this entry to components.json before using the @nurav-ui/... alias.
Alternatively, skip this step and install any component via its direct URL instead (see below).
Once the registry is configured, install any component using the @nurav-ui alias:
npx shadcn@latest add @nurav-ui/accordionOr skip the registry config entirely and install via the direct URL:
npx shadcn@latest add https://nurav-ui.vercel.app/r/accordion.jsonReplace accordion with any component name from the docs. The direct URL method always works without any components.json changes.
Manual Setup
If you prefer manual configuration, you can copy the source code and customize it to create your own unique designs.
// Example folder structure
components/
nurav-ui/
Accordion.tsxComponent Usage
Once installed, you can use the components anywhere in your application.
Accordion Example
The Accordion component supports multiple variants out of the box.
Ensure you have the cn utility configured in @/lib/utils for tailwind classes to merge correctly.
Variant v2
For a more premium look with specific dark-mode gradients:
Variant v3
For a sharp-edged, minimal look: