Installation and Usage

Beautifully designed, accessible, and high-performance components for your Next.js applications.Copy Markdown

Welcome to the Nurav UI component library. Our components are built with a focus on aesthetics, performance, and developer experience. Each component is designed to be easily integrated into your project, whether you're using our CLI or manual installation.

Features

Built with Framer Motion: Smooth, high-quality animations out of the box.
Tailwind CSS Powered: Easily customizable using standard Tailwind utility classes.
Accessible: Follows WAI-ARIA patterns for inclusive user experiences.
Dark Mode Ready: Every component is optimized for both light and dark themes.
Type-Safe: Full TypeScript support with comprehensive prop definitions.

Installation

You can add components to your project using our CLI for the fastest setup, or manually copy the source code.

Automated (CLI)

Use the Nurav CLI to add components and their dependencies automatically:

Terminal

npx shadcn@latest add @nurav-ui/[component-name].json

Manual Installation

Copy the component source code from the documentation into your project (e.g., components/nurav-ui/[ComponentName].tsx).
Install the required dependencies listed in the component's documentation.
Import and use the component in your application.

General Usage

Most components follow a similar pattern:

button.tsx

import { Button } from "@/components/nurav-ui/Button"

export default function Example() {
  return (
    <Button variant="v1">
      Click Me
    </Button>
  )
}

Next Steps

Explore our growing list of components in the sidebar to start building your next great interface.

Nurav UI