Extensible UI components, tuned for Symfony

Compose Interfaces In Perfect Harmony.

Twig components that live in your vendor folder, not your repo. You write the melody with tokens, custom variants and themes. HarmonyUI plays every interaction pitch-perfect, release after release.

Start Composing Browse Components

Editor

Preview

Result

Solo founders & indie makers

Ship like a full team.

No designer, no problem. The default preset looks polished from the first render, and every component carries its own accessibility, keyboard navigation and interactions, so you spend your nights on the product, not the dropdown.

Start with the default preset

checkout.html.twig

<twig:ui:Button>
    Pay now
</twig:ui:Button>

<twig:ui:Button variant="outline">
    Cancel
</twig:ui:Button>

config/harmony_ui/button.php

return [
    'button' => new ComponentStyle(
        variants: [
            'variant' => [
                'extended' => 'bg-gradient-to-r
                    from-fuchsia-500 to-cyan-500
                    text-white',
            ],
        ],
    ),
];

Your variant, next to the built-in ones. This button uses this site's real config.

Small & growing companies

A design system, without the design-system team.

Declare your brand once, in tokens, variants and themes, and every developer plays from the same sheet. Add a variant in config, and it exists everywhere, instantly. New pages stay consistent by construction.

See how theming works

Agencies & studios

One foundation, every client.

Ship every project on the same battle-tested components and give each client its own preset. Nothing lives in your repo, nothing is forked, so a five-year-old app updates as easily as the one you started yesterday.

Browse the component library

acme.dev

globex.app

initech.io

yourapp.com/faq

Is it accessible?

Yes. It adheres to the WAI-ARIA accordion design pattern.

Does it work without JavaScript frameworks?

Yes. Twig on the server, a small Stimulus controller in the browser.

Will it pass the audit?

Keyboard navigation, focus management and RTL ship upstream, and improve with every release.

WAI-ARIA pattern Keyboard: ↑ ↓ Home End RTL ready Reduced motion

Enterprises

Built to outlive the rebrand.

Accessibility, keyboard support and RTL ship in the vendor folder and improve with every release, so the app you deliver today still passes the audit five from now, across every team and every codebase.

Read how updates stay safe

Try HarmonyUI now.

Install the bundle, drop a component in your template, and hear the difference from the very first render.

Start Composing