Symfony UX Toolkit

https://github.com/symfony/ux-toolkit
Admin
Symfony UX Toolkit provides a set of ready-to-use UI components for Symfony applications.
Tokens:357,691
Snippets:2,281
Trust Score:9.5
License:MIT
Update:3 days ago
Show doc for...
Tokens:
Raw
### Install a Recipe with a Specific Kit

Source: https://github.com/symfony/ux-toolkit/blob/3.x/doc/index.rst

Use the --kit option to skip the kit selection question. This example installs the button recipe from the shadcn kit.

```terminal
$ php bin/console ux:install button --kit=shadcn
```

--------------------------------

### Install UX Toolkit dependencies with composer install

Source: https://github.com/symfony/ux-toolkit/blob/3.x/CONTRIBUTING.md

Run from the src/Toolkit directory after setting up your fork per the Symfony UX Contribution Guide.

```shell
# src/Toolkit
composer install
```

--------------------------------

### Install Bootstrap with AssetMapper

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/INSTALL.md

Use this command to install Bootstrap and its CSS via AssetMapper. This is required for all components.

```bash
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css
```

--------------------------------

### Install Bootstrap with npm

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/INSTALL.md

Use this command to install Bootstrap via npm (or pnpm/Yarn) instead of AssetMapper. The imports in assets/app.js remain the same.

```bash
npm install bootstrap@^5.3.0
```

--------------------------------

### Bubble Alignment Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/bubble/README.md

Shows how to use the `align` prop on `Bubble` to align bubbles to the start or end of the conversation. The default alignment is start.

```twig
<div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <twig:Bubble variant="muted">
        <twig:Bubble:Content>
            This bubble is aligned to the start. This is the default alignment.
        </twig:Bubble:Content>
    </twig:Bubble>
    <twig:Bubble align="end">
        <twig:Bubble:Content>
            This bubble is aligned to the end. Use this for user messages.
        </twig:Bubble:Content>
    </twig:Bubble>
</div>
```

--------------------------------

### Overview Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/pagination/README.md

A pagination example with previous, page links, and next, all as links.

```twig
<twig:Pagination ariaLabel="Page navigation example">
    <twig:Pagination:Item href="#" label="Previous" />
    <twig:Pagination:Item href="#" label="1" />
    <twig:Pagination:Item href="#" label="2" />
    <twig:Pagination:Item href="#" label="3" />
    <twig:Pagination:Item href="#" label="Next" />
</twig:Pagination>
```

--------------------------------

### Install logout-link component with ux:install

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/common/INSTALL.md

Installs the logout-link component from the common kit, pulling in its own dependencies. Run this command in your Symfony project to add the component under templates/components/.

```shell
php bin/console ux:install logout-link --kit common
```

--------------------------------

### Install a Recipe with ux:install

Source: https://github.com/symfony/ux-toolkit/blob/3.x/doc/index.rst

Run the ux:install command with the recipe name. The command asks which kit to take the recipe from, copies files into your application, and lists dependencies. Existing files are not replaced without confirmation.

```terminal
$ php bin/console ux:install dialog
```

--------------------------------

### Link local UX packages and run local web server

Source: https://github.com/symfony/ux-toolkit/blob/3.x/CONTRIBUTING.md

Run from the ux.symfony.com/ directory to preview kits. The php ../link command links local UX packages, and symfony serve -d starts the local web server.

```shell
# Link local UX packages
php ../link
```

```shell
# Run the local web server
symfony serve -d
```

--------------------------------

### Basic ContextMenu example with preview

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/context-menu/README.md

A previewable example of a basic context menu with a trigger that shows different text for pointer-fine and pointer-coarse devices. Includes a group with items, one disabled.

```twig
<div class="w-full max-w-xs">
    <twig:ContextMenu>
        <twig:ContextMenu:Trigger class="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
            <span class="hidden pointer-fine:inline-block">Right click here</span>
            <span class="hidden pointer-coarse:inline-block">Long press here</span>
        </twig:ContextMenu:Trigger>
        <twig:ContextMenu:Content>
            <twig:ContextMenu:Group>
                <twig:ContextMenu:Item>Back</twig:ContextMenu:Item>
                <twig:ContextMenu:Item disabled>Forward</twig:ContextMenu:Item>
                <twig:ContextMenu:Item>Reload</twig:ContextMenu:Item>
            </twig:ContextMenu:Group>
        </twig:ContextMenu:Content>
    </twig:ContextMenu>
</div>
```

--------------------------------

### Status examples on Trace:Line

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/trace/README.md

Set status on Trace:Line when a step is running, has failed, or hasn't started yet. The example shows statuses: error, running, and pending.

