Installation

Get started with popcn/ui in your project.

Create a new project

Start by creating a new Next.js project with TypeScript and Tailwind CSS.

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

Initialize popcn/ui

Run the init command to set up your project with AuroraPop design tokens.

npx popcn init

This will:

Create a components.json configuration file
Set up AuroraPop CSS tokens in your global stylesheet
Create the cn() utility function

Install dependencies

Install the required dependencies for the components.

npm install class-variance-authority clsx tailwind-merge

Add components

Start adding components to your project.

npx popcn add button

Use the component

Import and use the component in your project.

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

export default function Page() {
  return (
    <Button variant="aurora" motion="pop">
      Click me
    </Button>
  )
}

Manual Installation

If you prefer to set things up manually, follow these steps:

1. Add Tailwind CSS

Make sure Tailwind CSS is installed and configured in your project.

2. Add CSS Variables

Add the AuroraPop CSS variables to your global stylesheet.

:root {
  --ap-background: 10 10 20;
  --ap-foreground: 255 255 255;
  --ap-primary: 99 102 241;
  --ap-primary-foreground: 255 255 255;
  --ap-secondary: 168 85 247;
  --ap-secondary-foreground: 255 255 255;
  --ap-aurora-1: 99 102 241;
  --ap-aurora-2: 139 92 246;
  --ap-aurora-3: 56 189 248;
  --ap-border: 63 63 70;
  --ap-muted: 39 39 42;
  --ap-muted-foreground: 161 161 170;
  --ap-ring: 99 102 241;
  --ap-radius: 0.5rem;
}

3. Configure Tailwind

Extend your Tailwind config with the AuroraPop theme.

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        background: "rgb(var(--ap-background) / <alpha-value>)",
        foreground: "rgb(var(--ap-foreground) / <alpha-value>)",
        primary: {
          DEFAULT: "rgb(var(--ap-primary) / <alpha-value>)",
          foreground: "rgb(var(--ap-primary-foreground) / <alpha-value>)",
        },
        // ... other colors
      },
    },
  },
}

4. Add the cn utility

Create a utility function for merging class names.

// lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

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