silarhi / tabler-ux-components

v0.8.0 2026-10-13 13:41 UTC

Requires

• php: >=8.2
• symfony/framework-bundle: ^6.4 || ^7.0 || ^8.0
• symfony/twig-bundle: ^6.4 || ^7.0 || ^8.0
• symfony/ux-twig-component: ^2.21 || ^3.0
• twig/extra-bundle: ^3.12 || ^4.0
• twig/html-extra: ^3.12 || ^4.0
• twig/twig: ^3.15 || ^4.0

Requires (Dev)

• ergebnis/composer-normalize: ^2.54.0
• friendsofphp/php-cs-fixer: ^3.95.27
• phpstan/extension-installer: ^1.4.3
• phpstan/phpstan: ^2.3.1
• phpstan/phpstan-strict-rules: ^2.1.0
• phpstan/phpstan-symfony: ^2.1.0
• phpunit/phpunit: ^11.5.57 || ^12.5.38 || ^13.4.1
• rector/rector: ^2.7.0
• symfony/ux-icons: ^2.17 || ^3.0
• vincentlanglet/twig-cs-fixer: ^4.1.1

Suggests

• symfony/ux-icons: To render any icon of Iconify or your own SVG files with the Icon component and the icon props (names with an icon set prefix, e.g. "lucide:check")

MIT

• Guillaume Sainthillier

• symfony
• twig
• ui
• bootstrap
• tabler
• symfony-ux
• shadcn
• twig-component

Published on Packagist.org on 2026-10-13 13:45 UTC

README

Tabler UX Components

Tabler-flavored Twig UX components for Symfony.
Built on the shadcn/ui composition pattern: one all-in-one tag per component, plus sub-components when you need control.

📖 Documentation

Features

• shadcn composition: an all-in-one tag (<twig:Tabler:Card title="…" />) plus, where it makes sense, sub-components (<twig:Tabler:Card:Header>, <twig:Tabler:Card:Body>…)
• Block-mirrored props: on composite components, each prop has a matching Twig block; override one without rewriting the rest
• html_cva() variants: classes are declared with html_cva(), Twig's take on shadcn's CVA
• Plain Tabler markup: Tabler / Bootstrap 5 classes; the interactive components use the data-bs-* JavaScript of tabler.js
• Any icon: Tabler Icons from the webfont, or any icon of Symfony UX Icons with a prefixed name (icon="lucide:circle-check")
• Attribute forwarding: extra attributes (class, id, data-*…) are merged onto the root element
• Template-only: anonymous Twig components, no PHP classes to register or configure

Requirements

• PHP 8.2+
• Symfony 6.4, 7.x or 8.x, with Symfony UX Twig Component 2.21+ / 3.x
• Twig 3.15+ / 4.x, with twig/extra-bundle and twig/html-extra 3.12+ / 4.x
• Tabler 1.6+ on the front-end: its CSS, tabler.js for the interactive components, and @tabler/icons-webfont for the icons (3.36.1+ for the filled icons)
• Optional: Symfony UX Icons 2.17+ / 3.x, for icon names with an icon set prefix (lucide:circle-check)

Installation

composer require silarhi/tabler-ux-components

On ux-twig-component v3, twig_component needs some configuration: see Installation.

Prefer to own the templates? Copy the components into your app with the Symfony UX Toolkit instead: php bin/console ux:install alert --kit=github.com/silarhi/tabler-ux-kit.

Quick start

{# all-in-one #}
<twig:Tabler:Alert variant="success" title="Saved!" description="Your changes are live." />

{# composed #}
<twig:Tabler:Card>
    <twig:Tabler:Card:Header>
        <twig:Tabler:Card:Title>Danger zone</twig:Tabler:Card:Title>
        <twig:Tabler:Card:Actions>
            <twig:Tabler:Button variant="danger" size="sm">Delete</twig:Tabler:Button>
        </twig:Tabler:Card:Actions>
    </twig:Tabler:Card:Header>
    <twig:Tabler:Card:Body>This action cannot be undone.</twig:Tabler:Card:Body>
</twig:Tabler:Card>

Documentation

Every component has a live preview, its Twig source, the HTML it renders, and the reference of its props, sub-components and blocks on tabler-ux-components.silarhi.dev. Start with Composition.

• Feedback: Alert, Empty, Placeholder, Progress, ProgressSteps, Spinner, Toast
• Actions: Button, ButtonActions, ButtonGroup, ButtonList, ButtonToolbar, Clipboard, Dropdown, SegmentedControl, SwitchIcon
• Content: Accordion, Avatar, Badge, Card, Carousel, Chat, Datagrid, Divider, Icon, List, List group, Mention, Prose, Ribbon, Status, Table, Tag, Timeline
• Overlays: Modal, Offcanvas, Popover, Tooltip
• Navigation: Breadcrumb, Nav, Pagination, Step, Tabs
• Layout: Navbar, PageHeader, PageSection
• Data display: Legend, Signal, Sparkline, StarRating, Tracking, Trending

Contributing

See CONTRIBUTING.md.

License

MIT License. See LICENSE for details.

Built with care by SILARHI.
If Tabler UX Components saves you time, consider giving it a star on GitHub.