Customize Tabler

Tabler provides a flexible CSS variable system that lets you easily adjust the theme without modifying source code.

Custom Font

Replace the default font. Example using Google Fonts Inter:

<!-- Import the font in <head> of index.html -->
<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"
/>

<!-- Set the CSS variable in your project's CSS -->
<style>
  :root {
    --tblr-font-sans-serif: "Inter";
  }
</style>

Custom Primary Color

Override the --tblr-primary CSS variable to change the global primary color:

:root {
  --tblr-primary: #F11D46;
}

All components based on primary (buttons, badges, progress bars, etc.) will automatically use the new color.

Other CSS Variables

Tabler defines many CSS variables that you can override for deep customization:

CSS Variable	Purpose	Example Value
--tblr-primary	Primary color	#206bc4
--tblr-secondary	Secondary color	#6c757d
--tblr-success	Success color	#2fb344
--tblr-info	Info color	#4299e1
--tblr-warning	Warning color	#f76707
--tblr-danger	Danger color	#d63939
--tblr-light	Light color	#f8f9fa
--tblr-dark	Dark color	#1d273b
--tblr-font-sans-serif	Body font	'Inter', system-ui
--tblr-font-monospace	Monospace font	'Menlo', monospace
--tblr-border-radius	Border radius	4px
--tblr-page-padding	Page padding	1.5rem

Usage with the Component Library

When using @gulcc/tabler-vue, simply define the CSS variables in your entry file to apply globally:

<!-- App.vue -->
<style>
:root {
  --tblr-primary: #F11D46;
  --tblr-font-sans-serif: "Inter";
}
</style>

All components (TButton, TBadge, TAlert, etc.) using the primary color will automatically adopt the new value.