Quickly build your Design System
Build your Design System.
With Toolkit, you get a flexible starting point for your Design System.
composer require --dev symfony/ux-toolkit# Install the components you need...
$ php bin/console ux:install card
$ php bin/console ux:install button
# ... and find them in your templates/components folder!
$ tree templates/components
templates/components
├── Button.html.twig
├── Card
│ ├── Content.html.twig
│ ├── Description.html.twig
│ ├── Footer.html.twig
│ ├── Header.html.twig
│ └── Title.html.twig
└── Card.html.twig{# Freshly installed components are ready to use! #}
<twig:Card>
<twig:Card:Header>
<twig:Card:Title>Symfony is cool</twig:Card:Title>
<twig:Card:Description>
Symfony is a set of reusable PHP components...
</twig:Card:Description>
</twig:Card:Header>
<twig:Card:Content>
... and a PHP framework for web projects
</twig:Card:Content>
<twig:Card:Footer>
<twig:Button as="a" href="https://symfony.com" target="_blank">
Visit symfony.com
</twig:Button>
</twig:Card:Footer>
</twig:Card>
Kits
Pick a kit of reusable Twig components
and start composing your interface.
Installing a component with ux:install copies its files straight into your app.
The catch: there's no upgrade path. Fixes, new options and new features added to a kit never reach a component you've already installed. Commit right after installing, then run ux:install again later and read the diff: it asks before overwriting anything, so nothing gets lost.
The upside: the component is really yours. Adapting it means editing a template in your own templates/, readable, debuggable and versioned with your app: no override mechanism to learn, free to strip out or add what the kit never anticipated. It's why the Toolkit copies files instead of shipping a library.
Bootstrap
Components based on Bootstrap 5.3, the world's most popular HTML, CSS, and JavaScript library for building responsive, mobile-first interfaces.
Common
Design-system agnostic, ready-to-use Twig components for common Symfony needs, like logout links and links submitted as forms.
Flowbite v4
Component based on the Flowbite (v4) library, popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.
Shadcn UI
Component based on the Shadcn UI library, one of the most popular design systems in JavaScript world.
Community Kits
Crafted by the community, for the community.
You can find them on GitHub with the symfony-ux-toolkit topic.