Customize Tabler

Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand.

Custom Google font

To use a custom Google Fonts font in Tabler you must import the font in the <head> section of the page. In this example we will use the Inter font:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
  rel="stylesheet"
/>

Now you just need to tell Tabler to use your favorite font:

<style>
  :root {
    --tblr-font-sans-serif: "Inter";
  }
</style>

Custom font sizes

Tabler exposes typography settings as CSS variables. You can override them by setting variables on :root (global) or on any container (scoped).

Base font size

To change the default font size used by body text and many components, override --tblr-body-font-size:

<style>
  :root {
    --tblr-body-font-size: 1rem;
  }
</style>

Headings

Headings use --tblr-font-size-h1 … --tblr-font-size-h6 and --tblr-line-height-h1 … --tblr-line-height-h6:

<style>
  :root {
    --tblr-font-size-h1: 2rem;
    --tblr-line-height-h1: 2.5rem;
  }
</style>

Custom primary color

To change the primary color of Tabler you need to set the --tblr-primary variable in your CSS. You can use any color format you like (hex, rgb, hsl, etc). In this example we will use a custom red color:

<style>
  :root {
    --tblr-primary: #f11d46;
  }
</style>

Every tint, shade and transparent variant of the primary color is derived from --tblr-primary at runtime with color-mix(), so this one variable is enough. Optionally override --tblr-primary-fg (text/icon color used on primary backgrounds):

<style>
  :root {
    --tblr-primary: #f11d46;
    --tblr-primary-fg: #fff;
  }
</style>

If you need a transparent version of a Tabler color in your own CSS, use color-mix() instead of rgba(var(--tblr-primary-rgb), …):

.my-highlight {
  background-color: color-mix(in oklab, var(--tblr-primary) 20%, transparent);
}

The --tblr-*-rgb variables (for example --tblr-primary-rgb: 6, 111, 209) are deprecated. They are still emitted, but they are static: they don't follow an override of --tblr-primary, and they go away in 2.0. Replace rgba(var(--tblr-primary-rgb), 0.5) in your own CSS with color-mix(in oklab, var(--tblr-primary) 50%, transparent).

Other system colors

Tabler also exposes a few "system" colors you can customize globally:

<style>
  :root {
    --tblr-secondary: #6b7280;
    --tblr-tertiary: #9ca3af;
    --tblr-link-color: #066fd1;
    --tblr-link-hover-color: #045db0;
  }
</style>

Gray scale

You can override the full gray palette (--tblr-gray-50 … --tblr-gray-950) to match your brand:

<style>
  :root {
    --tblr-gray-50: #f9fafb;
    --tblr-gray-100: #f3f4f6;
    --tblr-gray-200: #e5e7eb;
    --tblr-gray-300: #d1d5db;
    --tblr-gray-400: #9ca3af;
    --tblr-gray-500: #6b7280;
    --tblr-gray-600: #4b5563;
    --tblr-gray-700: #374151;
    --tblr-gray-800: #1f2937;
    --tblr-gray-900: #111827;
    --tblr-gray-950: #030712;
  }
</style>