Customization
Theme
Understand how trink-ui theming works and how to customize every aspect of the visual design through CSS custom properties.
How Theming Works
trink-ui uses a CSS custom property (variable) system for all visual tokens. Instead of hardcoding colors like #6366f1, every component references variables like rgb(var(--trinkui-primary)). This means you can change the entire look of your site by overriding a handful of CSS variables in your global stylesheet.
/* Inside a trink-ui component */
className="bg-[rgb(var(--trinkui-primary))] text-[rgb(var(--trinkui-primary-fg))]"
/* Your global CSS defines the actual values */
:root {
--trinkui-primary: 99 102 241;
--trinkui-primary-fg: 255 255 255;
}CSS Variables Overview
All trink-ui variables use the --trinkui- prefix and are organized into four categories:
Colors
--trinkui-bg, --trinkui-fg, --trinkui-primary, --trinkui-accent, --trinkui-muted, --trinkui-border, --trinkui-surface
Define the color palette. Values are RGB channels (e.g. 99 102 241) for Tailwind opacity compatibility.
Typography
--trinkui-font-heading, --trinkui-font-body, --trinkui-font-mono
Font family stacks for headings, body text, and code.
Border Radius
--trinkui-radius-sm, --trinkui-radius-md, --trinkui-radius-lg, --trinkui-radius-xl, --trinkui-radius-full
Control the roundness of interactive elements and cards.
Shadows
--trinkui-shadow-sm, --trinkui-shadow-md, --trinkui-shadow-lg
Elevation levels for cards, dropdowns, and modals.
The Section theme Prop
Every section component accepts a theme prop that toggles between "light" and "dark". Under the hood, the Section layout component adds or removes the .dark class on its wrapper, scoping the dark color variables to just that section.
import { HeroCentered, FeaturesGrid, CTACentered } from "@trinkui/react";
export default function LandingPage() {
return (
<>
{/* Dark hero on a light page */}
<HeroCentered theme="dark" title="Welcome" ... />
{/* Light features section */}
<FeaturesGrid theme="light" title="Features" ... />
{/* Dark CTA to close */}
<CTACentered theme="dark" title="Get started" ... />
</>
);
}Default Theme Values
Here is the complete default theme. Copy this into your globals.css as a starting point, then override the values you want to change:
:root {
--trinkui-bg: 255 255 255;
--trinkui-fg: 10 10 10;
--trinkui-primary: 99 102 241;
--trinkui-primary-fg: 255 255 255;
--trinkui-secondary: 241 245 249;
--trinkui-secondary-fg: 15 23 42;
--trinkui-accent: 249 115 22;
--trinkui-muted: 100 116 139;
--trinkui-border: 226 232 240;
--trinkui-surface: 248 250 252;
--trinkui-font-heading: "Inter", sans-serif;
--trinkui-font-body: "Inter", sans-serif;
--trinkui-font-mono: "JetBrains Mono", monospace;
--trinkui-radius-sm: 0.375rem;
--trinkui-radius-md: 0.75rem;
--trinkui-radius-lg: 1rem;
--trinkui-radius-xl: 1.5rem;
--trinkui-radius-full: 9999px;
--trinkui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--trinkui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--trinkui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.dark {
--trinkui-bg: 9 9 11;
--trinkui-fg: 250 250 250;
--trinkui-primary: 129 140 248;
--trinkui-primary-fg: 255 255 255;
--trinkui-secondary: 24 24 27;
--trinkui-secondary-fg: 228 228 231;
--trinkui-accent: 251 146 60;
--trinkui-muted: 113 113 122;
--trinkui-border: 39 39 42;
--trinkui-surface: 18 18 21;
}