```twig
<twig:Trace class="max-w-sm">
    <twig:Trace:Line>
        <twig:Trace:Icon>
            <twig:ux:icon name="lucide:circle-check" />
        </twig:Trace:Icon>
        <twig:Trace:Title>Ran pnpm install</twig:Trace:Title>
    </twig:Trace:Line>
    <twig:Trace:Line status="error">
        <twig:Trace:Icon>
            <twig:ux:icon name="lucide:circle-alert" />
        </twig:Trace:Icon>
        <twig:Trace:Title>Failed to run pnpm lint</twig:Trace:Title>
    </twig:Trace:Line>
    <twig:Trace:Line status="running">
        <twig:Trace:Icon>
            <twig:ux:icon name="lucide:loader-circle" class="animate-spin" />
        </twig:Trace:Icon>
        <twig:Trace:Title>Running pnpm build</twig:Trace:Title>
    </twig:Trace:Line>
    <twig:Trace:Line status="pending">
        <twig:Trace:Icon>
            <twig:ux:icon name="lucide:circle" />
        </twig:Trace:Icon>
        <twig:Trace:Title>Run pnpm test</twig:Trace:Title>
    </twig:Trace:Line>
</twig:Trace>
```

--------------------------------

### Install ai, @ai-sdk/react, and zod via pnpm

Source: https://github.com/symfony/ux-toolkit/blob/3.x/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component code-block, example 13__1.html

Run this command in a terminal to add the AI SDK packages 'ai', '@ai-sdk/react', and 'zod' to your project. The output shows the installation progress and completion time using pnpm v10.18.0.

```bash
$ pnpm add ai @ai-sdk/react zod
Progress: resolved 412, reused 398, downloaded 14, added 14, done
Done in 2.8s using pnpm v10.18.0
```

--------------------------------

### Basic Usage Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/form/README.md

A minimal form example with a single username field, label, input, description, and submit button. Demonstrates the core structure of the Form component.

```twig
<twig:Form>
    <twig:Form:Item>
        <twig:Form:Label for="form-username">Username</twig:Form:Label>
        <twig:Input id="form-username" name="username" placeholder="shadcn" />
        <twig:Form:Description>This is your public display name.</twig:Form:Description>
    </twig:Form:Item>
    <twig:Button type="submit">Submit</twig:Button>
</twig:Form>
```

--------------------------------

### Usage Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/pagination/README.md

A minimal pagination example with three page links, the first marked as active.

```twig
<twig:Pagination ariaLabel="Search results pages">
    <twig:Pagination:Item href="?page=1" label="1" active />
    <twig:Pagination:Item href="?page=2" label="2" />
    <twig:Pagination:Item href="?page=3" label="3" />
</twig:Pagination>
```

--------------------------------

### Install ai, @ai-sdk/react, and zod via pnpm

Source: https://github.com/symfony/ux-toolkit/blob/3.x/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component code-block, example 4__1.html

Install the AI SDK packages using pnpm. The output shows the resolved dependency versions and confirms the installation completed successfully.

```bash
$ pnpm add ai @ai-sdk/react zod
Progress: resolved 412, reused 398, downloaded 14, added 14, done
dependencies:
+ @ai-sdk/react 3.0.12
+ ai 6.0.12
+ zod 4.1.12
Done in 2.8s using pnpm v10.18.0
```

--------------------------------

### RTL Switch Examples

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/switch/README.md

To enable RTL support, set the `dir="rtl"` attribute on the root element. Shows Arabic and Hebrew examples.

```twig
<div class="w-full flex flex-col items-center gap-8">
    <twig:Field orientation="horizontal" class="max-w-sm" dir="rtl">
        <twig:Field:Content>
            <twig:Field:Label for="switch-rtl-ar">المشاركة عبر الأجهزة</twig:Field:Label>
            <twig:Field:Description>يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.</twig:Field:Description>
        </twig:Field:Content>
        <twig:Switch id="switch-rtl-ar" />
    </twig:Field>

    <twig:Field orientation="horizontal" class="max-w-sm" dir="rtl">
        <twig:Field:Content>
            <twig:Field:Label for="switch-rtl-he">שיתוף בין מכשירים</twig:Field:Label>
            <twig:Field:Description>המיקוד משותף בין מכשירים, וכבה כשאתה עוזב את התוכנה.</twig:Field:Description>
        </twig:Field:Content>
        <twig:Switch id="switch-rtl-he" />
    </twig:Field>
</div>
```

--------------------------------

### Basic Trace:Line usage

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/trace/README.md

Use a Trace:Line for a single step. The example shows a search step with an icon and title.

