Quick Start

Version Notice

This component library is currently in active development. Component names, Props, and APIs may change before the stable release. Please stay updated.

Get started with @gulcc/tabler-vue in your project quickly.

🎨 Design Philosophy & Ecosystem Positioning

@gulcc/tabler-vue is a Vue 3 component library tailor-made for the Tabler (based on Bootstrap 5) ecosystem. Our design philosophy is "Lightweight Wrap, Native Driven": components contain almost no custom CSS internally, relying entirely on the official atomic classes. This means you can seamlessly use all CSS utility classes from the Tabler documentation in your project.

⚠️ Global Style Conflicts

Because it heavily relies on Bootstrap 5's global reset (Reboot), this component library is exclusive by nature. Importing @tabler/core injects a large number of global atomic classes into your project.

Before adopting it, please assess the following risks:

1. Mixing with other UI libraries: If your project already uses Element Plus, Ant Design Vue, or other libraries with their own global styles, importing this library may break their default layouts.
2. Mixing with atomic CSS frameworks: If your project uses Tailwind CSS or UnoCSS, base class names (such as d-flex, p-3, etc.) may have priority overrides or conflicts.

Best Practice: It is strongly recommended to use this component library in brand-new projects, or projects that explicitly use Tabler / Bootstrap as the core styling architecture.

---

Installation

After confirming the project positioning matches, install using one of the following package managers:

pnpm

pnpm add @gulcc/tabler-vue

npm

npm install @gulcc/tabler-vue

yarn

yarn add @gulcc/tabler-vue

Prerequisites

Installing only @gulcc/tabler-vue will not render styles or icons correctly. You must also install the following dependencies:

• @tabler/core — provides the base CSS styles
• @tabler/icons-vue — provides the icon components

pnpm add @tabler/core @tabler/icons-vue

Global Import

Import and register all components in main.ts:

import { createApp } from 'vue'
import App from './App.vue'

// Import Tabler CSS (⚠️ Note: this applies global style reset)
import '@tabler/core/dist/css/tabler.min.css'

// Import component library
import TablerVue from '@gulcc/tabler-vue'

const app = createApp(App)
app.use(TablerVue)
app.mount('#app')

On-Demand Import

@gulcc/tabler-vue supports tree-shaking out of the box — no extra configuration needed:

<script setup lang="ts">
import { TButton, TBadge, TCard } from '@gulcc/tabler-vue'
import { IconHeart } from '@tabler/icons-vue'
</script>

<template>
  <div class="d-flex gap-2 p-3">
    <TButton color="primary">
      <IconHeart class="me-1" /> Like
    </TButton>
    <TBadge color="red">New</TBadge>
  </div>
</template>

Browser Support

All modern browsers (latest 2 major versions of Chrome, Firefox, Safari, Edge).

Want to learn more? Check the component list or the color system.