// getting-started

Installation

Get Praxys UI running in your project in under a minute.

Create a Next.js Project

Start with a Next.js project that has TypeScript and Tailwind CSS. Skip this if you already have one.

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app

npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app

Initialize Praxys UI

One command sets up everything — installs dependencies, creates the cn() utility, and writes a config file.

npx @praxys/ui init

npx @praxys/ui init

This auto-detects your package manager (npm, pnpm, yarn, bun) and installs framer-motion, clsx, and tailwind-merge.

Add Components

Add any component by name, or run add with no arguments for an interactive picker.

# Add by name
npx @praxys/ui add animated-button

# Add multiple at once
npx @praxys/ui add accordion alert tooltip

# Interactive picker
npx @praxys/ui add

# Add by name
npx @praxys/ui add animated-button

# Add multiple at once
npx @praxys/ui add accordion alert tooltip

# Interactive picker
npx @praxys/ui add

Use It

Import the component and drop it into your page.

app/page.tsx

import AnimatedButton from "@/components/ui/animated-button";

export default function Page() {
  return <AnimatedButton>Get Started</AnimatedButton>;
}

import AnimatedButton from "@/components/ui/animated-button";

export default function Page() {
  return <AnimatedButton>Get Started</AnimatedButton>;
}

More CLI Commands

npx @praxys/ui list                    # Browse all 138 components
npx @praxys/ui list --category buttons  # Filter by category
npx @praxys/ui list --search modal      # Search components
npx @praxys/ui info animated-button     # Component details
npx @praxys/ui view switch              # View source code
npx @praxys/ui diff accordion           # Compare with latest
npx @praxys/ui update                   # Update all components
npx @praxys/ui remove alert             # Remove a component
npx @praxys/ui doctor                   # Check project health
npx @praxys/ui stats                    # Coverage dashboard

npx @praxys/ui list                    # Browse all 138 components
npx @praxys/ui list --category buttons  # Filter by category
npx @praxys/ui list --search modal      # Search components
npx @praxys/ui info animated-button     # Component details
npx @praxys/ui view switch              # View source code
npx @praxys/ui diff accordion           # Compare with latest
npx @praxys/ui update                   # Update all components
npx @praxys/ui remove alert             # Remove a component
npx @praxys/ui doctor                   # Check project health
npx @praxys/ui stats                    # Coverage dashboard

Prerequisites

React 18+ and Next.js 14+ with the App Router
Tailwind CSS 4 (included with create-next-app --tailwind)
TypeScript recommended

Manual Setup

Prefer not to use the CLI? Here's the manual equivalent.

Install dependencies

npm install framer-motion clsx tailwind-merge

npm install framer-motion clsx tailwind-merge

Create the cn() utility

lib/utils.ts

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

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

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

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

Copy components

Copy any component from app/components/ui/ in the GitHub repo into your project's components/ui/ folder.