```twig
<twig:Trace>
    <twig:Trace:Line>
        <twig:Trace:Icon>
            <twig:ux:icon name="lucide:search" />
        </twig:Trace:Icon>
        <twig:Trace:Title>Searched for minimumReleaseAge</twig:Trace:Title>
    </twig:Trace:Line>
</twig:Trace>
```

--------------------------------

### Active State Examples

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/pagination/README.md

Shows two pagination examples: one with an active link and one with a non-interactive active item.

```twig
<div>
    <twig:Pagination ariaLabel="Article pages">
        <twig:Pagination:Item href="#" label="Previous" />
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item href="#" label="2" active />
        <twig:Pagination:Item href="#" label="3" />
        <twig:Pagination:Item href="#" label="Next" />
    </twig:Pagination>

    <twig:Pagination ariaLabel="Article pages with a non-interactive current page" class="mt-3">
        <twig:Pagination:Item href="#" label="1" />
        <twig:Pagination:Item label="2" active />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>
</div>
```

--------------------------------

### Separator Preview Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/separator/README.md

A preview example showing a separator between a title and description text. The `preview` attribute indicates it's for display purposes.

```twig
<div class="flex max-w-sm flex-col gap-4 text-sm">
    <div class="flex flex-col gap-1.5">
        <div class="leading-none font-medium">shadcn/ui</div>
        <div class="text-muted-foreground">The Foundation for your Design System</div>
    </div>
    <twig:Separator />
    <div>A set of beautifully designed components that you can customize, extend, and build on.</div>
</div>
```

--------------------------------

### RTL Skeleton Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/skeleton/README.md

