Integrations

Vite

Set up the Country Club UI Kit in a Vite + React project. A dedicated Vite starter is on the way; these manual steps work on any Vite project today.

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 Vite plugin:

pnpm add -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

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:

/* src/index.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). Load them via @fontsource (or a Google Fonts <link>), then map them in your stylesheet:

pnpm add @fontsource-variable/dm-sans @fontsource-variable/fraunces

// src/main.tsx
import "@fontsource-variable/dm-sans";
import "@fontsource-variable/fraunces";

/* after the imports in your global stylesheet */
@theme inline {
  --font-sans: "DM Sans Variable", sans-serif;
  --font-serif: "Fraunces Variable", serif;
}

5. Add the ThemeProvider

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

// src/main.tsx
import { ThemeProvider } from "@countryclub/ui-react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider
      attribute="data-theme"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      <App />
    </ThemeProvider>
  </StrictMode>,
);

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