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.