jostkleigrewe/symfony-tabler-bundle

Tabler Design System FormTypes and Components for Symfony

v0.2.0 2026-02-27 07:28 UTC

Requires

• php: >=8.4
• symfony/form: ^7.0 || ^8.0
• symfony/framework-bundle: ^7.0 || ^8.0
• symfony/twig-bundle: ^7.0 || ^8.0
• symfony/ux-twig-component: ^2.0

Requires (Dev)

• phpstan/phpstan: ^2.0
• phpunit/phpunit: ^11.0
• symplify/easy-coding-standard: ^12.0 || ^13.0

Suggests

• doctrine/orm: Required for EntityCardType and CardSelectType
• symfony/stimulus-bundle: Required for Stimulus controllers (theme, clipboard, sidebar, etc.)

MIT

• symfony
• ui
• form
• components
• design-system
• tabler
• stimulus
• symfony-ux

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.

Deutsche Kurzfassung

Beschreibung

Symfony Bundle mit FormTypes, TwigComponents und Stimulus Controllern für das Tabler Design System. Tabler CSS und Icons müssen separat installiert werden.

Schnellinstallation

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

Form Themes in config/packages/twig.yaml registrieren und CSS einbinden — siehe Installationsanleitung.

Dokumentation (Deutsch)

Thema	Link
Installation	Installationsanleitung
Formular-Typen	FormTypes
Twig-Komponenten	Komponenten
Stimulus Controller	Controller
Theming & CSS	Theming
Card Data-Attribute	Data-Attribute
Showcase / Demo	Showcase

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.

Category	Components
Layout	PageHeader, Panel, CollapsiblePanel
Data Display	StatCard, FeatureCard, CodeBlock
Feedback	Alert, EmptyState, HelpTooltip
Navigation	ActionList, ActionItem, Stepper
Theming	ThemeSwitch, ThemePicker
Decorative	PatternBackground (14 animated patterns)

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

Topic	EN	DE
Installation	Installation Guide	Installationsanleitung
Form Types	Form Types	Formular-Typen
Twig Components	Components	Komponenten
Stimulus Controllers	Controllers	Controller
Theming & CSS	Theming	Theming
Card Data Attributes	Data Attributes	Data-Attribute
Showcase / Demo	Showcase	Showcase

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.