Getting Started

Theming

trink-ui uses CSS custom properties for all colors, spacing, and typography. Override any variable to match your brand.

How it works

Every trink-ui component references CSS variables like rgb(var(--trinkui-primary)) instead of hardcoded colors. You define these variables in your global CSS, and all components automatically pick them up. The values use the RGB channel format (e.g. 99 102 241) so they work with Tailwind's opacity utilities.

Color Variables

Custom Brand Colors

Override the primary color to match your brand. All components will automatically update:

:root {
  /* Override just the primary color */
  --trinkui-primary: 20 184 166;    /* teal-500 */
  --trinkui-primary-fg: 255 255 255;
}

.dark {
  --trinkui-primary: 45 212 191;    /* teal-400 */
}

Typography

Customize heading, body, and monospace fonts:

:root {
  --trinkui-font-heading: "Cal Sans", "Inter", sans-serif;
  --trinkui-font-body: "Inter", sans-serif;
  --trinkui-font-mono: "JetBrains Mono", monospace;
}

Border Radius

Control the roundness of all components:

Shadows

:root {
  --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);
}

Per-Section Theming

Every section component accepts a theme prop to switch between light and dark within the same page:

<HeroCentered theme="dark" title="Dark hero" ... />
<FeaturesGrid theme="light" title="Light features" ... />
<CTACentered theme="dark" title="Dark CTA" ... />