GitHub

Installation

Set up Leucine Design System in your Next.js project.

Prerequisites

  • Node.js 18+
  • Next.js 14+ (App Router)
  • Tailwind CSS v3

Set Up shadcn/ui

Leucine is built on shadcn/ui. Create a new Next.js project and initialize shadcn:

# Create a new Next.js project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir=false

cd my-app

# Initialize shadcn/ui
npx shadcn@latest init

When prompted, choose the default style. shadcn will create the components directory and configure Tailwind for you.

Copy Tokens

Copy the design tokens from this project into yours. Replace the contents of yourlib/tokens.tsand extend your globals.css with the semantic color variables from :root.

/* globals.css - :root variables */
:root {
  --background: 0 0% 100%;
  --foreground: 215 28% 7%;
  --primary: 222 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 222 90% 97%;
  --secondary-foreground: 222 100% 50%;
  --muted: 220 20% 95%;
  --muted-foreground: 220 9% 46%;
  --border: 220 17% 93%;
  --ring: 222 100% 50%;
  /* ... see this project's globals.css for full list */
}

You're Ready!

Browse Components →
IntroductionColors