Customization
Override Styles
Every trink-ui component accepts a className prop for targeted overrides. Learn how to use it effectively with the cn() utility and Tailwind classes.
Using the className Prop
All trink-ui components accept a className prop. Your classes are merged with the component's default classes using cn(), which handles Tailwind class conflicts automatically (last class wins).
Basic className override
import { Button, Card } from "@trinkui/react";
{/* Add extra margin */}
<Button className="mt-8">Get Started</Button>
{/* Override padding and add a shadow */}
<Card className="p-8 shadow-xl">
<p>Custom padded card</p>
</Card>
{/* Override background color */}
<HeroCentered
className="bg-gradient-to-br from-indigo-50 to-purple-50"
title="Custom background"
...
/>The cn() Utility
cn() is a thin wrapper around clsx + tailwind-merge. It deduplicates conflicting Tailwind classes so the last value wins. You can import it for your own components too:
How cn() works
import { cn } from "@trinkui/react";
// tailwind-merge resolves conflicts — "p-8" overrides "p-6"
cn("p-6 bg-white", "p-8")
// → "bg-white p-8"
// Conditional classes with clsx syntax
cn("base-class", isActive && "text-blue-500", !isActive && "text-gray-500")
// → "base-class text-blue-500" (if isActive is true)
// Array syntax
cn(["rounded-lg", "border", condition && "shadow-md"])
// → "rounded-lg border shadow-md" (if condition is true)Common Tailwind Overrides
Practical examples of common style overrides:
Common overrides
import { Button, HeroCentered, FeaturesGrid } from "@trinkui/react";
{/* Full-width button */}
<Button className="w-full">Full Width</Button>
{/* Custom border radius */}
<Button className="rounded-full">Pill Button</Button>
{/* Custom font size on a section */}
<HeroCentered
className="[&_h1]:text-5xl [&_h1]:sm:text-7xl"
title="Massive headline"
...
/>
{/* Custom grid gap */}
<FeaturesGrid
className="[&_.grid]:gap-8"
title="Wider spacing"
features={features}
/>
{/* Responsive overrides */}
<Card className="p-4 sm:p-6 lg:p-10">
<p>Responsive padding</p>
</Card>When to Use CSS Variables vs className
Choose the right approach for your use case:
Use CSS variables when...
- Changing brand colors globally (affects all components)
- Adjusting border radius or shadow scale for all components
- Switching fonts site-wide
- Creating consistent dark mode colors
Use className when...
- Overriding a specific component instance
- Adding margins, padding, or layout-specific spacing
- Applying custom backgrounds or gradients to one section
- Targeting inner elements with arbitrary selectors