Ready

_Installation

Get Phase2_ themed components into your project in under five minutes. shadcn/ui + Tailwind CSS + our brand tokens.

Prerequisites

You'll need Node.js 18+ and a Next.js or Vite project.

Initialize shadcn/ui

Run the shadcn init command in your project root. When prompted, choose the "new-york" style.

terminal

npx shadcn@latest init

Install fonts

Phase2_ uses Manrope for headings and Sora for body text. Both are on Google Fonts.

app/layout.tsx

// app/layout.tsx
import { Manrope, Sora } from "next/font/google";

const manrope = Manrope({
  subsets: ["latin"],
  variable: "--font-manrope",
  weight: ["400", "500", "600", "700", "800"],
});

const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  weight: ["300", "400", "500", "600", "700"],
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${manrope.variable} ${sora.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Apply the Phase2_ theme

Replace the default CSS variables in your globals.css with the Phase2_ tokens. Copy the full theme from the Theme page.

globals.css — light mode

:root {
  /* Phase2_ Brand Color Tokens */
  --abyss: #00233A;
  --indigo: #1A3B6F;
  --cyan: #16A3D6;
  --ice: #9AE4FF;
  --coral: #F5543A;
  --pine: #1F4E52;

  /* shadcn/ui semantic tokens */
  --radius: 0.625rem;
  --background: #FAFBFC;
  --foreground: #00233A;
  --card: #FFFFFF;
  --card-foreground: #00233A;
  --popover: #FFFFFF;
  --popover-foreground: #00233A;
  --primary: #00233A;
  --primary-foreground: #FFFFFF;
  --secondary: #F0F4F8;
  --secondary-foreground: #00233A;
  --muted: #F0F4F8;
  --muted-foreground: #5A6B7B;
  --accent: #16A3D6;
  --accent-foreground: #FFFFFF;
  --destructive: #F5543A;
  --border: #E2E8F0;
  --input: #E2E8F0;
  --ring: #16A3D6;
}

Add dark mode

Add the .dark selector for dark mode support. Toggle by adding/removing the 'dark' class on <html>.

globals.css — dark mode

.dark {
  --background: #001220;
  --foreground: #E8F4FA;
  --card: #00233A;
  --card-foreground: #E8F4FA;
  --popover: #00233A;
  --popover-foreground: #E8F4FA;
  --primary: #9AE4FF;
  --primary-foreground: #00233A;
  --secondary: #0A2E47;
  --secondary-foreground: #E8F4FA;
  --muted: #0A2E47;
  --muted-foreground: #7BA3BE;
  --accent: #16A3D6;
  --accent-foreground: #FFFFFF;
  --destructive: #F5543A;
  --border: #143350;
  --input: #143350;
  --ring: #16A3D6;
}

Add components

Install any component you need. They'll automatically use your Phase2_ theme.

terminal

npx shadcn@latest add button card input badge tabs dialog

_ThatIsIt

Your project now has Phase2_ branded components. Browse the component pages to see what's available and how they look with the theme applied.