Quick Start

Get up and running with the Stacks Design System in minutes. This guide will walk you through the essential setup steps.

Metric	Value
Setup time	5 min
Components	12+
WCAG Compliance	AA

Prerequisites

• Node.js 18+ installed
• A React/Next.js project
• Basic knowledge of Tailwind CSS

Step 1: Install Dependencies

Install Tailwind CSS and the required Radix UI primitives:

npm install tailwindcss @radix-ui/react-slot @radix-ui/react-dialog \
  @radix-ui/react-accordion @radix-ui/react-dropdown-menu \
  class-variance-authority clsx tailwind-merge lucide-react

Step 2: Configure Tailwind

Add the Stacks design tokens to your globals.css:

@import "tailwindcss";

:root {
  --radius: 0.5rem;
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.15 0 0);
  --primary: oklch(0.7 0.18 45);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0 0);
  --secondary-foreground: oklch(0.2 0 0);
  --muted: oklch(0.96 0.005 45);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.97 0.02 45);
  --accent-foreground: oklch(0.55 0.2 45);
  --destructive: oklch(0.6 0.22 25);
  --border: oklch(0.9 0.01 45);
  --input: oklch(0.92 0.01 45);
  --ring: oklch(0.7 0.18 45);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
}

.dark {
  --background: oklch(0.13 0.01 45);
  --foreground: oklch(0.95 0 0);
  --primary: oklch(0.72 0.19 45);
  --card: oklch(0.18 0.015 45);
  --card-foreground: oklch(0.95 0 0);
  --muted: oklch(0.22 0.015 45);
  --border: oklch(0.28 0.02 45);
}

@layer base {
  * { @apply border-border; }
  body { @apply bg-background text-foreground; }
}

Step 3: Add Utility Function

Create lib/utils.ts for className merging:

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

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

Step 4: Create Your First Component

Create components/ui/button.tsx:

import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        outline: "border border-input bg-background hover:bg-accent",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-8 px-3 text-xs",
        lg: "h-12 px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

function Button({ className, variant, size, asChild, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : "button"
  return (
    <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />
  )
}

export { Button, buttonVariants }

Step 5: Use It!

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

export default function MyPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Welcome to Stacks</h1>
      <Button>Connect Wallet</Button>
    </div>
  )
}

You're all set!

You now have the Stacks Design System configured. Continue exploring the components and patterns to build your application.

Next Steps

Resource	Description
Browse Components	See all available UI components
Wallet Connection	Implement wallet connect flows
Customize Theme	Adapt the design to your brand