Integrations

Next.js

Get the Country Club UI Kit running in a Next.js App Router project in a few minutes.

1. Install the package

Inside this monorepo, add the workspace package to your app. For external apps, publish @countryclub/ui-react to your registry first.

pnpm add @countryclub/ui-react@workspace:* react@^19 react-dom@^19

2. Set up Tailwind CSS v4

The kit is styled with Tailwind CSS v4. Install Tailwind and the PostCSS plugin:

pnpm add -D tailwindcss @tailwindcss/postcss

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

The package ships TypeScript source, so add it to transpilePackages in next.config.ts:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@countryclub/ui-react"],
};

export default nextConfig;

3. Import the design system

In app/globals.css, import Tailwind, the kit's design system, and point Tailwind at the kit's source so its utility classes are generated:

/* app/globals.css */
@import "tailwindcss";
@import "@countryclub/ui-react/styles.css";

/* Generate utilities used inside the kit's components */
@source "../node_modules/@countryclub/ui-react/src";

4. Load the fonts

The design system uses DM Sans (sans) and Fraunces (serif). Use next/font to expose them as CSS variables, then map them in your stylesheet:

// app/layout.tsx
import { DM_Sans, Fraunces } from "next/font/google";

const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" });
const fraunces = Fraunces({ subsets: ["latin"], variable: "--font-fraunces" });

// add `${dmSans.variable} ${fraunces.variable}` to <html className=...>

/* after the imports in app/globals.css */
@theme inline {
  --font-sans: var(--font-dm-sans), "DM Sans", sans-serif;
  --font-serif: var(--font-fraunces), "Fraunces", serif;
}

5. Add the ThemeProvider

Dark mode is driven by a data-theme attribute on <html>. Wrap your app with the kit's ThemeProvider:

import { ThemeProvider } from "@countryclub/ui-react";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="data-theme"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

6. Use components

That's it — import any component and start building:

import { Button } from "@countryclub/ui-react";

export function Example() {
  return <Button variant="outline">Book a tee time</Button>;
}