Installation

Get started with Nexvyn UI by installing components in your project.

Prerequisites

Before installing, make sure you have:

Node.js 18+ installed
A React 18+ / Next.js 13+ project
Tailwind CSS configured

Using the CLI

The easiest way to add components is using the shadcn CLI:

pnpm dlx shadcn@latest add https://ui.nexvyn.dev/r/styles/new-york-v4/button.json

Manual Installation

If you prefer to install components manually, follow these steps:

1. Install Dependencies

pnpm add @radix-ui/react-slot class-variance-authority clsx tailwind-merge

2. Add Utils

Create a lib/utils.ts file:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Copy Components

Browse the component documentation and copy the components you need.

Tailwind CSS Setup

Make sure your tailwind.config.js includes:

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Components

Import components from your components folder:

import { Button } from "@/components/ui/core/button"
import { Card } from "@/components/ui/core/card"

Example Usage

import { Button } from "@/components/ui/core/button"

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

Next Steps

Components - Browse all available components
Button - Start with the Button component