Shows skeleton placeholders with right-to-left support by setting dir="rtl" on the root element. Includes Arabic and Hebrew examples.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex items-center gap-4" dir="rtl">
        <twig:Skeleton class="h-12 w-12 rounded-full" />
        <div class="space-y-2">
            <twig:Skeleton class="h-4 w-[250px]" />
            <twig:Skeleton class="h-4 w-[200px]" />
        </div>
    </div>

    {# Hebrew #}
    <div class="flex items-center gap-4" dir="rtl">
        <twig:Skeleton class="h-12 w-12 rounded-full" />
        <div class="space-y-2">
            <twig:Skeleton class="h-4 w-[250px]" />
            <twig:Skeleton class="h-4 w-[200px]" />
        </div>
    </div>
</div>
```

--------------------------------

### Install Flowbite with AssetMapper or npm

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/INSTALL.md

Install Flowbite using either Symfony AssetMapper's importmap:require or npm for Webpack Encore. Choose the command that matches your asset management setup.

```bash
# With AssetMapper
php bin/console importmap:require flowbite

# With npm
npm install flowbite
```

--------------------------------

### Install required CSS packages with AssetMapper or npm

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/INSTALL.md

Install the required CSS packages using either `importmap:require` for AssetMapper or `npm` for Webpack Encore. The AssetMapper command installs `shadcn/dist/tailwind.css` and `tw-animate-css/dist/tw-animate.css`, while the npm command installs the `shadcn` and `tw-animate-css` packages.

```shell
# With AssetMapper
php bin/console importmap:require shadcn/dist/tailwind.css tw-animate-css/dist/tw-animate.css

# With npm
npm install shadcn tw-animate-css
```

--------------------------------

### Import Bootstrap in assets/app.js

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/INSTALL.md

Add these imports to your assets/app.js file to load Bootstrap's CSS and JavaScript. This is necessary for interactive components and examples.

```javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
```

--------------------------------

### Basic Skeleton Example with Preview

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/skeleton/README.md

Shows a loading placeholder with multiple skeleton elements for text lines and a status role. Includes a screen-reader-only 'Loading...' message.

```twig
<div class="w-full max-w-sm mx-auto">
    <div role="status">
        <twig:Skeleton class="h-2.5 w-48 mb-4" />
        <div class="space-y-2.5">
            <twig:Skeleton class="h-2 max-w-[360px]" />
            <twig:Skeleton class="h-2 w-[200px]" />
            <twig:Skeleton class="h-2 max-w-[330px]" />
            <twig:Skeleton class="h-2 max-w-[300px]" />
            <twig:Skeleton class="h-2 max-w-[360px]" />
        </div>
        <span class="sr-only">Loading...</span>
    </div>
</div>
```

--------------------------------

### Basic Input Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/input/README.md

A simple text input with a placeholder, wrapped in a flex container.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Input placeholder="Enter text" />
</div>
```

--------------------------------

### Basic Popover Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/popover/README.md

A minimal popover example with a trigger button and content aligned to the start. The `popover_trigger_attrs` spread is used to pass necessary attributes to the button.

```twig
<div class="flex items-start justify-center pt-6" style="min-height: 260px">
    <twig:Popover>
        <twig:Popover:Trigger>
            <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open Popover</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content align="start">
            <div class="space-y-1">
                <h4 class="text-sm font-medium leading-none">Dimensions</h4>
                <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p>
            </div>
        </twig:Popover:Content>
    </twig:Popover>
</div>
```

--------------------------------

### Bubble Links and Buttons Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/bubble/README.md

Shows how to turn a bubble into a link or button using the `as` prop on `Bubble:Content`. Use `as="button"` for buttons and `as="a"` with an `href` for links.

```twig
<div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <twig:Bubble variant="muted">
        <twig:Bubble:Content>How can I help you today?</twig:Bubble:Content>
    </twig:Bubble>
    <twig:Bubble:Group>
        <twig:Bubble variant="tinted" align="end">
            <twig:Bubble:Content as="button">I forgot my password</twig:Bubble:Content>
        </twig:Bubble>
        <twig:Bubble variant="tinted" align="end">
            <twig:Bubble:Content as="button">I need help with my subscription</twig:Bubble:Content>
        </twig:Bubble>
        <twig:Bubble variant="tinted" align="end">
            <twig:Bubble:Content as="a" href="#">Something else. Talk to a human.</twig:Bubble:Content>
        </twig:Bubble>
    </twig:Bubble:Group>
</div>
```

--------------------------------

### RTL progress bar examples for Arabic and Hebrew

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/progress/README.md

Shows how to enable RTL support by setting `dir="rtl"` on the root element. Includes two examples: one for Arabic and one for Hebrew, each with a label and a progress bar using `rtl:rotate-180`.

```twig
<div class="flex flex-col gap-8 w-full items-center">
    {# Arabic #}
    <twig:Field class="w-full max-w-sm" dir="rtl">
        <twig:Field:Label for="progress-upload-ar">
            <span>تقدم الرفع</span>
            <span class="ms-auto">٥٦%</span>
        </twig:Field:Label>
        <twig:Progress value="56" id="progress-upload-ar" class="rtl:rotate-180" />
    </twig:Field>
    {# Hebrew #}
    <twig:Field class="w-full max-w-sm" dir="rtl">
        <twig:Field:Label for="progress-upload-he">
            <span>התקדמות העלאה</span>
            <span class="ms-auto">56%</span>
        </twig:Field:Label>
        <twig:Progress value="56" id="progress-upload-he" class="rtl:rotate-180" />
    </twig:Field>
</div>
```

--------------------------------

### File Input Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/input/README.md

Simple file input component to let users upload a single file.

```twig
<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Label for="picture">Picture</twig:Label>
    <twig:Input type="file" id="picture" />
</div>
```

--------------------------------

### Popover with Form Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/popover/README.md

Shows a popover containing a form with labeled inputs for width and height. The content is aligned to the start and uses a wider width class.

```twig
<div class="flex items-start justify-center pt-6" style="min-height: 340px">
    <twig:Popover>
        <twig:Popover:Trigger>
            <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open Popover</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content align="start" class="w-64">
            <div class="grid gap-4">
                <div class="space-y-1">
                    <h4 class="text-sm font-medium leading-none">Dimensions</h4>
                    <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p>
                </div>
                <div class="grid gap-3">
                    <div class="flex items-center gap-3">
                        <twig:Label for="form-width" class="w-1/2">Width</twig:Label>
                        <input id="form-width" class="h-8 w-full rounded-md border px-2 text-sm" value="100%">
                    </div>
                    <div class="flex items-center gap-3">
                        <twig:Label for="form-height" class="w-1/2">Height</twig:Label>
                        <input id="form-height" class="h-8 w-full rounded-md border px-2 text-sm" value="25px">
                    </div>
                </div>
            </div>
        </twig:Popover:Content>
    </twig:Popover>
</div>
```

--------------------------------

### Popover Alignments Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/popover/README.md

Demonstrates the `align` prop with values `start`, `center`, and `end` to position the popover content relative to the trigger. Each popover uses the same name `alignments-demo`.

```twig
<div class="flex items-start justify-center pt-6" style="min-height: 260px">
    <div class="flex gap-6">
        <twig:Popover name="alignments-demo">
            <twig:Popover:Trigger>
                <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Start</twig:Button>
            </twig:Popover:Trigger>
            <twig:Popover:Content align="start" class="w-40">
                Aligned to start
            </twig:Popover:Content>
        </twig:Popover>
        <twig:Popover name="alignments-demo">
            <twig:Popover:Trigger>
                <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Center</twig:Button>
            </twig:Popover:Trigger>
            <twig:Popover:Content align="center" class="w-40">
                Aligned to center
            </twig:Popover:Content>
        </twig:Popover>
        <twig:Popover name="alignments-demo">
            <twig:Popover:Trigger>
                <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>End</twig:Button>
            </twig:Popover:Trigger>
            <twig:Popover:Content align="end" class="w-40">
                Aligned to end
            </twig:Popover:Content>
        </twig:Popover>
    </div>
</div>
```

--------------------------------

### Align DropdownMenu to start, center, or end

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/dropdown-menu/README.md

Use the `align` prop on `DropdownMenu` to position the menu relative to its trigger. The example shows three menus with `align="start"`, `align="center"`, and `align="end"`, each using a `Button` trigger and a `DropdownMenu:Content` with items.

```twig
<div class="flex items-start justify-center pt-6" style="min-height: 260px">
    <div class="flex flex-wrap justify-center gap-8">
        <twig:DropdownMenu id="align_start" align="start">
            <twig:DropdownMenu:Trigger>
                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Start</twig:Button>
            </twig:DropdownMenu:Trigger>
            <twig:DropdownMenu:Content class="w-40">
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:file" class="size-4" />New File</twig:DropdownMenu:Item>
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:folder" class="size-4" />New Folder</twig:DropdownMenu:Item>
            </twig:DropdownMenu:Content>
        </twig:DropdownMenu>
        <twig:DropdownMenu id="align_center" align="center">
            <twig:DropdownMenu:Trigger>
                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>Center</twig:Button>
            </twig:DropdownMenu:Trigger>
            <twig:DropdownMenu:Content class="w-40">
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:file" class="size-4" />New File</twig:DropdownMenu:Item>
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:folder" class="size-4" />New Folder</twig:DropdownMenu:Item>
            </twig:DropdownMenu:Content>
        </twig:DropdownMenu>
        <twig:DropdownMenu id="align_end" align="end">
            <twig:DropdownMenu:Trigger>
                <twig:Button variant="outline" {{ ...dropdown_menu_trigger_attrs }}>End</twig:Button>
            </twig:DropdownMenu:Trigger>
            <twig:DropdownMenu:Content class="w-40">
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:file" class="size-4" />New File</twig:DropdownMenu:Item>
                <twig:DropdownMenu:Item><twig:ux:icon name="lucide:folder" class="size-4" />New Folder</twig:DropdownMenu:Item>
            </twig:DropdownMenu:Content>
        </twig:DropdownMenu>
    </div>
</div>
```

--------------------------------

### Basic Button Group Usage

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/button-group/README.md

Minimal example of a ButtonGroup wrapping two Button components. Use this as the starting point for grouping related buttons.

```twig
<twig:ButtonGroup>
    <twig:Button>Button 1</twig:Button>
    <twig:Button>Button 2</twig:Button>
</twig:ButtonGroup>
```

--------------------------------

### Update toolkit tests and snapshots

Source: https://github.com/symfony/ux-toolkit/blob/3.x/CONTRIBUTING.md

Run from the repository root with Docker running. Use bin/update_toolkit_tests.sh shadcn/popover for one recipe, bin/update_toolkit_tests.sh shadcn for one kit, or no argument for every kit. Then add the updated files to git.

```shell
# One recipe, one kit (bin/update_toolkit_tests.sh shadcn), or every kit (no argument)
bin/update_toolkit_tests.sh shadcn/popover
```

```shell
# Add the updated files to git
git add src/Toolkit/tests/Functional/__snapshots__ src/Toolkit/kits
```

--------------------------------

### Empty component preview example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/empty/README.md

Shows a full-featured empty state with header, icon media, title, description, content with two buttons, and a link. The `preview:true` attribute enables live preview.

```twig
<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Media variant="icon">
            <twig:ux:icon name="tabler:folder-code" />
        </twig:Empty:Media>
        <twig:Empty:Title>No Projects Yet</twig:Empty:Title>
        <twig:Empty:Description>
            You haven&apos;t created any projects yet. Get started by creating your first project.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content class="flex-row justify-center gap-2">
        <twig:Button>Create Project</twig:Button>
        <twig:Button variant="outline">Import Project</twig:Button>
    </twig:Empty:Content>
    <twig:Button variant="link" as="a" href="#" size="sm" class="text-muted-foreground">
        Learn More <twig:ux:icon name="lucide:arrow-up-right" />
    </twig:Button>
</twig:Empty>
```

--------------------------------

### Trace:Collapsible with open state and external toggle button

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/trace/README.md

Rows start closed. Set `open` on `Trace:Collapsible` to start open. To toggle a row from another button inside it, wrap that button in `Collapsible:Trigger` and spread `collapsible_trigger_attrs` on it. That button then also reflects the open state through its `aria-expanded` and `data-state` attributes.

```twig
<div class="flex w-full max-w-sm flex-col items-start gap-4">
    <twig:Trace:Collapsible open>
        <twig:Trace:Collapsible:Trigger>
            <twig:Trace:Line>
                <twig:Trace:Icon>
                    <twig:ux:icon name="lucide:terminal" />
                </twig:Trace:Icon>
                <twig:Trace:Title>Ran node --version</twig:Trace:Title>
            </twig:Trace:Line>
        </twig:Trace:Collapsible:Trigger>
        <twig:Trace:Collapsible:Content>
            <twig:CodeBlock size="sm">
                <twig:CodeBlock:Content wrap class="max-h-64">$ node --version
v24.18.0</twig:CodeBlock:Content>
            </twig:CodeBlock>
        </twig:Trace:Collapsible:Content>
    </twig:Trace:Collapsible>
    <twig:Trace:Collapsible>
        <twig:Trace:Collapsible:Trigger>
            <twig:Trace:Line>
                <twig:Trace:Icon>
                    <twig:ux:icon name="lucide:terminal" />
                </twig:Trace:Icon>
                <twig:Trace:Title>Ran pnpm --version</twig:Trace:Title>
            </twig:Trace:Line>
        </twig:Trace:Collapsible:Trigger>
        <twig:Trace:Collapsible:Content>
            <twig:CodeBlock size="sm">
                <twig:CodeBlock:Content wrap class="max-h-64">$ pnpm --version
10.33.4</twig:CodeBlock:Content>
            </twig:CodeBlock>
        </twig:Trace:Collapsible:Content>
        <twig:Collapsible:Trigger>
            <twig:Button variant="outline" size="sm" class="group/toggle mt-4 self-start" {{ ...collapsible_trigger_attrs }}>
                <span class="group-data-[state=open]/toggle:hidden">Show</span>
                <span class="hidden group-data-[state=open]/toggle:inline">Hide</span>
                the pnpm output
            </twig:Button>
        </twig:Collapsible:Trigger>
    </twig:Trace:Collapsible>
</div>
```

--------------------------------

### Import Flowbite in assets/app.js

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/INSTALL.md

Add this import to your `assets/app.js` file to enable Flowbite's JavaScript functionality (e.g., dropdowns, modals, tooltips) in your Symfony UX project.

```javascript
import 'flowbite';
```

--------------------------------

### Block Start addon alignment

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/input-group/README.md

Positions the addon above the input using align="block-start". Shows two examples: one with a text header and one with a textarea, icon, and copy button.

```twig
<twig:Field:Group class="max-w-sm">
    <twig:Field>
        <twig:Field:Label for="block-start-input">Input</twig:Field:Label>
        <twig:InputGroup class="h-auto">
            <twig:InputGroup:Input id="block-start-input" placeholder="Enter your name" />
            <twig:InputGroup:Addon align="block-start">
                <twig:InputGroup:Text>Full Name</twig:InputGroup:Text>
            </twig:InputGroup:Addon>
        </twig:InputGroup>
        <twig:Field:Description>Header positioned above the input.</twig:Field:Description>
    </twig:Field>
    <twig:Field>
        <twig:Field:Label for="block-start-textarea">Textarea</twig:Field:Label>
        <twig:InputGroup>
            <twig:InputGroup:Textarea
                id="block-start-textarea"
                placeholder="console.log('Hello, world!');"
                class="font-mono text-sm"
            />
            <twig:InputGroup:Addon align="block-start">
                <twig:ux:icon name="lucide:file-code" class="text-muted-foreground" />
                <twig:InputGroup:Text class="font-mono">script.js</twig:InputGroup:Text>
                <twig:InputGroup:Button size="icon-xs" class="ms-auto">
                    <twig:ux:icon name="lucide:copy" />
                    <span class="sr-only">Copy</span>
                </twig:InputGroup:Button>
            </twig:InputGroup:Addon>
        </twig:InputGroup>
        <twig:Field:Description>Header positioned above the textarea.</twig:Field:Description>
    </twig:Field>
</twig:Field:Group>
```

--------------------------------

### Sizing Examples

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/bootstrap/pagination/README.md

Shows large and small pagination sizes using Bootstrap's size prop.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Pagination size="lg" ariaLabel="Large pagination example">
        <twig:Pagination:Item label="1" active />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>

    <twig:Pagination size="sm" ariaLabel="Small pagination example">
        <twig:Pagination:Item label="1" active />
        <twig:Pagination:Item href="#" label="2" />
        <twig:Pagination:Item href="#" label="3" />
    </twig:Pagination>
</div>
```

--------------------------------

### pnpm version check failure output

Source: https://github.com/symfony/ux-toolkit/blob/3.x/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component trace, example 13__1.html

Output shown when running `pnpm --version` fails because pnpm is not installed. The command `node --version` succeeded, but pnpm is missing.

```bash
command not found: pnpm
```

--------------------------------

### Basic Input Usage

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/input/README.md

Minimal usage example of the twig:Input component.

```twig
<twig:Input />
```

--------------------------------

### Configure assets/styles/app.css for Flowbite

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/INSTALL.md

Replace the contents of assets/styles/app.css with this configuration to integrate TailwindCSS with Flowbite. It includes @source directives for AssetMapper or Webpack Encore, a dark variant, and extensive theming variables for fonts, colors, and spacing.

```css
@import 'tailwindcss';

/* With AssetMapper... */
@source "../vendor/flowbite";
/* ... or with Webpack Encore */
/* @source "../../node_modules/flowbite"; */

@custom-variant dark (&:is(.dark *));

/* You can customize theming here see https://flowbite.com/docs/customize/theming/ */
@theme {
    --font-sans:
        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body:
        'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue',
        'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono:
        'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';

    /* TEXT VARIABLES */
    --text-2xs: 0.625rem;
    --spacing-8xl: 90rem;
    --leading-9: 36px; /* rem pls */
    --leading-7: 28px;
    --leading-8: 32px;
    --leading-6: 24px;
    --leading-4: 16px;
    --leading-none: 1px;
    --leading-5: 20px;
    --tracking-tighter: -0.8px;
    --leading-heading-none: 60px;
    --tracking-tight: -0.4px;

    /* BORDER RADIUS VARIABLES */
    --radius-0: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-base: 12px;
    --radius-lg: 16px;

    /* BORDER WIDTH VARIABLES */
    --default-border-width: 1px;

    /* TEXT COLORS VARIABLES */
    /* main text color */
    --color-body: var(--color-gray-600);
    --color-body-subtle: var(--color-gray-500);

    /* text heading colors */
    --color-heading: var(--color-gray-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-700);
    --color-fg-brand-strong: var(--color-blue-900);

    /* used for status colors */
    --color-fg-success: var(--color-emerald-700);
    --color-fg-success-strong: var(--color-emerald-900);
    --color-fg-danger: var(--color-rose-700);
    --color-fg-danger-strong: var(--color-rose-900);
    --color-fg-warning-subtle: var(--color-orange-600);
    --color-fg-warning: var(--color-orange-900);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-purple: var(--color-purple-600);
    --color-fg-cyan: var(--color-cyan-600);
    --color-fg-indigo: var(--color-indigo-600);
    --color-fg-pink: var(--color-pink-600);
    --color-fg-lime: var(--color-lime-600);

    /* BACKGROUND COLOR VARIABLES */
    /* used for neutral colors */
    --color-neutral-primary-soft: var(--color-white);
    --color-neutral-primary: var(--color-white);
    --color-neutral-primary-medium: var(--color-white);
    --color-neutral-primary-strong: var(--color-white);
    --color-neutral-secondary-soft: var(--color-gray-50);
    --color-neutral-secondary: var(--color-gray-50);
    --color-neutral-secondary-medium: var(--color-gray-50);
    --color-neutral-secondary-strong: var(--color-gray-50);
    --color-neutral-secondary-strongest: var(--color-gray-50);
    --color-neutral-tertiary-soft: var(--color-gray-100);
    --color-neutral-tertiary: var(--color-gray-100);
    --color-neutral-tertiary-medium: var(--color-gray-100);
    --color-neutral-quaternary: var(--color-gray-200);
    --color-neutral-quaternary-medium: var(--color-gray-200);
    --color-gray: var(--color-gray-300);

    /* used for brand colors */
    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);
}
```

--------------------------------

### Select field example with department options

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/field/README.md

Preview example showing a select field with a trigger, value placeholder, and a content group containing multiple items. The container has a min-height style to accommodate the dropdown.

```twig
<div class="w-full max-w-md" style="min-height: 420px">
    <twig:Field>
        <twig:Field:Label for="department">Department</twig:Field:Label>
        <twig:Select id="department">
            <twig:Select:Trigger class="w-full">
                <twig:Select:Value placeholder="Choose department" />
            </twig:Select:Trigger>
            <twig:Select:Content>
                <twig:Select:Group>
                    <twig:Select:Item value="engineering">Engineering</twig:Select:Item>
                    <twig:Select:Item value="design">Design</twig:Select:Item>
                    <twig:Select:Item value="marketing">Marketing</twig:Select:Item>
                    <twig:Select:Item value="sales">Sales</twig:Select:Item>
                    <twig:Select:Item value="support">Customer Support</twig:Select:Item>
                    <twig:Select:Item value="hr">Human Resources</twig:Select:Item>
                    <twig:Select:Item value="finance">Finance</twig:Select:Item>
                    <twig:Select:Item value="operations">Operations</twig:Select:Item>
                </twig:Select:Group>
            </twig:Select:Content>
        </twig:Select>
        <twig:Field:Description>
            Select your department or area of work.
        </twig:Field:Description>
    </twig:Field>
