Quickly build your Design System

Build your Design System.

With Toolkit comes “Kits”, a set of ready-to-use and fully-customizable UI Twig components and more, to help you to build your Design System. 

composer require --dev symfony/ux-toolkit

Read the docs 

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

UX Toolkit

Kits

Kits are a set of ready-to-use and fully-customizable UI Twig components and more, to help you to build your Design System.
We provide a few official kits, but you can also create your own and share it with the community!

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 ux-toolkit topic.