Pages

Tools

Installation

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

1

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
2

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

Auto-detects your package manager and installs framer-motion, clsx, and tailwind-merge.

3

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
4

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 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 doctor                   # Check project health
npx @praxys/ui stats                    # Coverage dashboard

Prerequisites

  • React 18+ and Next.js 14+ with the App Router
  • Tailwind CSS 4
  • 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 the GitHub repo into your project.