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

See the Kits

# 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>

100%

Kits

Pick a kit of reusable Twig components
and start composing your interface.

Important

Once installed, components live in your app and are yours to modify as you wish — installing copies the files into your project. Because of that, components come with no backward-compatibility guarantee: they can change or be removed in any release, and your installed copy is unaffected. Re-install a component to pick up the latest version, but since it may differ from your copy, be sure to verify it still works in your app.

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.

🚧 WIP!

Community Kits

Crafted by the community, for the community.
You can find them on GitHub with the symfony-ux-toolkit topic.