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.

Installation

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/core/dist/css/tabler.min.css'
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>

Avoiding Name Conflicts

All components in this library use the T prefix (e.g., TButton, TCard). If your project already has components with the same name, use on-demand import with aliases:

<script setup lang="ts">
import { TButton as TablerButton } from '@gulcc/tabler-vue'
import TButton from '@/components/TButton.vue'  // Your local component
</script>

<template>
  <TablerButton color="primary">Tabler Button</TablerButton>
  <TButton>Local Button</TButton>
</template>

Global import (app.use(TablerVue)) does not support aliasing. Use on-demand imports if you need to avoid conflicts. The T prefix cannot be bulk-replaced at runtime.