Customization

The SaaS Starter Kit is designed to be customized for your product. All components use design tokens and Tailwind CSS utilities, making brand adaptation straightforward.

Changing Colors

Update CSS custom properties in app/globals.css:

:root {
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
  --accent: 150 60% 45%;
  --accent-foreground: 0 0% 100%;
}

All 135+ components automatically inherit the new colors.

Changing Typography

Configure fonts in app/layout.tsx:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

Swap Inter for any Google Font or local font file.

Customizing Auth Flows

Adding Your Backend

Each auth recipe includes // TODO comments. Replace them with your API calls:

const onSubmit = async (data: LoginFormData) => {
    // Replace with your auth provider
    const result = await signIn("credentials", {
        email: data.email,
        password: data.password,
    });
};

Changing Social Providers

Edit the login form to add or remove social login buttons:

// In components/ui/recipes/authentication/login-form.tsx
// Add or remove social provider buttons as needed

Customizing Form Validation

Validation schemas use Zod. Modify the schema to match your requirements:

const loginSchema = z.object({
    email: z.string().email("Enter a valid email"),
    password: z.string().min(8, "Password must be at least 8 characters"),
});

Extending Components

Use the cn() utility to add custom classes:

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

<Button className="rounded-full shadow-lg" variant="primary">
    Custom Button
</Button>

Adding Component Variants

Components use class-variance-authority:

const buttonVariants = cva("...", {
    variants: {
        variant: {
            primary: "...",
            brand: "bg-brand-500 text-white hover:bg-brand-600",
        },
    },
});

Adding New Settings Pages

Follow the existing pattern in recipes/settings/:

1. Create a new component in components/ui/recipes/settings/
2. Add a demo page in app/recipes/settings/your-page/
3. Add a link in the settings sidebar navigation

Removing Unused Features

Delete component directories you don't need:

• Don't need voice input? Delete components/ui/recipes/voice/
• Don't need team management? Delete components/ui/recipes/teams/
• Run npm run build to verify no broken imports

Using shadcn/ui CLI

Add new components alongside the kit:

npx shadcn@latest add <component-name>

The components.json is configured for the new-york style with Lucide icons.