Installation

Requirements

Dependency	Version
PHP	8.2+
Symfony (framework-bundle, twig-bundle)	6.4 / 7.x / 8.x
Symfony UX Twig Component	2.21+ / 3.x
Twig (twig/twig, twig/extra-bundle, twig/html-extra)	3.12+ / 4.x

Installation

composer require silarhi/tabler-ux-components

If your app uses Symfony Flex, the bundle is registered automatically. Otherwise add it to config/bundles.php:

return [
    // ...
    Silarhi\TablerUxComponents\TablerUxComponentsBundle::class => ['all' => true],
];

The components live under components/Tabler/ and are resolved by Twig Component’s anonymous component finder. On ux-twig-component v3, twig_component.defaults and twig_component.anonymous_template_directory must be configured explicitly (on v2 they are optional). The Flex recipe already does it:

config/packages/twig_component.yaml

twig_component:
    anonymous_template_directory: 'components/'
    defaults:
        App\Twig\Components\: 'components/'

Front-end

Your app must load Tabler 1.6+ (@tabler/core): its CSS, and tabler.js for the interactive components (Modal, Dropdown, Carousel, Tabs, Offcanvas, Tooltip, Popover, Clipboard, Sparkline…).

yarn add @tabler/core @tabler/icons-webfont

assets/app.js

import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/icons-webfont/dist/tabler-icons.min.css'
import '@tabler/core'

Caution

Since Tabler 1.5, tabler.js bundles Bootstrap’s JavaScript: do not load bootstrap.js next to it.

Icon and the icon props expect the @tabler/icons-webfont font. Filled icons (<twig:Tabler:Icon filled>) need its filled font as well, compiled under its own prefix: see Filled.

First component

<twig:Tabler:Alert variant="success" title="Saved!" description="Your changes are live." />

Every component is documented with a live preview, its Twig source and the HTML it renders. Read Composition first: all components share the same building blocks.