README

Symfony bundle providing FormTypes, TwigComponents, and Stimulus Controllers for the Tabler Design System.

Note: This bundle does not ship Tabler assets. You must install Tabler CSS and Tabler Icons in your application.

composer require jostkleigrewe/symfony-tabler-bundle
npm install @tabler/core @tabler/icons-webfont

Features

FormTypes (5)

Custom Symfony form types with Tabler styling.

• FloatingUnderlineType — Material-style floating label input with icon support
• SwitchType — Checkbox rendered as toggle switch
• ChoiceCardType — Card grid for choices with icons, badges, descriptions
• EntityCardType — Card grid for Doctrine entities
• CardSelectType — Generic multi-select cards

Full documentation | Data attributes reference

TwigComponents (15)

Reusable Symfony UX components with <twig:Tabler:*> prefix.

Full documentation

Stimulus Controllers (6)

Interactive JavaScript controllers auto-discovered via StimulusBundle.

• theme — Dark/light mode + color theme switching with localStorage
• clipboard — Copy-to-clipboard with fallback
• sidebar — Sidebar collapse with mobile backdrop
• modal-frame — Dynamic modal content loading
• required-checkbox — Prevent unchecking required cards
• collapsible — Expandable panels with ARIA support

Full documentation

Theming

6 built-in color themes (EURIP, Forest, Sunset, Ocean, Purple, Rose) with dark/light mode support.

Full documentation

Requirements

• PHP >= 8.4
• Symfony 7.0+ or 8.0+
• Tabler CSS (not included — install separately)
• Tabler Icons (not included — install separately)
• symfony/ux-twig-component (for TwigComponents)
• Optional: symfony/stimulus-bundle (for Stimulus controllers)
• Optional: doctrine/orm (for EntityCardType / CardSelectType)

Quick Start

1. Install

composer require jostkleigrewe/symfony-tabler-bundle
npm install @tabler/core @tabler/icons-webfont

2. Register Form Themes

Add to config/packages/twig.yaml:

twig:
    form_themes:
        - 'bootstrap_5_layout.html.twig'
        - '@Tabler/form/floating_underline.html.twig'
        - '@Tabler/form/switch.html.twig'
        - '@Tabler/form/choice_card.html.twig'
        - '@Tabler/form/card_select.html.twig'

3. Include CSS

CSS files are auto-registered with AssetMapper:

<link rel="stylesheet" href="{{ asset('@jostkleigrewe/tabler-bundle/styles/tabler-forms.css') }}">

4. Use

{# TwigComponent #}
<twig:Tabler:StatCard label="Users" value="1,234" icon="users" trend="up" />

{# FormType (in your form class) #}
$builder->add('email', FloatingUnderlineType::class, [
    'label' => 'Email',
    'icon' => 'mail',
    'input_type' => 'email',
]);

Detailed installation guide

Documentation

Showcase

The bundle includes a built-in demo at /tabler/showcase showing all components and form types in action.

To enable, add to config/routes/tabler.yaml:

tabler_bundle:
    resource: '@TablerBundle/config/routes.yaml'

Showcase documentation

License

MIT License — see LICENSE file.