Design

Theming

Customize Velyx components to match your brand with Tailwind CSS v4 utilities and CSS variables.

Design Tokens

Velyx uses CSS variables for semantic colors, radius, spacing, and component states.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

Dark mode

Add the `dark` class to the HTML element. Components read the same semantic variables in both themes.

<html class="dark">

Copied code

Components are copied into your app, so theme overrides and component edits stay under your control.

Configuration

Custom Component Variant

@php
$variants = [
    'primary' => 'bg-primary text-primary-foreground hover:bg-primary/90',
    'gradient' => 'bg-gradient-to-r from-primary to-accent text-white',
];
@endphp

Design guides

Colors Typography Spacing