Symfony

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

Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters - you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.

This guide uses Webpack Encore. You will install @tabler/core, import its assets in your Encore entries, and render a first Twig 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

If you use Webpack Encore, import Tabler CSS in assets/styles/app.scss:

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

For full theme customization, import SCSS sources instead:

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

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

If you use Webpack Encore, import Tabler JS in assets/app.js:

import '@tabler/core/dist/js/tabler.min.js'

Symfony-specific note: include generated Encore assets in your base Twig template: {{ encore_entry_link_tags("app") }} and {{ encore_entry_script_tags("app") }}.

If you use AssetMapper instead of Encore, use CDN links or copy built Tabler files to your public assets.

Minimal working example

Create a minimal Twig layout in templates/base.html.twig:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{ encore_entry_link_tags("app") }}
  </head>
  <body>
    {% block body %}{% endblock %}
    {{ encore_entry_script_tags("app") }}
  </body>
</html>

Then add a simple page in templates/home/index.html.twig:

{% extends "base.html.twig" %}

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

Run the app and asset build:

symfony server:start
npm run dev

Open the local Symfony 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