</div>
```

--------------------------------

### Dark mode CSS color variables for Flowbite 4

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/flowbite-4/INSTALL.md

CSS custom properties defining dark mode color variables for background and border colors, mapping semantic tokens to Tailwind gray/blue/emerald/rose/orange/purple/sky/teal/pink/cyan/fuchsia/indigo palettes. These variables are used to theme Flowbite components in dark mode.

```css
/* background color variables */
    --color-neutral-primary-soft: var(--color-gray-900);
    --color-neutral-primary: var(--color-gray-950);
    --color-neutral-primary-medium: var(--color-gray-800);
    --color-neutral-primary-strong: var(--color-gray-700);
    --color-neutral-secondary-soft: var(--color-gray-900);
    --color-neutral-secondary: var(--color-gray-950);
    --color-neutral-secondary-medium: var(--color-gray-800);
    --color-neutral-secondary-strong: var(--color-gray-700);
    --color-neutral-secondary-strongest: var(--color-gray-600);
    --color-neutral-tertiary-soft: var(--color-gray-900);
    --color-neutral-tertiary: var(--color-gray-800);
    --color-neutral-tertiary-medium: var(--color-gray-700);
    --color-neutral-quaternary: var(--color-gray-700);
    --color-neutral-quaternary-medium: var(--color-gray-600);
    --color-gray: var(--color-gray-600);
    --color-brand-softer: var(--color-blue-950);
    --color-brand-soft: var(--color-blue-900);
    --color-brand: var(--color-blue-600);
    --color-brand-medium: var(--color-blue-900);
    --color-brand-strong: var(--color-blue-700);
    --color-success-soft: var(--color-emerald-950);
    --color-success: var(--color-emerald-600);
    --color-success-medium: var(--color-emerald-900);
    --color-success-strong: var(--color-emerald-700);
    --color-danger-soft: var(--color-rose-950);
    --color-danger: var(--color-rose-700);
    --color-danger-medium: var(--color-rose-900);
    --color-danger-strong: var(--color-rose-800);
    --color-warning-soft: var(--color-orange-950);
    --color-warning: var(--color-orange-600);
    --color-warning-medium: var(--color-orange-900);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-gray-700);
    --color-dark: var(--color-gray-800);
    --color-dark-strong: var(--color-gray-700);
    --color-disabled: var(--color-gray-800);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-500);
    --color-pink: var(--color-pink-500);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-500);
    --color-indigo: var(--color-indigo-500);
    --color-orange: var(--color-orange-400);

    /* border color variables */
    --color-buffer: var(--color-gray-950);
    --color-buffer-medium: var(--color-gray-900);
    --color-buffer-strong: var(--color-gray-800);
    --color-muted: var(--color-gray-900);
    --color-light-subtle: var(--color-gray-900);
    --color-light: var(--color-gray-800);
    --color-light-medium: var(--color-gray-700);
    --color-default-subtle: var(--color-gray-900);
    --color-default: var(--color-gray-800);
    --color-default-medium: var(--color-gray-700);
    --color-default-strong: var(--color-gray-600);
    --color-success-subtle: var(--color-emerald-900);
    --color-danger-subtle: var(--color-rose-900);
    --color-warning-subtle: var(--color-orange-900);
    --color-brand-subtle: var(--color-blue-900);
    --color-brand-light: var(--color-blue-600);
    --color-dark-subtle: var(--color-gray-700);
    --color-dark-backdrop: var(--color-gray-950);
}
```

--------------------------------

### pnpm install --frozen-lockfile failure

Source: https://github.com/symfony/ux-toolkit/blob/3.x/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component trace, example 0__1.html

Error message from `pnpm install --frozen-lockfile` when the lockfile is out of date. The install stops with ERR_PNPM_OUTDATED_LOCKFILE because pnpm-lock.yaml does not match package.json.

```bash
ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
```

--------------------------------

### Text Skeleton Example

Source: https://github.com/symfony/ux-toolkit/blob/3.x/kits/shadcn/skeleton/README.md

Displays multiple lines of skeleton text placeholders.

```twig
<div class="flex w-full max-w-xs flex-col gap-2">
    <twig:Skeleton class="h-4 w-full" />
    <twig:Skeleton class="h-4 w-full" />
    <twig:Skeleton class="h-4 w-3/4" />
</div>
```
Tokens:
Raw