Integrations

Claude integration

Build with the Country Club UI Kit in Claude and Claude Code. Start from a framework setup, then hand Claude our component guidelines so it generates code that matches the design system.

1. Set up your project

Pick the setup that matches your project. Each guide covers installing the package, Tailwind CSS v4, the fonts, and the ThemeProvider:

Next.js starter — Country Club UI

Click to open the Next.js setup guide.

Vite starter — Country Club UI

Click to open the Vite setup guide.

2. Add the guidelines file

Download our agent guidelines into your project as CLAUDE.md. Claude Code reads this file automatically and uses it to follow the kit's conventions, color tokens, and component APIs:

curl -o CLAUDE.md https://uikit.country.club/AGENT.md

Country Club UI — agent guidelines

View the raw guidelines served from uikit.country.club/AGENT.md.

3. Start building

With CLAUDE.md in place, ask Claude to build with the kit in plain language:

"Build a members dashboard with a stats row and a recent activity table"
"Add a tee-time booking form using the kit's form bindings"
"Create a dark-mode settings page with tabs and a save button"