ZEZO-API-SETUP

🧙‍♂️ ZeZO UI Installation Guide

Let’s summon some components and make your app ✨magical✨.

🧠 TypeScript is your friend

This project runs on TypeScript. Otherwise, the fun of chasing JavaScript bugs at 3 AM is all yours! 😅

🛠️ 1. Create Project

Let’s kick things off! Run the magic spell below to conjure your project:

pnpm dlx shadcn@latest init

✨ 2. Add Components

Now summon the mighty Zezo Button 🪄

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-button.json

You’ve got the button! Use it like this and make your UI go *zezo*:

import { Button } from "@/components/ui/zezo/button"
           export default function Home() {
               return (
                       <div>
                          <Button>Click me</Button>
                       </div>
                    )
                 }

🌗 3. Add ThemeProvider

ZeZO UI supports light and dark mode using next-themes. Let's enchant your app with full theme magic!

🔌 First, install next-themes:

npm install next-themes

📦 Now create a ThemeProvider component:

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

🧱 Wrap your root layout with ThemeProvider:

// app/layout.tsx

import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

🎨 4. Dynamic Theme Colors Setup

ZeZO UI supports dynamic theme colors via environment variables. This allows you to customize colors without changing code!

📁 Files Created for Dynamic Colors:

config/theme.ts - Theme colors configuration & defaults

context/ApplyThemeClient.tsx - Client component to apply theme colors

📝 Step 1: Create config/theme.ts

// config/theme.ts

export interface ThemeColors {
  primary: string;
  primaryHover: string;
  secondary: string;
  secondaryHover: string;
  minimalBg: string;
  minimalHover: string;
  textPrimary: string;
  textSecondary: string;
  textMinimal: string;
}

export const defaultThemeColors: ThemeColors = {
  primary: "#2563EB",
  primaryHover: "#1D4ED8",
  secondary: "#6B7280",
  secondaryHover: "#4B5563",
  minimalBg: "#FFFFFF",
  minimalHover: "#F3F4F6",
  textPrimary: "#FFFFFF",
  textSecondary: "#FFFFFF",
  textMinimal: "#000000",
};

export const getThemeColors = (): ThemeColors => {
  const themeColors = process.env.NEXT_PUBLIC_THEME_COLORS;
  // ... parsing logic ...
  return defaultThemeColors;
};

📝 Step 2: Create context/ApplyThemeClient.tsx

// context/ApplyThemeClient.tsx

"use client";

import { useEffect } from "react";
import { getThemeColors } from "@/config/theme";

export default function ApplyThemeClient() {
  useEffect(() => {
    const colors = getThemeColors();
    const root = document.documentElement;
    
    // Apply CSS variables
    root.style.setProperty("--theme-button-primary", colors.primary);
    root.style.setProperty("--theme-scrollbar-thumb", colors.primary);
    // ... more color mappings ...
  }, []);

  return null;
}

🔧 Step 3: Setup Environment Variables

Create a .env.local file in your project root:

# .env.local

NEXT_PUBLIC_THEME_COLORS={"primary":"#2563EB","primaryHover":"#1D4ED8",
"secondary":"#6B7280","secondaryHover":"#4B5563",
"minimalBg":"#FFFFFF","minimalHover":"#F3F4F6",
"textPrimary":"#FFFFFF","textSecondary":"#FFFFFF",
"textMinimal":"#000000"}

# Custom colors example (partial override):
# NEXT_PUBLIC_THEME_COLORS={"primary":"#FF5733","primaryHover":"#FF3300"}

🧱 Step 4: Add to Layout

Import and add <ApplyThemeClient /> to your root layout:

// app/layout.tsx

import { ThemeProvider } from "@/components/theme-provider"
import ApplyThemeClient from "@/context/ApplyThemeClient"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ApplyThemeClient />
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

🎉 That’s it!

Once that’s done, your app will be looking ✨ fabulous ✨ and ready to roll with Zezo UI!