Next.js Setup

Using ToolMate UI in Next.js is incredibly simple, since most modern Next.js templates already come with Tailwind CSS installed.

1. Create a Next.js Project

If you haven’t already, create a new Next.js project with Tailwind CSS enabled:

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

2. Configure global CSS

Open your `app/globals.css` (or `styles/globals.css`) and ensure you have the Tailwind directives and our theme variables:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #ffffff;
    --foreground: #09090b;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #18181b;
  }
  .dark {
    --background: #09090b;
    --foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --input: #27272a;
    --ring: #d4d4d8;
  }
}

3. Copy & Paste

You’re done! Browse the ToolMate UI library, select the “React” tab for any component or section, and copy the code directly into your Next.js project.

// components/Button.tsx
export function Button({ children, className }) {
  return (
    <button className={`h-10 px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 ${className}`}>
      {children}
    </button>
  );
}