Customization | AI UX Kit Docs

The AI UX Kit is designed to be customized. Every component uses design tokens and Tailwind CSS utilities, making it straightforward to adapt the look and feel to match your brand.

Changing Colors

Update the CSS custom properties in app/globals.css:

:root {
  /* Primary brand color */
  --primary: 262 83% 58%;          /* HSL without wrapper */
  --primary-foreground: 0 0% 100%;

  /* Accent color */
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
}

.dark {
  --primary: 262 83% 68%;
  --primary-foreground: 0 0% 100%;
}

All components automatically inherit the new colors — no need to update individual files.

Changing Typography

Fonts are configured in app/layout.tsx using Next.js font optimization:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }) {
    return (
        <html>
            <body className={inter.className}>{children}</body>
        </html>
    );
}

Swap Inter for any Google Font or local font file.

Extending Components

Components use the cn() utility (from lib/utils.ts) for class merging, so you can add custom classes without conflicts:

import { Button } from "@/components/ui/primitives/button";

// Add custom styles via className
<Button className="rounded-full px-8" variant="primary">
    Custom Button
</Button>

Creating a Variant

Components use class-variance-authority for variant management. To add a new variant:

// In components/ui/primitives/button/index.tsx
const buttonVariants = cva("...", {
    variants: {
        variant: {
            primary: "...",
            secondary: "...",
            // Add your custom variant
            brand: "bg-brand-500 text-white hover:bg-brand-600",
        },
    },
});

Adding New Components

Follow the existing tier structure:

Create the directory: components/ui/primitives/my-component/
Add the component file: index.tsx
Add a demo page: app/primitives/my-component/page.tsx

Example structure:

// components/ui/primitives/my-component/index.tsx
import { cn } from "@/lib/utils";

interface MyComponentProps {
    className?: string;
    children: React.ReactNode;
}

export function MyComponent({ className, children }: MyComponentProps) {
    return (
        <div className={cn("rounded-lg border p-4", className)}>
            {children}
        </div>
    );
}

Customizing Recipes

Recipes are higher-level patterns. To customize a recipe:

Copy the recipe directory — don't modify the original if you want to preserve the reference
Update the imports to point to your modified primitives/composites
Adjust the layout, spacing, and behavior to match your product needs

For example, to customize the prompt submission recipe:

components/ui/recipes/prompt-submission/
├── prompt-input-basic.tsx         # Simple single-line prompt
├── prompt-input-attachments.tsx   # With file attachment support
├── prompt-input-templates.tsx     # With prompt template selection
└── ...

Pick the variant closest to your needs, copy it, and modify.

Removing Unused Components

To reduce bundle size, delete any component directories you don't use. Since components are file-based with explicit imports, tree-shaking works naturally:

Delete the component directory from components/ui/
Delete the demo page from app/
Run npm run build to verify no broken imports

Using with shadcn/ui CLI

The kit is compatible with the shadcn/ui CLI. The components.json configuration uses the new-york style:

{
    "style": "new-york",
    "tailwind": {
        "config": "",
        "css": "app/globals.css",
        "cssVariables": false
    },
    "aliases": {
        "components": "@/components",
        "utils": "@/lib/utils"
    },
    "iconLibrary": "lucide"
}

You can use npx shadcn@latest add <component> to add new shadcn/ui components alongside the kit's existing ones.