Installation

How to install dependencies and structure your app to use the Country Club UI Kit, with framework-specific setup for Next.js and Vite.

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 wire it into your bundler — the plugin differs between Next.js and Vite.

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 your global stylesheet, 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";

The design system uses the DM Sans (sans) and Fraunces (serif) typefaces. Load them however your framework prefers, then override the font variables:

With Next.js, use next/font to expose the fonts 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;
}

4. Add the ThemeProvider

Dark mode is driven by a data-theme attribute on <html>. Wrap your app with the kit's ThemeProvider (adapted from next-themes — it works in any React app):

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>
  );
}

5. 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>;
}

The TanStack Form bindings live in a separate entry point so the dependency stays out of your bundle unless you use it:

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