---
title: Symfony
order: 7
summary: Set up Tabler in Symfony and build a first working page.
description: Install Tabler in Symfony - import the CSS and JS with Webpack Encore and render a minimal Twig layout with a Tabler card.
icon: brand-symfony
seoDescription: Install `@tabler/core`, import CSS and JS with Symfony asset tooling, and render a minimal page layout with a Tabler card.
---

import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'

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

<Steps>

### Install Tabler package

Install `@tabler/core` with your preferred package manager:

<TabsPackage name="@tabler/core" />

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

<CdnImportPackage />

### Import styles

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

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

For full theme customization, import SCSS sources instead:

```scss
@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`:

```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`:

```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`:

```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:

```shell
symfony server:start
npm run dev
```

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

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.

</Steps>