Angular

Set up Tabler in Angular and build a first working page.

Angular manages global assets through its build configuration, and Tabler fits that model well: register the compiled CSS and JS once in angular.json, and every component template can use Tabler classes right away.

This guide uses the Angular CLI. You will install @tabler/core, register its assets in the build config, and render a first component template with a Tabler card.

Setup

Install Tabler package

Install @tabler/core with your preferred package manager:

npm install @tabler/core

yarn add @tabler/core

pnpm install @tabler/core

bun install @tabler/core

You can also use CDN files when you need a quick setup:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></script>

Import styles

{
  "styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"]
}

Alternatively, import the compiled CSS directly in src/styles.scss:

@import '@tabler/core/dist/css/tabler.min.css';

For full theme customization, import SCSS sources in src/styles.scss instead:

@use '@tabler/core/scss/tabler';

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Register it in angular.json under projects.<app>.architect.build.options.scripts:

{
  "scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
}

Angular-specific note: use angular.json for global CSS and JS registration so assets are included in both development and production builds.

Minimal working example

Use a simple root component template in src/app/app.component.html:

<div class="page">
  <div class="page-wrapper">
    <div class="container-xl py-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Angular + Tabler</h3>
          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
        </div>
      </div>
    </div>
  </div>
</div>

A minimal angular.json example (relevant part):

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"],
            "scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
          }
        }
      }
    }
  }
}

Run the app:

ng serve

Open the local Angular URL and confirm the card is styled with Tabler.

Next steps

Continue with Customize to adjust styles and build setup.
Explore Layout to choose page structures.
Browse Components to add UI building blocks.

Menu