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

Copied, not installed

ux:install drops the files into your templates.
Ready-made kits

Shadcn, Flowbite and community kits.
Yours to edit

Plain Twig you can read, debug and version.
Blocks and pages

Assemble whole sections, not only components.
Accessible by default

Keyboard and ARIA handled in the markup.

Add Toolkit to your app.

Collection of components and templates that you can use to build your pages.

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

Pick a kit, start composing.

Each kit is a set of reusable Twig components you install one by one.

Important

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.