# Symfony UX

> Symfony UX is a collection of PHP and JavaScript packages to add rich UI experiences to Symfony applications. This site provides demos, installation guides, and a cookbook. For full documentation, see the official Symfony docs.

## Packages

- [Autocomplete](https://ux.symfony.com/autocomplete.md): Ajax-powered Form Select
- [CalendarLink](https://ux.symfony.com/calendar-link.md): Save the date, anywhere
- [Chart.js](https://ux.symfony.com/chartjs.md): Interactive charts with Chart.js
- [Icons](https://ux.symfony.com/icons.md): SVG icons made easy
- [Image Cropper](https://ux.symfony.com/cropperjs.md): Form Tools for cropping images
- [Live Components](https://ux.symfony.com/live-component.md): Interactive UI in PHP & Twig
- [Map](https://ux.symfony.com/map.md): Interactive Maps
- [Native](https://ux.symfony.com/native.md): Hotwire Native for Symfony
- [Notify](https://ux.symfony.com/notify.md): Native Browser Notifications
- [React](https://ux.symfony.com/react.md): Render React components from Twig
- [Stimulus](https://ux.symfony.com/stimulus.md): Central Bridge of Symfony UX
- [Stylized Dropzone](https://ux.symfony.com/dropzone.md): Upload Files with Style
- [Toolkit](https://ux.symfony.com/toolkit.md): Build your Design System.
- [Translator](https://ux.symfony.com/translator.md): Symfony Translations in JavaScript
- [Turbo](https://ux.symfony.com/turbo.md): Single-page Symfony app
- [Twig Components](https://ux.symfony.com/twig-component.md): Render Reusable UI Elements
- [Vue.js](https://ux.symfony.com/vue.md): Render Vue components from Twig

## Demos

- [Live Component Demos](https://ux.symfony.com/demos.md): Interactive demos showcasing Symfony UX Live Components

## Cookbook

- [Component Architecture](https://ux.symfony.com/cookbook/component-architecture.md): Rules and patterns for working with components

## Changelog

- [Changelog](https://ux.symfony.com/changelog.md): Recent releases and changes

## Toolkit

- [accordion (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/accordion.md): Build vertically collapsing sections powered by Bootstrap's Collapse plugin.
- [alert (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/alert.md): Provides contextual feedback messages for typical user actions.
- [badge (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/badge.md): A small count or label used to highlight status, counts, or short contextual information.
- [breadcrumb (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/breadcrumb.md): Indicates the current page's location within a navigational hierarchy.
- [button-group (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/button-group.md): Groups a series of buttons on a single line or in a vertical column.
- [button (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/button.md): Use Bootstrap button styles for actions in forms, dialogs, navigation, and more.
- [card (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/card.md): Build flexible content containers with optional headers, footers, images, and contextual styles.
- [carousel (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/carousel.md): Cycle through images, text, and other content with optional controls and indicators.
- [close-button (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/close-button.md): Provide an accessible control for dismissing content such as modals and alerts.
- [collapse (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/collapse.md): Toggle the visibility of content with Bootstrap's Collapse plugin.
- [dropdown (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/dropdown.md): Display contextual menus from buttons and links in any Bootstrap direction.
- [figure (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/figure.md): Display related visual content with an optional caption and responsive alignment.
- [list-group (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/list-group.md): Display a flexible series of content with active, disabled, actionable, and contextual states.
- [modal (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/modal.md): Add accessible dialog overlays for notifications, forms, and custom content.
- [navbar (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/navbar.md): A powerful, responsive navigation header with support for branding, navigation, forms, and collapsing content.
- [navs-tabs (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/navs-tabs.md): Build navigation components and accessible dynamic tabbed interfaces with Bootstrap.
- [offcanvas (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/offcanvas.md): Build responsive sliding panels for navigation, forms, and supplementary content.
- [pagination (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/pagination.md): Indicate that related content is split across multiple pages with accessible pagination links.
- [placeholder (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/placeholder.md): Uses loading placeholders to indicate that content may still be loading.
- [popover (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/popover.md): Display contextual Bootstrap content beside a trigger element.
- [progress (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/progress.md): Display task progress with accessible labels, stacked bars, contextual colors, and animation.
- [scrollspy (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/scrollspy.md): Update Bootstrap navigation links as a scrollable region moves between sections.
- [spinner (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/spinner.md): Indicate the loading state of a component or page with Bootstrap spinners.
- [toast (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/toast.md): Show lightweight Bootstrap notifications with optional headers and dismissal controls.
- [tooltip (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/tooltip.md): Add Bootstrap tooltips to focusable controls with configurable content and placement.
- [clipboard (Common)](https://ux.symfony.com/toolkit/kits/common/components/clipboard.md): A Stimulus behavior that copies text to the clipboard — either a value you give it or the content of an element — with optional copied feedback.
- [closeable (Common)](https://ux.symfony.com/toolkit/kits/common/components/closeable.md): A Stimulus behavior that removes its element from the page when dismissed, with optional delayed and automatic closing and an animated countdown bar.
- [logout-link (Common)](https://ux.symfony.com/toolkit/kits/common/components/logout-link.md): A link that logs the current user out through a secure POST form.
- [post-link (Common)](https://ux.symfony.com/toolkit/kits/common/components/post-link.md): A link submitted as a form, with optional HTTP method spoofing, CSRF protection, and a confirmation prompt.
- [tooltip (Common)](https://ux.symfony.com/toolkit/kits/common/components/tooltip.md): A Stimulus behavior that shows a tooltip from a `content` value — or straight from an element's native `title`. Powered by [Floating UI](https://floating-ui.com/): the tooltip is rendered outside the trigger (appended to `<body>`), so it's never clipped by an `overflow` ancestor, and it flips and shifts to stay in view. Put it right on the trigger — it opens on hover and keyboard focus by default — and style the injected `.tooltip` once, globally.
- [alert (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/alert.md): The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
- [avatar (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/avatar.md): Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
- [badge (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/badge.md): The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
- [button-group (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/button-group.md): The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
- [button (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/button.md): Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
- [card (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/card.md): Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
- [checkbox (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/checkbox.md): The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.
- [dropdown (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/dropdown.md): The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
- [indicator (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/indicator.md): Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
- [input (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/input.md): The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.
- [kbd (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/kbd.md): The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.
- [label (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/label.md): A text element that identifies form controls and other content.
- [modal (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/modal.md): Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles
- [pagination (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/pagination.md): Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
- [radio (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/radio.md): The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
- [select (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/select.md): Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
- [skeleton (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/skeleton.md): Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.
- [spinner (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/spinner.md): An indicator that can be used to show a loading state.
- [table (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/table.md): Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
- [tabs (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/tabs.md): Use the following default tabs component example to show a list of links that the user can navigate from on your website.
- [textarea (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/textarea.md): The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.
- [toggle (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/toggle.md): Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
- [accordion (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [alert-dialog (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [alert (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/alert.md): Displays a callout for user attention.
- [aspect-ratio (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/aspect-ratio.md): Displays content within a desired ratio.
- [avatar (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/avatar.md): An image element with a fallback for representing the user.
- [badge (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/badge.md): Displays a badge or a component that looks like a badge.
- [breadcrumb (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [button-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/button-group.md): A container that groups related buttons together with consistent styling.
- [button (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/button.md): Displays a button or a component that looks like a button.
- [card (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/card.md): Displays a card with header, content, and footer.
- [checkbox (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [collapsible (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/collapsible.md): An interactive component which expands/collapses a panel.
- [combobox (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [dialog (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [empty (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/empty.md): Use the Empty component to display an empty state.
- [field (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [hover-card (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/hover-card.md): For sighted users to preview content available behind a link.
- [input-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [input (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [item (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/item.md): A versatile component for displaying content with media, title, description, and actions.
- [kbd (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/kbd.md): Used to display textual user input from keyboard.
- [label (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/label.md): Renders an accessible label associated with controls.
- [pagination (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/pagination.md): Pagination with page navigation, next and previous links.
- [progress (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [radio-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [resizable (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [select (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/select.md): A dropdown control that allows users to choose from a list of options.
- [separator (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/separator.md): Visually or semantically separates content.
- [skeleton (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/skeleton.md): Use to show a placeholder while content is loading.
- [sonner (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/sonner.md): A Sonner-style stacked toast notification system with auto-dismiss, swipe-to-dismiss, rich colors, and JS or server-render support.
- [spinner (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/spinner.md): An indicator that can be used to show a loading state.
- [switch (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [table (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/table.md): A responsive table component.
- [tabs (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [textarea (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [toggle-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [toggle (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/toggle.md): A two-state button that can be either on or off.
- [tooltip (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [typography (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/typography.md): Styled HTML text elements for headings, paragraphs, quotes, lists and inline code.

## Optional

- [Official Symfony UX Documentation](https://symfony.com/bundles/ux): Full reference documentation for all Symfony UX packages
- [Symfony UX GitHub Repository](https://github.com/symfony/ux): Source code and issue tracker

---

<source url="https://ux.symfony.com/packages.md">
# Symfony UX Packages

> A collection of PHP and JavaScript packages to add rich UI experiences to Symfony applications.

## Active Packages

- [Autocomplete](https://ux.symfony.com/autocomplete.md): Ajax-powered Form Select
- [CalendarLink](https://ux.symfony.com/calendar-link.md): Save the date, anywhere
- [Chart.js](https://ux.symfony.com/chartjs.md): Interactive charts with Chart.js
- [Icons](https://ux.symfony.com/icons.md): SVG icons made easy
- [Image Cropper](https://ux.symfony.com/cropperjs.md): Form Tools for cropping images
- [Live Components](https://ux.symfony.com/live-component.md): Interactive UI in PHP & Twig
- [Map](https://ux.symfony.com/map.md): Interactive Maps
- [Native](https://ux.symfony.com/native.md): Hotwire Native for Symfony
- [Notify](https://ux.symfony.com/notify.md): Native Browser Notifications
- [React](https://ux.symfony.com/react.md): Render React components from Twig
- [Stimulus](https://ux.symfony.com/stimulus.md): Central Bridge of Symfony UX
- [Stylized Dropzone](https://ux.symfony.com/dropzone.md): Upload Files with Style
- [Toolkit](https://ux.symfony.com/toolkit.md): Build your Design System.
- [Translator](https://ux.symfony.com/translator.md): Symfony Translations in JavaScript
- [Turbo](https://ux.symfony.com/turbo.md): Single-page Symfony app
- [Twig Components](https://ux.symfony.com/twig-component.md): Render Reusable UI Elements
- [Vue.js](https://ux.symfony.com/vue.md): Render Vue components from Twig

## Removed Packages

- **Lazy Image**: Delay Loading with Blurhash — [Migration guide](https://github.com/symfony/ux-lazy-image#readme)
- **Svelte**: Render Svelte components from Twig — [Migration guide](https://github.com/symfony/ux-svelte#readme)
- **Swup Integration**: Stylized Page Transitions — [Migration guide](https://github.com/symfony/ux-swup#readme)
- **Toggle Password**: Password Visibility Switch — [Migration guide](https://github.com/symfony/ux-toggle-password#readme)
- **Typed**: Animated Typing with Typed.js — [Migration guide](https://github.com/symfony/ux-typed#readme)

</source>

<source url="https://ux.symfony.com/documentation.md">
# Symfony UX Documentation

> Full documentation for all Symfony UX packages is available on [symfony.com](https://symfony.com/bundles#symfony-ux-bundles).

## Packages

- [Autocomplete](https://symfony.com/bundles/ux-autocomplete/current/index.html): Ajax-powered Form Select
- [CalendarLink](https://symfony.com/bundles/ux-calendar-link/current/index.html): Save the date, anywhere
- [Chart.js](https://symfony.com/bundles/ux-chartjs/current/index.html): Interactive charts with Chart.js
- [Icons](https://symfony.com/bundles/ux-icons/current/index.html): SVG icons made easy
- [Image Cropper](https://symfony.com/bundles/ux-cropperjs/current/index.html): Form Tools for cropping images
- [Live Components](https://symfony.com/bundles/ux-live-component/current/index.html): Interactive UI in PHP & Twig
- [Map](https://symfony.com/bundles/ux-map/current/index.html): Interactive Maps
- [Native](https://symfony.com/bundles/ux-native/current/index.html): Hotwire Native for Symfony
- [Notify](https://symfony.com/bundles/ux-notify/current/index.html): Native Browser Notifications
- [React](https://symfony.com/bundles/ux-react/current/index.html): Render React components from Twig
- [Stimulus](https://symfony.com/bundles/StimulusBundle): Central Bridge of Symfony UX
- [Stylized Dropzone](https://symfony.com/bundles/ux-dropzone/current/index.html): Upload Files with Style
- [Toolkit](https://symfony.com/bundles/ux-toolkit/current/index.html): Build your Design System.
- [Translator](https://symfony.com/bundles/ux-translator/current/index.html): Symfony Translations in JavaScript
- [Turbo](https://symfony.com/bundles/ux-turbo/current/index.html): Single-page Symfony app
- [Twig Components](https://symfony.com/bundles/ux-twig-component/current/index.html): Render Reusable UI Elements
- [Vue.js](https://symfony.com/bundles/ux-vue/current/index.html): Render Vue components from Twig

## Deprecated and Removed Packages

- **Lazy Image**: Delay Loading with Blurhash — [Migration guide](https://github.com/symfony/ux-lazy-image#readme)
- **Svelte**: Render Svelte components from Twig — [Migration guide](https://github.com/symfony/ux-svelte#readme)
- **Swup Integration**: Stylized Page Transitions — [Migration guide](https://github.com/symfony/ux-swup#readme)
- **Toggle Password**: Password Visibility Switch — [Migration guide](https://github.com/symfony/ux-toggle-password#readme)
- **Typed**: Animated Typing with Typed.js — [Migration guide](https://github.com/symfony/ux-typed#readme)

</source>

<source url="https://ux.symfony.com/autocomplete.md">
# Autocomplete

> Ajax-powered Form Select

Ajax-powered, auto-completable `select` elements

## Installation

```bash
composer require symfony/ux-autocomplete
```

## Links

- [Demos and examples](https://ux.symfony.com/autocomplete)
- [Official documentation](https://symfony.com/bundles/ux-autocomplete/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-autocomplete)

</source>

<source url="https://ux.symfony.com/calendar-link.md">
# CalendarLink

> Save the date, anywhere

Let users add your events to their calendar of choice in one click.

## Installation

```bash
composer require symfony/ux-calendar-link
```

## Links

- [Demos and examples](https://ux.symfony.com/calendar-link)
- [Official documentation](https://symfony.com/bundles/ux-calendar-link/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-calendar-link)

</source>

<source url="https://ux.symfony.com/chartjs.md">
# Chart.js

> Interactive charts with Chart.js

Easy charts with Chart.js

## Installation

```bash
composer require symfony/ux-chartjs
```

## Links

- [Demos and examples](https://ux.symfony.com/chartjs)
- [Official documentation](https://symfony.com/bundles/ux-chartjs/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-chartjs)
- [Chart.js documentation.](https://www.chartjs.org/)

</source>

<source url="https://ux.symfony.com/icons.md">
# Icons

> SVG icons made easy

Render SVG icons seamlessly from your Twig templates.

## Installation

```bash
composer require symfony/ux-icons
```

## Links

- [Demos and examples](https://ux.symfony.com/icons)
- [Official documentation](https://symfony.com/bundles/ux-icons/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-icons)

</source>

<source url="https://ux.symfony.com/cropperjs.md">
# Image Cropper

> Form Tools for cropping images

Form Type and tools for cropping images

## Installation

```bash
composer require symfony/ux-cropperjs
```

## Links

- [Demos and examples](https://ux.symfony.com/cropperjs)
- [Official documentation](https://symfony.com/bundles/ux-cropperjs/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-cropperjs)
- [Cropper.js documentation.](https://github.com/fengyuanchen/cropperjs)

</source>

<source url="https://ux.symfony.com/live-component.md">
# Live Components

> Interactive UI in PHP & Twig

Build dynamic interfaces with zero JavaScript

## Installation

```bash
composer require symfony/ux-live-component
```

## Links

- [Demos and examples](https://ux.symfony.com/live-component)
- [Official documentation](https://symfony.com/bundles/ux-live-component/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-live-component)

</source>

<source url="https://ux.symfony.com/map.md">
# Map

> Interactive Maps

Render interactive Maps in PHP with Leaflet or Google Maps.

## Installation

```bash
composer require symfony/ux-map
```

## Links

- [Demos and examples](https://ux.symfony.com/map)
- [Official documentation](https://symfony.com/bundles/ux-map/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-map)

</source>

<source url="https://ux.symfony.com/native.md">
# Native

> Hotwire Native for Symfony

Build native mobile apps that wrap your Symfony web application

## Installation

```bash
composer require symfony/ux-native
```

## Links

- [Demos and examples](https://ux.symfony.com/native)
- [Official documentation](https://symfony.com/bundles/ux-native/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-native)
- [Hotwire Native documentation.](https://native.hotwired.dev/)

</source>

<source url="https://ux.symfony.com/notify.md">
# Notify

> Native Browser Notifications

Trigger native browser notifications from inside PHP

## Installation

```bash
composer require symfony/ux-notify
```

## Links

- [Demos and examples](https://ux.symfony.com/notify)
- [Official documentation](https://symfony.com/bundles/ux-notify/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-notify)

</source>

<source url="https://ux.symfony.com/react.md">
# React

> Render React components from Twig

Quickly render `<React />` components &amp; pass them props.

## Installation

```bash
composer require symfony/ux-react
```

## Links

- [Demos and examples](https://ux.symfony.com/react)
- [Official documentation](https://symfony.com/bundles/ux-react/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-react)
- [Go deeper with the React docs.](https://reactjs.org/)

</source>

<source url="https://ux.symfony.com/stimulus.md">
# Stimulus

> Central Bridge of Symfony UX

Integration with Stimulus for HTML-powered controllers

## Installation

```bash
composer require symfony/stimulus-bundle
```

## Links

- [Demos and examples](https://ux.symfony.com/stimulus)
- [Official documentation](https://symfony.com/bundles/StimulusBundle)
- [GitHub repository](https://github.com/symfony/ux-stimulus)
- [More than 40 videos to master Stimulus.](https://symfonycasts.com/screencast/stimulus)

</source>

<source url="https://ux.symfony.com/dropzone.md">
# Stylized Dropzone

> Upload Files with Style

Form type for stylized "drop zone" for file uploads

## Installation

```bash
composer require symfony/ux-dropzone
```

## Links

- [Demos and examples](https://ux.symfony.com/dropzone)
- [Official documentation](https://symfony.com/bundles/ux-dropzone/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-dropzone)

</source>

<source url="https://ux.symfony.com/toolkit.md">
# Toolkit

> Build your Design System.

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

## Installation

```bash
composer require --dev symfony/ux-toolkit
```

## Links

- [Demos and examples](https://ux.symfony.com/toolkit)
- [GitHub repository](https://github.com/symfony/ux-toolkit)

</source>

<source url="https://ux.symfony.com/translator.md">
# Translator

> Symfony Translations in JavaScript

Use Symfony's translations in JavaScript

## Installation

```bash
composer require symfony/ux-translator
```

## Links

- [Demos and examples](https://ux.symfony.com/translator)
- [Official documentation](https://symfony.com/bundles/ux-translator/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-translator)

</source>

<source url="https://ux.symfony.com/turbo.md">
# Turbo

> Single-page Symfony app

Integration with Turbo for single-page-app and real-time experience

## Installation

```bash
composer require symfony/ux-turbo
```

## Links

- [Demos and examples](https://ux.symfony.com/turbo)
- [Official documentation](https://symfony.com/bundles/ux-turbo/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-turbo)
- [Documentation specifically for the Turbo JavaScript library.](https://turbo.hotwired.dev/handbook/introduction)
- [Go deep into all 3 parts of Turbo.](https://symfonycasts.com/screencast/turbo)

</source>

<source url="https://ux.symfony.com/twig-component.md">
# Twig Components

> Render Reusable UI Elements

Create PHP classes that can render themselves

## Installation

```bash
composer require symfony/ux-twig-component
```

## Links

- [Demos and examples](https://ux.symfony.com/twig-component)
- [Official documentation](https://symfony.com/bundles/ux-twig-component/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-twig-component)

</source>

<source url="https://ux.symfony.com/vue.md">
# Vue.js

> Render Vue components from Twig

Quickly render `<Vue />` components &amp; pass them props.

## Installation

```bash
composer require symfony/ux-vue
```

## Links

- [Demos and examples](https://ux.symfony.com/vue)
- [Official documentation](https://symfony.com/bundles/ux-vue/current/index.html)
- [GitHub repository](https://github.com/symfony/ux-vue)
- [Go deeper with the Vue.js docs.](https://vuejs.org/)

</source>

<source url="https://ux.symfony.com/demos.md">
# Symfony UX Demos

> Interactive demos showcasing Symfony UX components and features.

## Infinite Scroll - 2/2

Loading on-scroll, flexible layout grid, colorfull loading animations and... more T-Shirts!

The second and final part of the **Infinite Scroll Series**, with a new range of (lovely) T-Shirts!
Now with `automatic loading on scroll`, a new trick and amazing `loading animations`!

Tags: grid, pagination, loading, scroll

- [View demo](https://ux.symfony.com/demos/live-component/infinite-scroll-2)

## Infinite Scroll - 1/2

Load more items as you scroll down the page.

Infinite scroll allows users to continuously load content as they scroll down the page.
`Part One` of this demo shows how to `append new items` to the page with a [`LiveComponent`](/live-component).

Tags: grid, pagination, navigation

- [View demo](https://ux.symfony.com/demos/live-component/infinite-scroll)

## Live Memory Card Game

A Memorable Game UX with Live Components!

A Memorable Game UX with Live Components! Discover how to use Live Components to create a game with a vibrant interface,
 rich interactions and real-time updates. This journey will take you through many features of Live Components, and you'll
  learn how to use them to create a fun and engaging game.

Tags: game, time, events, LiveAction

- [View demo](https://ux.symfony.com/demos/live-component/live-memory)

## Auto-Validating Form

Create a form that validates each field in-real-time as the user enters data!

Enter a bad email or leave the password empty, and see how the
form validates in real time!

This renders a normal `Symfony` form but with extras added on top,
all generated from Symfony & Twig.

Tags: form, validation, inline

- [View demo](https://ux.symfony.com/demos/live-component/auto-validating-form)

## Embedded CollectionType Form

Create embedded forms with functional "add" and "remove" buttons all in Twig.

Unlock the potential of Symfony's [`CollectionType`](https://symfony.com/doc/current/reference/forms/types/collection.html) while writing zero JavaScript.
This demo shows off adding and removing items entirely in PHP & Twig.

Tags: form, collection

- [View demo](https://ux.symfony.com/demos/live-component/form-collection-type)

## Dependent Form Fields

After selecting the first field, automatically reload the options for a second field.

Unleash the power of form events, thanks to [`LiveComponent`](/live-component) and [`DynamicForms`](https://github.com/SymfonyCasts/dynamic-forms).

Tags: form, field, events

- [View demo](https://ux.symfony.com/demos/live-component/dependent-form-fields)

## Up & Down Voting

Save up & down votes live in pure Twig & PHP.

With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on.
This uses a [LiveAction](https://symfony.com/bundles/ux-live-component/current/index.html#actions) to save everything with Ajax.

Tags: form, LiveAction

- [View demo](https://ux.symfony.com/demos/live-component/voting)

## Inline Editing

Activate an inline editing form with real-time validation.

Inline editing? Simple. Use LiveComponents to track if you're in "edit" mode, let
the user update any fields on your entity, and save through a `LiveAction`.

Tags: form, inline, LiveAction

- [View demo](https://ux.symfony.com/demos/live-component/inline-edit)

## Auto-Updating Chart

Render & Update a Chart.js chart in real-time.

What do you get with Live Components + UX Chart.js + UX Autocomplete?

An auto-updating chart that you will ❤️.

Tags: chart, data, LiveAction, stimulus

- [View demo](https://ux.symfony.com/demos/live-component/chartjs)

## Invoice Creator

Create an invoice + line items that updates as you type.

Create or edit an `Invoice` entity along with child components for each related `InvoiceItem` entity.

Children components emit events to communicate to the parent and everything is saved in a `saveInvoice` LiveAction method.

Tags: form, entity, events, LiveAction

- [View demo](https://ux.symfony.com/demos/live-component/invoice)

## Product Form + Category Modal

Create a Category on the fly - from inside a product form - via a modal.

Open a child modal component to create a new Category.

Tags: form, entity, events, modal

- [View demo](https://ux.symfony.com/demos/live-component/product-form)

## Uploading files

Upload file from your live component through a LiveAction.

File uploads are tricky. Submit them to a `#[LiveAction]` with the `files` modifier
                on `data-live-action` then process them.

Tags: form, file, upload, LiveAction

- [View demo](https://ux.symfony.com/demos/live-component/upload)


</source>

<source url="https://ux.symfony.com/cookbook/component-architecture.md">
# Component Architecture

> Rules and patterns for working with components

Tags: JavaScript, Symfony

---
title: Component Architecture
description: Rules and patterns for working with components
image: images/cookbook/component-architecture.png
tags: 
    - JavaScript
    - Symfony
author: Mathéo Daninos
published_at: '2024-08-02'
---

## Introduction

In Symfony UX, there are two packages: [TwigComponents](https://symfony.com/bundles/ux-twig-component/current/index.html) and [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html).
These packages allow you to create reusable components in your Symfony application.
However, component architecture is not exclusive to Symfony; it's a design pattern that can be applied to any programming language or framework.
The JavaScript world has implemented this architecture for a long time, across many frameworks like React, Vue, or Svelte.
A set of rules and patterns has already been defined for working with components. This is why Symfony UX tries to adhere closely to these rules.
Let's explore what these rules are!

## 4 Rules

### Composition

A page is no longer just a page but rather a collection of small, reusable components.
These components can be assembled to form a page. For example, there could be a component for the title and another for the training list.
The training list component could even be composed of smaller components, such as a training card component.
The goal is to create the most atomic and reusable components possible.

***How does it work in Symfony?***

In Symfony, you can have an `Alert` component, for example, with the following template:

```twig
<div class="alert alert-{{ type }}">
    <twig:ux:icon name="{{ icon }}" />
    {{ message }}
</div>
```

So here you can see we have an `Alert` component that itself uses an Icon component.
Or you can compose with the following syntax:

```twig
<twig:Alert>
    <twig:ux:icon name="info"/>
    <twig:Button>
        <twig:ux:icon name="close" />
    </twig:Button>
</twig:Alert>
```

So here we have a `Alert` component, and we provide the content of this component with two other components.

### Independence

This is a really important rule and not an obvious one. Your component should live in its own context; it
should not be aware of the rest of the page. You should be able to take a component from one page to another, and it should work exactly the same.
This rule makes your component truly reusable.

***How does it work in Symfony?***

Symfony keeps the context of the page within the context of your component. So it is your own responsibility to follow these rules.
Note that if there are conflicts between a variable from the context page and your component, your component context overrides the page context.

### Props

Our component must remain independent, but we can customize its props.
For example, consider a button component. You want your component to look the same on every page, with the only change being the label. 
To do this, you can declare a `label` prop in your button component.
When you use your button component, you can pass the label you want as a prop. The component will take this prop at initialization and keep it throughout its lifecycle.

***How does it work in Symfony?***

Let's take the example of the `Alert` component as an [anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components).
We have the following template:

```twig
{% props type, icon, message %}

<div class="alert alert-{{ type }}">
    <twig:ux:icon name="{{ icon }}" />
    {{ message }}
</div>
```

Just like that, we define three props for our `Alert` component. We can now use it like this:

```twig
<twig:Alert type="success" icon="check" message="Your account has been created." />
```

If your component is not anonymous but a class component, you can define props by adding properties to your class.

```php
#[AsTwigComponent]
class Alert
{
    public string $type;
    public string $icon;
    public string $message;
}
```

There is something important to note with props: They should only flow in one direction, from parent to child. Props should never go up. **If your child needs to change something in the parent, you should use events.**

### State

A state is pretty much like a prop, but the main difference is that a state can 
change during the life of the component. Let's take the example of a button component.
You can have a `loading` state that can be `true` or `false`. When the button is clicked
the `loading` state can be set to `true`, and the button can display a loader instead of the label.
When the loading is done, the `loading` state can be set to `false`, and the button can display the label again.

***How does it work in Symfony?***

In Symfony, you have two different approaches to handle state. The first is to use Stimulus directly in your component. We recommend setting a Stimulus controller at the root of your component.

```twig
{% props label %}

<button data-controller="button" data-button-label-value="{{ label }}">
    {{ label }}
</button>
```

Then, you can define your controller like this:

```js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static values = { label: String };

    connect() {
        this.element.textContent = this.labelValue;
    }

    loading() {
        this.element.textContent = 'Loading...';
    }
}
```

The second approach is to use the [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html) package.
How to choose between the two? If your component doesn't need any backend logic 
for its state, keep it simple and use the Stimulus approach. But if you need to handle
backend logic for your state, use LiveComponent.
With LiveComponent, a live prop is a state. So if you want to store the number of clicks on a button you can do
so with the following component:

```php
<?php

#[AsLiveComponent]
class Button
{
    use DefaultActionTrait;
    
    #[LiveProp]
    public int $clicks = 0;

    #[LiveAction]
    public function increment(): void
    {
        $this->clicks++;

        $this->save();
    }
}
```

## Conclusion

Even in Symfony, you can use component architecture.
Following these rules helps your front-end developers work on a codebase they are familiar with since these rules are 
already widely used in the JavaScript world.


</source>

<source url="https://ux.symfony.com/changelog.md">
# Symfony UX Changelog

> Recent releases and changes to Symfony UX packages.

## v3.4.0 (v3.4.0)

Released: 2026-07-31

**Changelog** (https://github.com/symfony/ux/compare/v3.3.0...v3.4.0)

 * feature #3740 [Toolkit][Common] Add `clipboard` and `tooltip` recipes (@kbond)
 * feature #3733 [Toolkit] Document Stimulus controller CSS classes and outlets in the API reference (@kbond)
 * feature #3741 [Icons] Add `auto_lock` to persist on-demand icons (@Kocal)
 * feature #3395 [TwigComponent] Support component tag names from expressions and component objects (@andreybotanic)
 * feature #3736 [Toolkit] Rework and normalize usage of `attributes.defaults()` in kits components (@seb-jean, @Kocal)
 * minor #3735  Add sync-packages.php to normalize packages .gitattributes (@Kocal)
 * bug #3730  Fix broken assets/tsconfig.json reference breaking webpack 5.109+ builds (@zalesak)
 * minor #3734 [Toolkit] Remove `height` preview option (@Kocal)
 * feature #3724 [Toolkit] Document Stimulus controllers in the recipe API reference (@kbond)
 * feature #3725 [Toolkit][Common] Add `closeable` recipe (@kbond)
 * feature #3716 [Translator] Make the component non-experimental (@Kocal)
 * feature #3713 [Toolkit] Boostrap Toolkit (@smnandre, @Kocal)
 * bug #3720 [Toolkit] Fix suggested frontend installation commands (@smnandre)
 * feature #3719 [Toolkit] Support kit-level dependencies (@smnandre)
 * bug #3721 [Toolkit] Require the correct twig/html-extra version for `html_attr_*` filters (@Kocal)
 * feature #3718 [Toolkit] Add a documentation rendering layer so kits can describe themselves (@Kocal)
 * feature #3714 [React][Vue] Add support for `import.meta.glob()` (Symfony Reprise) (@Kocal)
 * feature #3707 [Toolkit][Common] Add the `common` kit with `logout-link` and `post-link` recipes (@kbond)
 * bug #3710 [Toolkit][Shadcn] Fix `Table:Cell` and `Table:Head` class attibutes merging (@stephen-lewis)
 * feature #3709 [Toolkit] Add `ClassMergeSpacingChecker` checker to the linter (@Kocal)


## v3.3.0 (v3.3.0)

Released: 2026-07-14

**Changelog** (https://github.com/symfony/ux/compare/v3.2.0...v3.3.0)

 * feature #3705 [StimulusBundle] Add support for Symfony Reprise (@Kocal)
 * feature #3702 [StimulusBundle] Support preserved `/*! stimulusFetch: 'lazy' */` syntax (@IndraGunawan)
 * bug #3703 [StimulusBundle] Sort custom controllers to keep the generated loader deterministic (@Amoifr)
 * bug #3676 [LiveComponent] Avoid 500 errors on malformed hydration payloads (@Amoifr)
 * bug #3688 [LiveComponent] Fix data-loading scanner ignoring data-live-ignore subtrees (@Amoifr)
 * bug #3690 [LiveComponent] Fix support for nullable collection properties on component (@rogierknoester)
 * feature #3700 [Toolkit] Resolve `ux:install` recipe name case-insensitively and suggest alternatives (@Kocal)
 * feature #3696 [Toolkit][Shadcn] Dismiss the `tooltip` on scroll and resize, and stop it from intercepting pointer events while hidden (@Kocal)
 * feature #3694 [Toolkit] Refactor (again) but improve ``@prop`` and ``@block`` comments format (@Kocal)
 * bug #3685 [Autocomplete] Fix LIKE ESCAPE clause breaking search on PostgreSQL (@Amoifr)
 * feature #3477 [Shadcn] Add Sonner (@makraz)
 * minor #3693 [Toolkit] Make component rendering snapshots independent from the libxml version (@Kocal)
 * feature #3482 [Toolkit][Shadcn] Add Combobox (@makraz)


## v2.36.2 (v2.36.2)

Released: 2026-07-08

**Changelog** (https://github.com/symfony/ux/compare/v2.36.1...v2.36.2)

 * bug #3685 [Autocomplete] Fix LIKE ESCAPE clause breaking search on PostgreSQL (@Amoifr)


## v3.2.0 (v3.2.0)

Released: 2026-06-19

**Changelog** (https://github.com/symfony/ux/compare/v3.1.0...v3.2.0)

 * security #cve-2026-55877 [Icons] Sanitize Iconify SVG output and unify icon creation (@Kocal)
 * security #cve-2026-55878 [Toolkit] Harden recipe installer against path traversal (@Kocal)
 * bug #3682 [Toolkit][Shadcn] Fix position and phantom text-node in `tooltip` recipe (@Kocal)
 * feature #3602 [TwigComponent] Allow standalone usage with any PSR-11 container (@guillaume-sainthillier)
 * bug #3673 [Encore] Pin vue to <3.5.36 to workaround broken upstream publish (@Kocal)
 * bug #3672 [Toolkit][Flowbite4] Fix linting issues (@Kocal)
 * feature #3671 [Toolkit] Allow declaring kit-global dependencies in kit manifest (@Kocal)
 * bug #3659 [Toolkit] Consider recipe deps in StimulusControllerChecker (@Kocal)
 * feature #3655 [Toolkit] Add lint kit command and CI lint workflow (@Kocal)
 * bug #3652 [Toolkit][Shadcn] Fix manifest dependencies (@seb-jean)
 * feature #3600 [TwigComponent] Expose pre/embedded render methods on `ComponentRendererInterface` (@treztreiz)
 * bug #3614 [Turbo] Conflict with Mercure >=0.7.0 <0.7.2 (@Kocal)
 * feature #3611 [Native] Rename `ux-native:dump` command to `ux:native:build-configs` (@Kocal)


## v2.36.1 (v2.36.1)

Released: 2026-06-19

**Changelog** (https://github.com/symfony/ux/compare/v2.36.0...v2.36.1)

 * security #cve-2026-55877 [Icons] Sanitize Iconify SVG output and unify icon creation (@Kocal)
 * security #cve-2026-55878 [Toolkit] Harden recipe installer against path traversal (@Kocal)


## v3.1.0 (v3.1.0)

Released: 2026-05-29

**Changelog** (https://github.com/symfony/ux/compare/v3.0.0...v3.1.0)

 * security #557 [LiveComponent] Require X-Requested-With header to prevent CSRF (@Kocal)
 * security #cve-2026-49216 [Autocomplete] Fix XSS via unescaped AJAX response data (@Kocal)
 * security #cve-2026-49208 [LiveComponent] Parse format-less date LiveProps strictly with RFC 3339 (@Kocal)
 * security #cve-2026-49209 [LiveComponent] Cap the number of actions per `_batch` request (@Kocal)
 * security #cve-2026-49210 [LiveComponent] Reject malicious child component tags (@Kocal)
 * security #cve-2026-49212 [LiveComponent] Bind HMAC checksum to component name and slot (@Kocal)
 * security #cve-2026-49211 [Autocomplete] Escape LIKE wildcards in the search query (@Amoifr)
 * feature #3601 [Translator] Add `ux:translator:warm-cache` command (@Kocal)
 * feature #3432 [LiveComponent] Improve form validation error messages in exceptions (@PierreCapel)
 * feature #3455  Use `twig.safe_class` tag and move `setLexer` to `TwigComponentPass` (@GromNaN)
 * feature #3586 [Toolkit][Shadcn] Align `button-group` with shadcn reference (@seb-jean)
 * feature #3589 [Toolkit][Shadcn] Align `toggle-group` with shadcn reference (@seb-jean)
 * feature #3587 [Toolkit][Shadcn] Align `hover-card` with shadcn reference (@seb-jean)
 * feature #3584 [Toolkit][Shadcn] Align `collapsible` with shadcn reference (@seb-jean)
 * feature #3561 [Toolkit][Shadcn] Align `table` with shadcn reference (@seb-jean)
 * feature #3563 [Toolkit][Shadcn] Align `skeleton` with shadcn reference (@seb-jean)
 * feature #3583 [Toolkit][Shadcn] Align `dialog` with shadcn reference (@seb-jean)
 * feature #3585 [Toolkit][Shadcn] Align `empty` with shadcn reference (@seb-jean)
 * bug #3566 [LiveComponent] Make `LiveComponentSubscriber` safe-by-default (@Kocal)
 * feature #3591 [Toolkit][Shadcn] Align `switch` with shadcn reference (@seb-jean)
 * feature #3592 [Toolkit][Shadcn] Align `field` with shadcn reference (@seb-jean)
 * feature #3593 [Toolkit][Shadcn] Align `radio-group` with shadcn reference (@seb-jean)
 * feature #3594 [Toolkit][Shadcn] Align `input-group` with shadcn reference (@seb-jean)
 * feature #3590 [Toolkit][Shadcn] Align `input` with shadcn reference (@seb-jean)
 * feature #3559 [Toolkit][Shadcn] Align `item` with shadcn reference (@seb-jean)
 * feature #3574 [Toolkit][Shadcn] Align `label` with shadcn reference (@seb-jean)
 * feature #3573 [Toolkit][Shadcn] Align `spinner` with shadcn reference (@seb-jean)
 * feature #3576 [Toolkit][Shadcn] Align `checkbox` with shadcn reference (@seb-jean)
 * feature #3577 [Toolkit][Shadcn] Align `progress` with shadcn reference (@seb-jean)
 * feature #3581 [Toolkit][Shadcn] Align `kbd` with shadcn reference (@seb-jean)
 * feature #3553 [Toolkit][Shadcn] Align `alert-dialog` with shadcn reference (@seb-jean)
 * feature #3551 [Toolkit][Shadcn] Align `accordion` with shadcn reference (@seb-jean)
 * feature #3539 [Toolkit][Shadcn] Align `separator` with shadcn reference (@seb-jean)
 * feature #3552 [Toolkit][Shadcn] Align `alert` with shadcn reference (@seb-jean)
 * feature #3554 [Toolkit][Shadcn] Align `aspect-ratio` with shadcn reference (@seb-jean)
 * feature #3555 [Toolkit][Shadcn] Align `avatar` with shadcn reference (@seb-jean)
 * feature #3556 [Toolkit][Shadcn] Align `badge` with shadcn reference (@seb-jean)
 * feature #3557 [Toolkit][Shadcn] Align `breadcrumb` with shadcn reference (@seb-jean)
 * feature #3558 [Toolkit][Shadcn] Align `button` with shadcn reference (@seb-jean)
 * feature #3564 [Toolkit][Shadcn] Align `pagination` with shadcn reference (@seb-jean)
 * feature #3567 [Toolkit][Shadcn] Align `tabs` with shadcn reference (@seb-jean)
 * feature #3568 [Toolkit][Shadcn] Align `tooltip` with shadcn reference (@seb-jean)
 * feature #3569 [Toolkit][Shadcn] Align `textarea` with shadcn reference (@seb-jean)
 * feature #3570 [Toolkit][Shadcn] Align `resizable` with shadcn reference (@seb-jean)
 * bug #3565 [Autocomplete] Use `hash_equals()` to compare the `extra_options` checksum (@Amoifr)
 * feature #3560 [Toolkit][Shadcn] Align `toggle` with shadcn reference (@seb-jean)
 * feature #3538 [Toolkit][Shadcn] Align `card` with shadcn reference (@seb-jean)
 * feature #3505 [Turbo] Add `<turbo-mercure-stream-source>` custom element (@seb-jean)
 * feature #3531 [Toolkit] Add `version-added` key in toolkit manifest (@MrYamous)
 * feature #3460 [CalendarLink] Add component (@zairigimad)
 * bug #3508 [LiveComponent] Fix dynamic template resolution when using "loading" attribute (@xDeSwa)
 * bug #3500 [TwigComponent] Include attribute name in null value error message (@IndraGunawan)
 * feature #3527 [Toolkit][Shadcn] Rework `collapsible` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3526 [Toolkit][Shadcn] Rework `tooltip` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3525 [Toolkit][Shadcn] Rework `alert-dialog` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3524 [Toolkit][Shadcn] Rework `dialog` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3523 [Toolkit][Shadcn] Rework `accordion` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3528 [Toolkit][Shadcn] Rework `toggle-group` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3521 [Toolkit][Shadcn] Rework `tabs` recipe to use `provide()`/`inject()` (@Kocal)
 * feature #3512 [TwigComponent] Add `provide()` and `inject()` Twig functions (@Kocal)
 * feature #3478 [Toolkit][Shadcn] Add hover-card recipe (@Amoifr)
 * feature #3485 [Toolkit][Shadcn] Add resizable recipe (@Amoifr)
 * feature #3462 [Turbo] Add TurboFrame service to detect Turbo Frame requests (@seb-jean)
 * feature #3439 [Turbo] Add minimal frame layout template (@seb-jean)
 * feature #3464 [Toolkit][Shadcn] Add radio-group, collapsible, typography and toggle-group recipes (@Amoifr)
 * feature #3442 [LiveComponent] Use `aria-busy` attribute during component re-render  (@Amoifr)
 * feature #3459 [Toolkit][Flowbite] add Dropdown and Avatar component (@DcgRG)


## v2.36.0 (v2.36.0)

Released: 2026-05-29

**Changelog** (https://github.com/symfony/ux/compare/v2.35.0...v2.36.0)

 * security #557 [LiveComponent] Require X-Requested-With header to prevent CSRF (@Kocal)
 * security #cve-2026-49216 [Autocomplete] Fix XSS via unescaped AJAX response data (@Kocal)
 * security #cve-2026-49208 [LiveComponent] Parse format-less date LiveProps strictly with RFC 3339 (@Kocal)
 * security #cve-2026-49209 [LiveComponent] Cap the number of actions per `_batch` request (@Kocal)
 * security #cve-2026-49210 [LiveComponent] Reject malicious child component tags (@Kocal)
 * security #cve-2026-49212 [LiveComponent] Bind HMAC checksum to component name and slot (@Kocal)
 * security #cve-2026-49211 [Autocomplete] Escape LIKE wildcards in the search query (@Amoifr)


## 3.0.0 : New Major Release! 🎉  (v3.0.0)

Released: 2026-04-13

**Changelog** (https://github.com/symfony/ux/compare/v2.35.0...v3.0.0)

 * feature #3452 [LiveComponent] Remove compatibility layer with Symfony PropertyInfo <7.1 (@Kocal)
 * feature #3453  Update minimum required Symfony version to 7.4 (@Kocal)
 * feature #3450  Upgrade minimum required PHP version to 8.4 (@Kocal)
 * feature #3433 [Cropper] Always apply rotation in `Crop::getCroppedImage()` and `Crop::getCroppedThumbnail()` (@MrYamous)
 * bug #3398  Post-merge fixes for 3.x (@Kocal)
 * feature #3186 [Autocomplete][Turbo] Remove BC layers for methods and parameters (@Kocal)
 * bug #3191  Fix 2.x -> 3.x merge (@Kocal)
 * bug #3187  Add phpunit.dist.xml in .gitattributes (@Kocal)
 * bug #3182  Drop Symfony PHPUnit Bridge in favor of PHPUnit >= 11.0 (@Kocal)
 * feature #3180 [StimulusBundle] Remove deprecations for 3.0 (@Kocal)
 * feature #3179 [Vue] Remove deprecations for 3.0 (@Kocal)
 * feature #3103 [Autocomplete] Remove deprecated code for 3.0 (@smnandre)
 * feature #3115 [Map][Google] Upgrade `@googlemaps`/js-api-loader to ^2.0 (@Kocal)
 * bug #3105 [TwigComponent] Remove dev-dependency on WebpackEncoreBundle (@Kocal)
 * feature #3102 [Chartjs][Notify][React][Svelte] Remove StimulusHelper deprecation for 3.0 (@smnandre)
 * feature #3101 [Vue] Remove deprecations for 3.0 (@smnandre)
 * feature #3100 [Turbo] Remove deprecations for 3.0 (@smnandre)
 * feature #3040 [TwigComponent][UX3] Remove deprecations (@smnandre)
 * feature #3051 [LiveComponent][UX3] Remove deprecations (@smnandre)
 * feature #3054 [Map] Remove deprecations from Map (@Kocal)
 * feature #2998  Upgrade minimum required PHP version to 8.2 (@Kocal)
 * feature #2996  Update minimum required Symfony version to ^6.4 (@Kocal)
 * feature #2995 [TogglePassword] Remove package (@Kocal)
 * feature #2994 [LazyImage] Remove package (@Kocal)
 * feature #2993 [Typed] Remove package (@Kocal)
 * feature #2985 [Swup] Remove package (@smnandre)


## v2.35.0 (v2.35.0)

Released: 2026-04-13

**Changelog** (https://github.com/symfony/ux/compare/v2.34.0...v2.35.0)

 * feature #3444 [Svelte] Deprecate the package (@Kocal)
 * feature #3422 [Autocomplete] Add option `clear_on_focus` (@zairigimad)
 * feature #3368 [Toolkit][Flowbite] Add kit Flowbite 4.0 base (@DcgRG)
 * feature #3421 [Toolkit][Shadcn] Add Toggle (@zairigimad)
 * feature #3407 [Chartjs][Icons][Map][Notify][React][Svelte][Toolkit][Turbo][TwigComponent][Vue][Native] Allow Symfony UX 3.x packages (@Kocal)
 * feature #3414 [Native] Introduce `assets/` to ease installation of ``@hotwired`/hotwire-native-bridge` JS dependency (@Kocal)
 * feature #3409 [Toolkit] Embrace `html_attr_type` from `twig/html-extra:^3.24` to correctly merge trigger's attributes (@Kocal)
 * feature #3408 [TwigComponent] Add support for `AttributeValueInterface` from `twig/html-extra:^3.24.0` in `ComponentAttributes` (@Kocal)


## 2.34.0 : CropperJS PHP Rotations 🔄 (v2.34.0)

Released: 2026-03-22

**Changelog** (https://github.com/symfony/ux/compare/v2.33.0...v2.34.0)

* bug #3404 [Native] Fix invalid priority for DevServerListener (@zairigimad)
 * bug #3401 [Autocomplete][Chartjs][Cropperjs][Dropzone][LazyImage][LiveComponent][Map][Notify][React][StimulusBundle][Svelte][Swup][TogglePassword][Turbo][Typed][Vue][Translator] Update package.json to `2.33.0` (@Kocal)
 * feature #3347 [Cropperjs] Add image rotation in php side (@MrYamous)
 * bug #3400 [CI] Update permissions to allow pushing changes to the repository during NPM release (@Kocal)
 * bug #3367 [LiveComponent] Allow empty values to bypass model validation modifiers (@xDeSwa)
 * bug #3389 [React] Fix internal requirement of React 19 (devDependencies) (@milanqtx)


## 2.33.0 : UX Native! (v2.33.0)

Released: 2026-03-17

#### Major Changes

- **UX Native:** new component (again!) :rocket: 
- **UX Toolkit:** many changes and fixes on existing recipes from Shadcn Kit
- **UX LiveComponent:** add option fetchCredentials
- **UX TwigComponent:** dynamic template at runtime

#### Minor Changes

- **UX TwigComponent:** minor performance improvement, and a fix when the components profiling was always enabled
- **UX Translator:** minor performance improvement
- **UX React:** support for React 19
- **UX Icons:** Add support for suffixes

#### Documentation Changes

- **UX TwigComponent:** readonly components, HoC components
- **UX Svelte:** Svelte 4 support

**Changelog** (https://github.com/symfony/ux/compare/v2.32.0...v2.33.0)

 * bug #3342 [Translator] Improve performance of dumper under certain condition (@mkrauser)
 * feature #3338 [Native] Init Hotwire Native (@imad)
 * feature #3356 [Toolkit][Shadcn] Add Tabs recipe (@DcgRG)
 * bug #3372 [LiveComponent][TwigComponent] Fix reflection issues for private properties from trait and parent class (@kachnitel)
 * bug #3376 [Toolkit][Shadcn] Fix initial "open" state for AlertDialog and Dialog (Sylvain Gagnot)
 * bug #3381 [TwigComponent] Fix profiling loaded in production (@VincentChataignier)
 * feature #3364 [LiveComponent] Add `debug:live-component` command (Mickaël BULIARD)
 * bug #3373 [Toolkit][Shadcn] Fix Tooltip's wrapper when re-rendered by LiveComponent (Sylvain Gagnot)
 * feature #3361 [LiveComponent][TwigComponent] Add support for dynamic template resolution (@xDeSwa)
 * bug #3363 [LiveComponent] Fix preservation of !important inline style changes (@xDeSwa)
 * feature #3362  Migrate from tsup (deprecated) to tsdown (@Kocal)
 * bug #3359  Fix JS unit testing script (@Kocal)
 * bug #3355 Fix CI (@Kocal)
 * bug #3353 [TwigComponent] Fix PHPDoc types of `TestLiveComponent::call()` (@StevenRenaux)
 * bug #3348 [Toolkit] Fix `tailwind_merge` parentheses and simplify `attributes` … (@seb-jean)
 * bug #3345 [Toolkit] Rewrite ``@prop`` documentation to normalize `Defaults to ...` (@Kocal)
 * feature #3324 [Icons] Add support for suffixes (@seb-jean)
 * feature #3336 [LiveComponent] Add option `fetchCredentials` (@Kocal)
 * bug #3343 [Toolkit] Improve ``@prop`` and ``@block`` annotations description (@Kocal)
 * bug #3341 [TwigComponent] Minor performance improvement by caching `PropertyAccessor::isWritable()` calls (@Kocal)
 * bug #3340 [TwigComponent]  Minor performance improvements when using `{ props }` (@Kocal)
 * feature #3295 [TwigComponent] Add support for anonymous component name resolution in other bundle (@Phil23)
 * feature #3326 [Toolkit][Shadcn] Update Avatar component (@ker0x, @Kocal)
 * bug #3337 [LiveComponent] Fix tests with lowest dependencies, incompatibility with `zenstruck/foundry` and Symfony 5.4 (@GromNaN)
 * bug #3325  Fix minimum requested 6.x version of FrameworkBundle for LiveComponent (@Kocal)
 * bug #3323 [Autocomplete][Chartjs][Cropperjs][Dropzone][LazyImage][React][StimulusBundle][Svelte][Swup][TogglePassword][Turbo][Typed][Vue][Translator] Use `Extension` from `DependencyInjection` instead of `HttpKernel` (@Kocal)
 * feature #3318 [Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component (@ker0x)
 * feature #3321 [Toolkit][Shadcn] Add Tooltip component (@Kocal)
 * feature #3292 [Toolkit][Shadcn] Add Accordion component (@daFish)
 * bug #3320  Fix `Field` demo code (@Kocal)
 * feature #3314 [React] Add support for React 19 (@Kocal)
 * feature #3299 [Toolkit][Shadcn] Rework recipes docs/examples (@Kocal)
 * bug #3304  Fix npm releases due to `repository` issue (@Kocal)
 * bug #3300 [Toolkit][Shadcn] Fix text color in dark mode for AlertDialog/Dialog components (@Kocal)
 * bug #3291 [Toolkit][Shadcn] Fix text color of `Badge` destructive variant (@Jibbarth)
 * feature #3282 [Toolkit] Prepare base for recipe type `Block` (@jeremyFreeAgent)
 * bug #3290  Update root JS dependencies (@Kocal)
 * feature #3285 [StimulusBundle] Change AssetMapper `excluded_patterns` from `**/controllers.json` to `*/controllers.json` (@Kocal)
 * bug #3280 [CI] Fix compatibility issues with Symfony 8 and spatie/phpunit-snapshot-assertions (@Kocal)
 * bug #3279 [CI] Remove usage of framework.annotations.enabled (@Kocal)
 * bug #3278 [Toolkit] Fix recipe name display when asking for what alternative recipe to install (@jeremyFreeAgent)
 * bug #3277 [Toolkit] fix getRecipes method with type (@jeremyFreeAgent)
 * bug #3273 [Turbo] Fix `SplObjectStorage::attach` deprecation in Doctrine Broadcast listener (@GromNaN)


## 2.32.0 : Toolkit! (v2.32.0)

Released: 2026-01-05

### Autocomplete
*  Untranslated `no_results` label when `options_as_html` is set by @maxperei in https://github.com/symfony/ux/pull/3148
*  Add documentation about plugins management by @raphael-geffroy in https://github.com/symfony/ux/pull/3087
* Fix missing space in JSON snippet by @kasperh90 in https://github.com/symfony/ux/pull/3207
*  Fix issue where TomSelect could already been initialized on an element by @daFish in https://github.com/symfony/ux/pull/3155
* Fix code-block rendering in Autocomplete by @JoppeDC in https://github.com/symfony/ux/pull/3259

### Turbo
* Fix Mercure custom transport with `turbo_steam_listen` by @Fan2Shrek in https://github.com/symfony/ux/pull/3147

### Twig Components
* Add option to disable the dump of components by @alinceDev in https://github.com/symfony/ux/pull/3066
* Fix typo in documentation by @alvidias in https://github.com/symfony/ux/pull/3168
* Allow using directory name as component name for anonymous components by @andyexeter in https://github.com/symfony/ux/pull/3169

### Live Components
* Add clarification of component re-rendering vs. loading content by @Wertisdk in https://github.com/symfony/ux/pull/3164
* Pin `phpdocumentor/reflection-docblock` to non dev version by @Kocal in https://github.com/symfony/ux/pull/3250
* Update index.rst with MarkdownTextarea template info by @Kocal in https://github.com/symfony/ux/pull/3267

### Map
* Add `Map::removeAll*()` method on Elements by @StevenRenaux in https://github.com/symfony/ux/pull/3245

### Icons
* Fix `aliases` and `default_attributes` config types for `config/reference.php` by @Kocal in https://github.com/symfony/ux/pull/3200

### Toolkit
* Add support for documenting props/blocks API by @Kocal in https://github.com/symfony/ux/pull/3154
* Add Item component by @bernard-ng in https://github.com/symfony/ux/pull/3144
* Update Button CSS class, remove as props by @ker0x in https://github.com/symfony/ux/pull/3158
* Add CONTRIBUTING.md by @Kocal in https://github.com/symfony/ux/pull/3161
*  Add missing as props, update CONTRIBUTING.md by @ker0x in https://github.com/symfony/ux/pull/3166
* Add `Dialog` component by @seb-jean in https://github.com/symfony/ux/pull/3173
* Pin `tales-from-a-dev/twig-tailwind-extra` to `^1.0.0` by @Kocal in https://github.com/symfony/ux/pull/3190
* Remove hover style to clearly distinguish from Button by @tassilogroeper in https://github.com/symfony/ux/pull/3197
* Add new component kdb from shadcn ui by @tassilogroeper in https://github.com/symfony/ux/pull/3198
* add Empty component by @bernard-ng in https://github.com/symfony/ux/pull/3213
* add Field component by @bernard-ng in https://github.com/symfony/ux/pull/3214
* add ButtonGroup component by @bernard-ng in https://github.com/symfony/ux/pull/3215
* Add InputGroup component by @daFish in https://github.com/symfony/ux/pull/3236
* Fix forgotten documentation links, follows #3097 by @Kocal in https://github.com/symfony/ux/pull/3254
* Update CSS file by @Kocal in https://github.com/symfony/ux/pull/3258

### Translator
* Refactor API to use string-based translation keys instead of generated constants by @Kocal in https://github.com/symfony/ux/pull/3208
* Early exit parameters extraction from Intl messages, if no `{` is found by @Kocal in https://github.com/symfony/ux/pull/3219
* Add option `ux_translator.dump_typescript` to enable/disable TypeScript types generation by @Kocal in https://github.com/symfony/ux/pull/3218
* Reword `dump_typescript` option description by @Kocal in https://github.com/symfony/ux/pull/3221
* Refactor `TranslationsDumper` options from `__constructor` and setters, to `dump` method by @Kocal in https://github.com/symfony/ux/pull/3244
* Add `keys_patterns` configuration option to filter dumped translations by key patterns by @Kocal in https://github.com/symfony/ux/pull/3248

### Site
* Fix upson logo & url by @smnandre in https://github.com/symfony/ux/pull/3220
* Hide Toolkit menu by @Kocal in https://github.com/symfony/ux/pull/3224
* Minor fixes before deployement by @Kocal in https://github.com/symfony/ux/pull/3229
* Un-hide Toolkit, partially reverts #3224 by @Kocal in https://github.com/symfony/ux/pull/3255
* Rework Toolkit recipe rendering system, improve our Markdown converter by @Kocal in https://github.com/symfony/ux/pull/3256
* Fix TerminalCommand layout by @smnandre in https://github.com/symfony/ux/pull/3268

### Miscellaneous
* Tests over Symfony 7.4.0-RC1 and 8.0.0-RC1 by @Kocal in https://github.com/symfony/ux/pull/3159
* Fix CI when testing Symfony RCs versions by @Kocal in https://github.com/symfony/ux/pull/3178
* Add support for MercureBundle ^0.4.1 and Mercure ^0.7.0 by @Kocal in https://github.com/symfony/ux/pull/3185
* Tests on Symfony 8 stable by @Kocal in https://github.com/symfony/ux/pull/3192
* Git-ignore config/reference.php by @Kocal in https://github.com/symfony/ux/pull/3205
* Add E2E tests for Autocomplete by @Kocal in https://github.com/symfony/ux/pull/3230
* Add E2E tests for LiveComponent by @Kocal in https://github.com/symfony/ux/pull/3235
* Add E2E tests for Chart.js by @Kocal in https://github.com/symfony/ux/pull/3237
* Add E2E tests for Turbo by @Kocal in https://github.com/symfony/ux/pull/3239
* Add E2E tests for CropperJS by @Kocal in https://github.com/symfony/ux/pull/3240
* Add quality tools: PHP-CS-Fixer and Twig-CS-Fixer by @Kocal in https://github.com/symfony/ux/pull/3249
* Fix pnpm build command by @Kocal in https://github.com/symfony/ux/pull/3252
* Truly leverage PHP-CS-Fixer and Twig-CS-Fixer to Fabbot by @Kocal in https://github.com/symfony/ux/pull/3251
* Ensure "apps/" exists before adding it in Finder by @Kocal in https://github.com/symfony/ux/pull/3257
* PHP CS Fixer: update usage by @keradus in https://github.com/symfony/ux/pull/3263
* Run Twig-CS-Fixer on all repo's files, follow #3263 by @Kocal in https://github.com/symfony/ux/pull/3264

### New Contributors
* @alinceDev made their first contribution in https://github.com/symfony/ux/pull/3066
* @alvidias made their first contribution in https://github.com/symfony/ux/pull/3168
* @Wertisdk made their first contribution in https://github.com/symfony/ux/pull/3164
* @andyexeter made their first contribution in https://github.com/symfony/ux/pull/3169
* @tassilogroeper made their first contribution in https://github.com/symfony/ux/pull/3197

**Full Changelog**: https://github.com/symfony/ux/compare/v2.31.0...v2.32.0

## 2.31.0 : E2E Tests with Playwright (v2.31.0)

Released: 2025-10-23

### Live Components

* Fix new URL generation when using `LiveProp` with custom `fieldName` by @Kocal in https://github.com/symfony/ux/pull/3058
* Small update to explicit custom template path on components by @DocFX in https://github.com/symfony/ux/pull/3072
* Improve performance for `LiveUrlSubscriber` by @dannyvw in https://github.com/symfony/ux/pull/3077
* Replace the browser's URL before triggering `render:finished` hook by @xDeSwa in https://github.com/symfony/ux/pull/3088
* Add missing import to code snippet by @rgeraads in https://github.com/symfony/ux/pull/3127
* Add dispatch browser event assertion in `InteractsWithLiveComponents` by @Develog in https://github.com/symfony/ux/pull/3136

### Twig Components

* Remove floating text in documentation by @alexislefebvre in https://github.com/symfony/ux/pull/3131
* Document how to define mandatory/default props by @alexislefebvre in https://github.com/symfony/ux/pull/3132

### Icons

* Updates for UX Icons docs by @javiereguiluz in https://github.com/symfony/ux/pull/3063
* Explain svg colors and improve example configuration by @dbu in https://github.com/symfony/ux/pull/2671
* Add documentation on icons colors by @StevenRenaux in https://github.com/symfony/ux/pull/3082

### Map

* Add `fitBoundsToMarkers` option to Twig extension and component by @ker0x in https://github.com/symfony/ux/pull/3114
* Display warning when trying to define a custom icon for a `Marker` that already has an `Icon` by @ker0x in https://github.com/symfony/ux/pull/3118

### Vue

* Fix Route PHP attribute in Vue Router Web History mode by @michael-bouvy in https://github.com/symfony/ux/pull/3069

### StimulusBundle

* Add missing closing brace in AssetMapper 6.3 example by @quentinRogeret34 in https://github.com/symfony/ux/pull/3096

### Toolkit

* Add npm & importmap package dependencies by @Kocal in https://github.com/symfony/ux/pull/3071
* Add AlertDialog recipe by @Kocal in https://github.com/symfony/ux/pull/3073
* Rework the "dependencies" Recipe JSON schema by @Kocal in https://github.com/symfony/ux/pull/3076
* Minor fixes by @Kocal in https://github.com/symfony/ux/pull/3085
* Delay/hide the "Community Kits" feature, minor fixes by @Kocal in https://github.com/symfony/ux/pull/3097
* Rework recipe name by @Kocal in https://github.com/symfony/ux/pull/3107
* Add missing UX Icons dependencies by @Kocal in https://github.com/symfony/ux/pull/3129
* Add Spinner component by @bernard-ng in https://github.com/symfony/ux/pull/3145

### Translator

* Add E2E tests by @Kocal in https://github.com/symfony/ux/pull/3080

### Site

* Add examples listing on homepage, improve example page by @Kocal in https://github.com/symfony/ux/pull/3078
* Fix UX Translator demo on "price" parameter by @Kocal in https://github.com/symfony/ux/pull/3081
* Lock icons by @Kocal in https://github.com/symfony/ux/pull/3084
* Fix port to 9044 and upgrade UX dependencies by @Kocal in https://github.com/symfony/ux/pull/3093

### Miscellaneous

* Fix highest jobs with Doctrine ^3.0 by @Kocal in https://github.com/symfony/ux/pull/3059
* Configure .gitattributes to ignore Vitest and Playwright config files from export by @Kocal in https://github.com/symfony/ux/pull/3062
* PHP CS Fixer - apply const->var annotation conversion by @keradus in https://github.com/symfony/ux/pull/3065
* Prevent pnpm to install new packages published the same day by @Kocal in https://github.com/symfony/ux/pull/3083
* Fix deprecations with zenstruck/foundry:^2.7 by @Kocal in https://github.com/symfony/ux/pull/3089
* Add doc for E2E steps + minor modifications by @raphael-geffroy in https://github.com/symfony/ux/pull/3086
* Refactor "test_package.sh" to its original purpose, add multiples checks for packages definition by @Kocal in https://github.com/symfony/ux/pull/3090
* Fix `composer config` to avoid modifying `package.json` automatically by @Crovitche-1623 in https://github.com/symfony/ux/pull/3091
* Remove explicit configuration `twig.exception_controller` from Kernel for testing by @Kocal in https://github.com/symfony/ux/pull/3106
* Remove duplicated matrix entry for Symfony version in unit-tests.yaml by @Kocal in https://github.com/symfony/ux/pull/3108
* Add `--json` flag to composer config command by @Kocal in https://github.com/symfony/ux/pull/3139
* Configure OIDC for trusted auto-publishing by @Kocal in https://github.com/symfony/ux/pull/3142

### New Contributors
* @keradus made their first contribution in https://github.com/symfony/ux/pull/3065
* @DocFX made their first contribution in https://github.com/symfony/ux/pull/3072
* @michael-bouvy made their first contribution in https://github.com/symfony/ux/pull/3069
* @quentinRogeret34 made their first contribution in https://github.com/symfony/ux/pull/3096
* @rgeraads made their first contribution in https://github.com/symfony/ux/pull/3127
* @bernard-ng made their first contribution in https://github.com/symfony/ux/pull/3145
* @Develog made their first contribution in https://github.com/symfony/ux/pull/3136

**Full Changelog**: https://github.com/symfony/ux/compare/v2.30.0...v2.31.0

## 2.30.0 : PHP 8.5 (v2.30.0)

Released: 2025-08-27

Hey UX'ers!

This release focuses on stability and compatibility: Live Components and Maps get key
bug fixes, React and Icons see small improvements, and Symfony UX is now fully compatible
with PHP 8.5.

### Twig Components
* Replace Twig comments with PHP comments by @Tastaturberuf in https://github.com/symfony/ux/pull/3037

### Live Components
* Return empty string for `data-value=""` instead of falling back to `null` by @mercuryseries in https://github.com/symfony/ux/pull/3031
* Clean `versionadded` by @smnandre in https://github.com/symfony/ux/pull/3049
* Refactor and fix some edge cases on new URL generation with path + query LiveProps by @Kocal in https://github.com/symfony/ux/pull/3053
* Fix BC Break when defining `LiveProp` properties with PHPDoc type and no-native type, when using TypeInfo by @norkunas in https://github.com/symfony/ux/pull/3043

### Map
* Fix InfoWindow auto-opening by @Kocal in https://github.com/symfony/ux/pull/3034
* Correct and reword typos about polygons by @Kocal in https://github.com/symfony/ux/pull/3035
* Deprecate option `title` from `Polygon`, `Polyline`, `Rectangle` and `Circle` in favor of `infoWindow` by @Kocal in https://github.com/symfony/ux/pull/3036
* Add E2E tests, close #3022 by @Kocal in https://github.com/symfony/ux/pull/3038
* Fix typo by @rrr63 in https://github.com/symfony/ux/pull/3046

### React
* Fix importmap to require `react-dom/client` by @Kocal in https://github.com/symfony/ux/pull/3030

### Icons
* Fallback to default dimensions 16/16 when Icon's dimensions on Iconify are missing by @stlgaits in https://github.com/symfony/ux/pull/3042

### Miscellaneous
* Create E2E app for browsers tests by @Kocal in https://github.com/symfony/ux/pull/3014
* Rename `test_apps` to `apps` by @Kocal in https://github.com/symfony/ux/pull/3041
* Fix `highest-deps` job by @Kocal in https://github.com/symfony/ux/pull/3044
* Ensure PHP 8.5 compatibility by @Kocal in https://github.com/symfony/ux/pull/3045
* Re-configure LF eof in git by @Kocal in https://github.com/symfony/ux/pull/3047
* Add E2E tests by @Kocal in https://github.com/symfony/ux/pull/3048
* Remove some indirect deprecations by @Kocal in https://github.com/symfony/ux/pull/3055

### New Contributors
* @Tastaturberuf made their first contribution in https://github.com/symfony/ux/pull/3037
* @stlgaits made their first contribution in https://github.com/symfony/ux/pull/3042

**Full Changelog**: https://github.com/symfony/ux/compare/v2.29.2...v2.30.0

## 2.29.2 : fix LiveProp (v2.29.2)

Released: 2025-08-19

Hey UX'ers!

This release fixes a Live Component, `LiveProp` URL generation bug, it now correctly re-use the previous logic with support of Serializer and custom modifiers.

### Live Components
* Fix new URL calculation with `LiveProp` using Serializer (and attributes), and when using custom modifier by @Kocal in https://github.com/symfony/ux/pull/2988

### Icons
* Update the links to some icon sets by @javiereguiluz in https://github.com/symfony/ux/pull/2992

### ToolKit
* Improve CI workflows for linting Kits by @Kocal in https://github.com/symfony/ux/pull/2984
* Rework kits architecture, change term for "recipe" by @Kocal in https://github.com/symfony/ux/pull/2986

### Miscellaneous
* Remove unnecessary checks for PHP <8.1 (in tests) by @Kocal in https://github.com/symfony/ux/pull/2999
* Make the Windows CI green by @Kocal in https://github.com/symfony/ux/pull/3000
* Ensure UX Map assets are built first by @Kocal in https://github.com/symfony/ux/pull/3001
* Remove PHP-CS-Fixer job by @Kocal in https://github.com/symfony/ux/pull/3002
* Run latest PHP-CS-Fixer with improved configuration by @Kocal in https://github.com/symfony/ux/pull/3003
* Fix highest dev jobs by @Kocal in https://github.com/symfony/ux/pull/3004
* Configure Vitest for unit and browser tests (use @puppeteer/browsers and webdriverio) by @Kocal in https://github.com/symfony/ux/pull/3010
* Use Playwright for Browser testing by @Kocal in https://github.com/symfony/ux/pull/3013

**Full Changelog**: https://github.com/symfony/ux/compare/v2.29.1...v2.29.2

## 2.29.1 : npm fix (v2.29.1)

Released: 2025-08-08

Hey UX'ers!

Small bug fix release to fix installing the Map bridges with npm.

### Map
* Allows Bridges JavaScript assets to be installed with `npm` when using `file:vendor/symfony/ux-*-map/assets` by @Kocal in https://github.com/symfony/ux/pull/2983

**Full Changelog**: https://github.com/symfony/ux/compare/v2.29.0...v2.29.1

## 2.29.0 : Symfony 8! (v2.29.0)

Released: 2025-08-08

Hey UX'ers!

This release adds Symfony 8 support for all packages! In Map, we've added clustering support.
We've also deprecated the TogglePassword package, Symfony UX 3.0 will drop this package.

### Autocomplete
* Fix Fixtures\Form missing base namespace by @smnandre in https://github.com/symfony/ux/pull/2962

### Map
* Add Clustering Algorithms by @smnandre in https://github.com/symfony/ux/pull/2554

### Live Components
* Fix `#[LiveProp(writable: true, url: true)]` that was not updated as a query parameter by @mbuliard in https://github.com/symfony/ux/pull/2976
* Fix typo on `Valid` constraint name by @Seb33300 in https://github.com/symfony/ux/pull/2980

### TogglePassword
* Deprecate the package by @Kocal in https://github.com/symfony/ux/pull/2972

### Vue
* Update dev dependency `@vitejs/plugin-vue` by @neothone in https://github.com/symfony/ux/pull/2977

### Miscellaneous
* Add support for Symfony 8 by @Kocal in https://github.com/symfony/ux/pull/2973
* Remove `bin/rollup.ts` by @Kocal in https://github.com/symfony/ux/pull/2981

### New Contributors
* @neothone made their first contribution in https://github.com/symfony/ux/pull/2977
* @Seb33300 made their first contribution in https://github.com/symfony/ux/pull/2980

**Full Changelog**: https://github.com/symfony/ux/compare/v2.28.2...v2.29.0


## 2.28.2 : Whoopsie 2 (v2.28.2)

Released: 2025-07-30

Hey UX'ers!

This fixes a LiveComponent regression added in 2.28.0.

### Live Components
* Fix `LiveUrlSubscriber` throw `MethodNotAllowed`  by @smnandre in https://github.com/symfony/ux/pull/2961

### Icons
* Change `xmlns` attribute of downloaded icons to `http://www.w3.org/2000/svg` by @roverwolf in https://github.com/symfony/ux/pull/2959

### Miscellaneous
* Rework `app-tests` job to use `npm` as user's packages manager by @Kocal in https://github.com/symfony/ux/pull/2953
* Fix npm releases with pnpm by @Kocal in https://github.com/symfony/ux/pull/2954
* Add Fabbot as a GitHub Actions by @Kocal in https://github.com/symfony/ux/pull/2955
* Apply fabbot rules by @nicolas-grekas in https://github.com/symfony/ux/pull/2957

### New Contributors
* @roverwolf made their first contribution in https://github.com/symfony/ux/pull/2959

**Full Changelog**: https://github.com/symfony/ux/compare/v2.28.1...v2.28.2

## 2.28.1 : Whoopsie (v2.28.1)

Released: 2025-07-28

Hey UX'ers!

We got a little too fancy in our `package.json` files.

### Miscellaneous
* Fix `package.json` files to not use "catalog" feature from PNPM, as it breaks installation from `vendor/` PHP packages by @Kocal in https://github.com/symfony/ux/pull/2952

**Full Changelog**: https://github.com/symfony/ux/compare/v2.28.0...v2.28.1

## 2.28.0 : Map Graduates 🎓 (v2.28.0)

Released: 2025-07-28

Hey UX'ers!

Map now has `minZoom`/`maxZoom` options and has graduated from experimental to stable! 🎉
In LiveComponents, the `LiveProp` can now map to a routing parameter. Autocomplete now
has the ability to disable plugins.

> [!WARNING]
> If using React with `symfony/asset-mapper` and *NOT* `symfony/flex`, there is a *small* BC break.
> See the [CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/React/CHANGELOG.md#2280) for mitigation details.

### Autocomplete
* Force installation of CSS files for AssetMapper by @leevigraham in https://github.com/symfony/ux/pull/2902
* Upgrade Foundry to ^2.0 by @Kocal in https://github.com/symfony/ux/pull/2928
* Allow plugins to be disabled through `tom_select_options.plugins.<plugin> = false` by @maartendekeizer in https://github.com/symfony/ux/pull/401

### Live Components
* Update css to cover more data-loading use cases by @barlito in https://github.com/symfony/ux/pull/2891
* Fix BC break when using `PropertyTypeExtractorInterface::getType()` on a `#[LiveProp]` property `x` when getter `getX` exists by @Kocal in https://github.com/symfony/ux/pull/2922
* Add validation modifiers (min_length, max_length, min_value, max_value) to data-model inputs by @xDeSwa in https://github.com/symfony/ux/pull/2926
* Add the possibility to map `LiveProp` as a path parameter by @mbuliard in https://github.com/symfony/ux/pull/2673

### Icons
* Don't disable commands based on debug by @kbond in https://github.com/symfony/ux/pull/2884
* Document `icon_sets` configuration by @Kocal in https://github.com/symfony/ux/pull/2938
* Fix `icon_sets` configuration documentation, follow #2938 by @Kocal in https://github.com/symfony/ux/pull/2939
* Some fixes on LiveComponent assets by @Kocal in https://github.com/symfony/ux/pull/2940

### Map
* Rewrite documentation about extra data by @Kocal in https://github.com/symfony/ux/pull/2871
* Add options `minZoom` and `maxZoom` by @Kocal in https://github.com/symfony/ux/pull/2896
* Mark package as non-experimental by @Kocal in https://github.com/symfony/ux/pull/2945
* Replace deprecation Vitest option `browser.name` to `browser.instances` by @Kocal in https://github.com/symfony/ux/pull/2947

### Translator
* Minor fixes in tests context by @Kocal in https://github.com/symfony/ux/pull/2870
* Add functional test to ensure only enabled locales are dumped by @Kocal in https://github.com/symfony/ux/pull/2946

### Swup
* Correct typo in Swup `README.md` by @Kocal in https://github.com/symfony/ux/pull/2883

### 🚧 Toolkit 🚧
* Fix compatibility with Windows by @Kocal in https://github.com/symfony/ux/pull/2892

### Site
* Improve Package header on mobile by @maxperei in https://github.com/symfony/ux/pull/2893

### Miscellaneous
* Run JS tests under multiple JS versions, define `.nvmrc` to 22.6 by @Kocal in https://github.com/symfony/ux/pull/2865
* Migrate PHPUnit configs and homogenize them by @Kocal in https://github.com/symfony/ux/pull/2867
* Fix functional tests Turbo (Chrome 137 & dev-tools) by @Kocal in https://github.com/symfony/ux/pull/2873
* Migrate `bin/*.js` to TypeScript, use `tsx` by @Kocal in https://github.com/symfony/ux/pull/2866
* Upgrade Rollup dependencies by @Kocal in https://github.com/symfony/ux/pull/2876
* Remove Babel dependencies by @Kocal in https://github.com/symfony/ux/pull/2877
* Remove `@symfony/stimulus-testing` dev dependencies by @Kocal in https://github.com/symfony/ux/pull/2879
* Remove useless `eslint-` comments by @Kocal in https://github.com/symfony/ux/pull/2880
* (Re-)use `ramsey/composer-install` action when possible by @Kocal in https://github.com/symfony/ux/pull/2885
* Run unit and functional tests under Windows too by @Kocal in https://github.com/symfony/ux/pull/2816
* Fix components assets compilation on Windows server by @Kocal in https://github.com/symfony/ux/pull/2890
* Fix typo `CONTRIBUTING.md` by @xDeSwa in https://github.com/symfony/ux/pull/2927
* Explicitly import Vitest APIs instead of relying on globals by @Kocal in https://github.com/symfony/ux/pull/2931
* Replace Yarn Berry by PNPM by @Kocal in https://github.com/symfony/ux/pull/2932
* Upgrade Vitest to ^3.2.4 by @Kocal in https://github.com/symfony/ux/pull/2933
* Modernize and simplify our packages building tools, replace Rollup by tsup by @Kocal in https://github.com/symfony/ux/pull/2944
* Download only Chromium browser for Vitest/Playwright tests by @Kocal in https://github.com/symfony/ux/pull/2948

### New Contributors
* @barlito made their first contribution in https://github.com/symfony/ux/pull/2891
* @maxperei made their first contribution in https://github.com/symfony/ux/pull/2893
* @leevigraham made their first contribution in https://github.com/symfony/ux/pull/2902
* @mbuliard made their first contribution in https://github.com/symfony/ux/pull/2673

**Full Changelog**: https://github.com/symfony/ux/compare/v2.27.0...v2.28.0


## 2.27.0 : Map Powerup (v2.27.0)

Released: 2025-06-27

Hey UX'ers!

This release adds a bunch of new features to Map: Circle and Rectangle support, attribution and zoom control
options, and more. Fixes, improvements, and optimizations are also included in Autocomplete, Twig Components,
and Live Components.

### Autocomplete

* Ensure default plugins are nicely merged with user-defined plugins by @Kocal in https://github.com/symfony/ux/pull/2841

### Twig Components

* Fix escaping of Alpine.js attribute keys containing numeric characters by @klausi85 in https://github.com/symfony/ux/pull/2833
* Update the docs about nested Twig components by @javiereguiluz in https://github.com/symfony/ux/pull/2847
* Update the docs about the `mount()` method of Twig components by @javiereguiluz in https://github.com/symfony/ux/pull/2843

### Live Components

* Fix query string decoding with no `=` by @smnandre in https://github.com/symfony/ux/pull/2829
* Optimize `LiveComponentStack::getCurrentLiveComponent()` by @Kocal in https://github.com/symfony/ux/pull/2821
* Add events assertions in `InteractsWithLiveComponents` by @Arkalo2 in https://github.com/symfony/ux/pull/2712

### Map

* Add option to configure attribution and zoom control by @dannyvw in https://github.com/symfony/ux/pull/2792
* Do not override `fitBoundsToMarkers` when using LiveComponent by @dannyvw in https://github.com/symfony/ux/pull/2811
* Fix missing dynamic attributes on `<twig:ux:map>` example by @raphael-geffroy in https://github.com/symfony/ux/pull/2840
* Add Circle support by @Valmonzo in https://github.com/symfony/ux/pull/2838
* [Google] Fix race conditions when loading Google Maps API, when rendering >=2 maps by @Kocal in https://github.com/symfony/ux/pull/2854
* Add Rectangle support by @Valmonzo in https://github.com/symfony/ux/pull/2845
* [Google] Fix `InfoWindow` compatibility with `Circle` and `Rectangle` by @Kocal in https://github.com/symfony/ux/pull/2858
* Minor improvements on TypeScript types by @Kocal in https://github.com/symfony/ux/pull/2859
* Deprecate property `rawOptions` from `ux:map:*:before-create` events, in favor of `bridgeOptions` by @Kocal in https://github.com/symfony/ux/pull/2860
* Allows Map options customization in `ux:map:pre-connect` event (e.g.: `zoom`, `options`, `bridgeOptions`...) by @Kocal in https://github.com/symfony/ux/pull/2861
* Update test to include circle and rectangle data attributes by @Valmonzo in https://github.com/symfony/ux/pull/2862
* Add `extra` data to `Map` by @Kocal in https://github.com/symfony/ux/pull/2863

### Icons

* Docs: Merging code blocks; language improvements by @ThomasLandauer in https://github.com/symfony/ux/pull/2793
* Explain Icons SVG size by @dbu in https://github.com/symfony/ux/pull/2670

### Site

* Trim Icon's DataList's `<dd>` to get a better copy value by @CyrilKrylatov in https://github.com/symfony/ux/pull/2836

### Miscellaneous

* Add missing return type in test Kernel by @smnandre in https://github.com/symfony/ux/pull/2830
* Fix `link` script by adding Bridges support by @Kocal in https://github.com/symfony/ux/pull/2839
* PHPStan: use PHP version from the matrix by @alexislefebvre in https://github.com/symfony/ux/pull/2842
* Configure `doctrine.orm.enable_native_lazy_objects` to fix deprecation in PHP 8.4+ by @Kocal in https://github.com/symfony/ux/pull/2851
* Reduce number of PHPStan jobs by @Kocal in https://github.com/symfony/ux/pull/2852
* Prevent `yarn watch` to exit if TypeScript plugin is unable to compile by @Kocal in https://github.com/symfony/ux/pull/2853
* Upgrade Biome.js to ^2 by @Kocal in https://github.com/symfony/ux/pull/2856

### New Contributors
* @CyrilKrylatov made their first contribution in https://github.com/symfony/ux/pull/2836
* @klausi85 made their first contribution in https://github.com/symfony/ux/pull/2833
* @Arkalo2 made their first contribution in https://github.com/symfony/ux/pull/2712

**Full Changelog**: https://github.com/symfony/ux/compare/v2.26.1...v2.27.0


## 2.26.1 : Conflict Resolution (v2.26.1)

Released: 2025-06-06

Hey UX'ers!

Just a small release to fix a Live Component composer conflict.

### Live Components
* Fix conflict with `symfony/type-info` by @Kocal in https://github.com/symfony/ux/pull/2828

### Miscellaneous
* Fix changelog version by @Kocal in https://github.com/symfony/ux/pull/2823

**Full Changelog**: https://github.com/symfony/ux/compare/v2.26.0...v2.26.1

## 2.26.0 : Package Deprecations (v2.26.0)

Released: 2025-06-05

Hey UX'ers!

This release deprecates 3 packages: `symfony/ux-typed`, `symfony/ux-lazy-image`
and `symfony/ux-swup`. These will be removed in 3.0. Their respective README files
have migration guides to help you move to alternatives.

Also included are many bug fixes and improvements, including multipolygon support
in `symfony/ux-map`!

### Twig Components
* Improve Parser exceptionsby @smnandre in https://github.com/symfony/ux/pull/2729

### Live Components
* Add missing `DefaultActionTrait` in a LiveComponent code example by @welcoMattic in https://github.com/symfony/ux/pull/2758
* Key is more reliable with child components by @weaverryan in https://github.com/symfony/ux/pull/2699
* `LiveProp`: Pass the property name as second parameter of the `modifier` callback by @jannes-io in https://github.com/symfony/ux/pull/2744
* Improve misleading smart render algorithm docs by @norkunas in https://github.com/symfony/ux/pull/2741
* Fix `PropertyTypeExtractorInterface::getTypes()` deprecation, use TypeInfo ^7.2 `Type` by @mtarld in https://github.com/symfony/ux/pull/2607

### Map
* Add definition to after create events in controller by @mart-insiders in https://github.com/symfony/ux/pull/2763
* Add return type to `__toString()` by @dannyvw in https://github.com/symfony/ux/pull/2772
* Remove invalid marker icon example by @dannyvw in https://github.com/symfony/ux/pull/2771
* Add multipolygon support by @dannyvw in https://github.com/symfony/ux/pull/2762
* Add missing dependency for `spatie/phpunit-snapshot-assertions` to `require-dev` by @dannyvw in https://github.com/symfony/ux/pull/2773
* Optional leaflet tilelayer by @dannyvw in https://github.com/symfony/ux/pull/2779

### Icons
* Check for empty paths before calling Finder in `ux:icons:lock` by @ameotoko in https://github.com/symfony/ux/pull/2723
* Fix typos by @ThomasLandauer in https://github.com/symfony/ux/pull/2781
* Remove broken link by @ThomasLandauer in https://github.com/symfony/ux/pull/2788
* Fix links to `symfony/ux-twig-component` by @ThomasLandauer in https://github.com/symfony/ux/pull/2789

### StimulusBundle
* Skip mapping `.ts` controller if `.js` version is available by @phasdev in https://github.com/symfony/ux/pull/2702
* Replace `chart` examples by `hello` to avoid confusion with the ChartJS component by @welcoMattic in https://github.com/symfony/ux/pull/2707

### React
* Improve error handling in `resolveReactComponent` by @teklakct in https://github.com/symfony/ux/pull/2006

### Turbo
* Fix Turbo CI (PHPStan & Functional tests) by @Kocal in https://github.com/symfony/ux/pull/2766

### 🚧 Toolkit 🚧 
* Add components metadata (for dependencies) by @Kocal in https://github.com/symfony/ux/pull/2726
* Remove `FileType` by @Kocal in https://github.com/symfony/ux/pull/2800
* Remove old `FileType` references by @Kocal in https://github.com/symfony/ux/pull/2802
* Add myself to Toolkit code-owners by @Kocal in https://github.com/symfony/ux/pull/2804
* Remove `Kit::$uxIcon`, make icons internal to the website by @Kocal in https://github.com/symfony/ux/pull/2807

### Typed
* Deprecate the package by @Kocal in https://github.com/symfony/ux/pull/2809

### LazyImage
* Deprecate the package by @Kocal in https://github.com/symfony/ux/pull/2813

### Swup
* Deprecate the package by @Kocal in https://github.com/symfony/ux/pull/2814

### Miscellaneous
* Configure Git username/email to github-actions(bot) when committing version updates by @Kocal in https://github.com/symfony/ux/pull/2759
* Rework `tests-php` job matrix, better covers different PHP/SF versions, test all components in a single job by @Kocal in https://github.com/symfony/ux/pull/2734
* Re-organize workflows: split unit/functional/app tests, split code quality workflow by @Kocal in https://github.com/symfony/ux/pull/2764
* Remove oldest versionadded by @smnandre in https://github.com/symfony/ux/pull/2706
* Homogenize PHP-CS-Fixer configuration with `symfony/symfony`, and run it by @Kocal in https://github.com/symfony/ux/pull/2768
* Replace `ramsey/composer-install` by `composer install` in `app-tests` workflow by @Kocal in https://github.com/symfony/ux/pull/2780
* Re-add PHP-CS-Fixer by @Kocal in https://github.com/symfony/ux/pull/2803

### New Contributors
* @phasdev made their first contribution in https://github.com/symfony/ux/pull/2702
* @teklakct made their first contribution in https://github.com/symfony/ux/pull/2006
* @ameotoko made their first contribution in https://github.com/symfony/ux/pull/2723
* @mart-insiders made their first contribution in https://github.com/symfony/ux/pull/2763
* @dannyvw made their first contribution in https://github.com/symfony/ux/pull/2772
* @ThomasLandauer made their first contribution in https://github.com/symfony/ux/pull/2781

**Full Changelog**: https://github.com/symfony/ux/compare/v2.25.2...v2.26.0


## 2.25.2 : StimulusAttribute fix (v2.25.2)

Released: 2025-05-20

Hey UX'ers!

Just a small bug fix release to fix using `StimulusAttributes` with Twig Components.

### Twig Components

* Fix `ComponentAttributes` rendering when using `StimulusAttributes` as default attributes by @Kocal in https://github.com/symfony/ux/pull/2757

### Map

* Remove test for `render_map` deprecation by @Kocal in https://github.com/symfony/ux/pull/2755

### Toolkit

* Enforce `symfony/ux-twig-component:^2.25.1` by @Kocal in https://github.com/symfony/ux/pull/2753

**Full Changelog**: https://github.com/symfony/ux/compare/v2.25.1...v2.25.2

## 2.25.1 : CVE-2025-47946 (v2.25.1)

Released: 2025-05-19

Hey UX'ers!

> [!IMPORTANT]  
> This release addresses [CVE-2025-47946](https://github.com/symfony/ux/security/advisories/GHSA-5j3w-5pcr-f8hg). See [the blog post](https://symfony.com/blog/symfony-ux-cve-2025-47946-unsanitized-html-attribute-injection-via-componentattributes) for more details.

### Twig Components
* Remove `ComponentAttributeFactory` and inject `EscaperRuntime` directly by @smnandre in https://github.com/symfony/ux/pull/2749

**Full Changelog**: https://github.com/symfony/ux/compare/v2.25.0...v2.25.1

## 2.25.0 : Squash Deprecations (v2.25.0)

Released: 2025-05-19

Hey UX'ers!

This release fixes Twig deprecations, improves the DX of Icons, adds UID support and fixes hydration issues in Live Components. This also includes an initial preview of the new UX Toolkit. This package isn't yet installable via Composer as it's still in heavy development, but you can check it out in the `src/Toolkit`.

### Autocomplete

* Escape `querySelector` dynamic selector with `CSS.escape()` by @Bartheyrman22 in https://github.com/symfony/ux/pull/2663

### Map

* Downgrade PHP requirement from 8.3 to 8.1 by @Kocal in https://github.com/symfony/ux/pull/2695

### Twig Components

* Fix `loadTemplate` deprecation for Twig >= 3.21 by @smnandre in https://github.com/symfony/ux/pull/2713

### Live Components

* Add UID support for hydration by @norkunas in https://github.com/symfony/ux/pull/2654
* Fix default option extraction ignores Translatable #2621 by @stehled in https://github.com/symfony/ux/pull/2627
* Fix: `LiveComponentHydrator::hydrateValue()` cannot hydrate null values by @nikophil in https://github.com/symfony/ux/pull/2730

### StimulusBundle

* Make the JS package private by @Kocal in https://github.com/symfony/ux/pull/2709

### Toolkit

* Introduce the UX Toolkit ✨ by @Halleck45 in https://github.com/symfony/ux/pull/2539
* Add missing Interface suffixes by @smnandre in https://github.com/symfony/ux/pull/2717
* Fix deprecation Kernel > 7.3 by @smnandre in https://github.com/symfony/ux/pull/2714
* Remove redundant code in Shadcn kit components by @Kocal in https://github.com/symfony/ux/pull/2711
* Add functional tests to render all Kit components usage codes (from their documentation), with a snapshot system by @Kocal in https://github.com/symfony/ux/pull/2720
* Minor adjustments on Kit creation command (reword questions, fix doc format) by @Kocal in https://github.com/symfony/ux/pull/2724
* Remove Kit "authors" by @Kocal in https://github.com/symfony/ux/pull/2725
* Improve descriptions of Shadcn components by @Kocal in https://github.com/symfony/ux/pull/2728
* Update snapshots & fix tests, following #2728 by @Kocal in https://github.com/symfony/ux/pull/2735

### Icons

* Improve DX when `symfony/http-client` is not installed by @kbond in https://github.com/symfony/ux/pull/2678

### Turbo

* Minor documentation syntax fixes by @seb-jean in https://github.com/symfony/ux/pull/2692
* Pass `turbo_stream_listen` topics to mercure if not defined by @Fan2Shrek in https://github.com/symfony/ux/pull/2694

### Miscellaneous

* Fix version bump for npm packages by @Kocal in https://github.com/symfony/ux/pull/2679
* Use git diff instead of git status by @smnandre in https://github.com/symfony/ux/pull/2687
* Add `.editorconfig`, enforce LF line-ending style by @Kocal in https://github.com/symfony/ux/pull/2691
* Adjust tags to `v2.*.*` for NPM auto-releases by @Kocal in https://github.com/symfony/ux/pull/2685
* Add step to disable `package.json` synchronization while upgrading PHP package by @Kocal in https://github.com/symfony/ux/pull/2698
* Replace `workspace:*` dependencies before publishing on npm by @Kocal in https://github.com/symfony/ux/pull/2739
* Fix Doctor RST warning about quotes by @smnandre in https://github.com/symfony/ux/pull/2745

### Site

* Add manual installation steps for Component installation (and some website tweaks) by @Kocal in https://github.com/symfony/ux/pull/2716

### New Contributors
* @stehled made their first contribution in https://github.com/symfony/ux/pull/2627
* @Bartheyrman22 made their first contribution in https://github.com/symfony/ux/pull/2663
* @Halleck45 made their first contribution in https://github.com/symfony/ux/pull/2539
* @nikophil made their first contribution in https://github.com/symfony/ux/pull/2730

**Full Changelog**: https://github.com/symfony/ux/compare/v2.24.0...v2.25.0

## 2.24.0 : NPM Packages (v2.24.0)

Released: 2025-04-05

Hey UX'ers!

UX packages that require JS have their JS published on NPM. This installation method is reserved for **advanced users** who want to decouple their JavaScript dependencies from their PHP dependencies. **Symfony Flex is still the method recommended for most users.**

### Autocomplete
- Fix invalid createQueryBuilder code example by @tacman in https://github.com/symfony/ux/pull/2470
- Rethrow `BadRequestHttpException` in case of malformed `extra_options` by @norkunas in https://github.com/symfony/ux/pull/2600
- Add `EnumType` precision by @Huluti in https://github.com/symfony/ux/pull/2640

### Map
- **Add Marker Icon customization capability by @sblondeau in https://github.com/symfony/ux/pull/2605**
- **Markers, polygons and polylines removal by @sblondeau in https://github.com/symfony/ux/pull/2547**
- JavaScript package should not be added in user's package.json by @Kocal in https://github.com/symfony/ux/pull/2611
- Add missing `README`/`LICENSE` files for Map Bridges JS packages by @Kocal in https://github.com/symfony/ux/pull/2616
- Improve "Interact with the map" section by @Kocal in https://github.com/symfony/ux/pull/2638
- Make renderer tests way easier to maintain, use snapshots by @Kocal in https://github.com/symfony/ux/pull/2658
- Fix 2.23/2.24 changelog by @zak39 in https://github.com/symfony/ux/pull/2674

### Twig Components
- **Minimal support of comment lines by @smnandre in https://github.com/symfony/ux/pull/2464**
- Fix ComponentTokenParser on 32-bits by @smnandre in https://github.com/symfony/ux/pull/2572
- Fix Twig 3.21 deprecations (getExpressionParser) by @smnandre in https://github.com/symfony/ux/pull/2591
- Add `OptionResolver` namespace in doc example by @ThibaultPelloquin in https://github.com/symfony/ux/pull/2634
- Fix test when high-deps by @Kocal in https://github.com/symfony/ux/pull/2645

### Live Components
- Move `symfony/property-info` to the require section by @mtarld in https://github.com/symfony/ux/pull/2608
- Fix default select value with preferred choices by @1ed in https://github.com/symfony/ux/pull/2587
- Document how to pass a value to an event listener from Twig by @Artusamak in https://github.com/symfony/ux/pull/2610
- Remove mention of deprecated annotation in docs by @smnandre in https://github.com/symfony/ux/pull/2631

### Turbo
- Document `<twig:Turbo:Stream:*>` by @seb-jean in https://github.com/symfony/ux/pull/2481
- Update `index.rst` by @DennisdeBest in https://github.com/symfony/ux/pull/2603
- Add Twig Extensions for `meta` tags by @seb-jean in https://github.com/symfony/ux/pull/2618
- Pass EventSource options to `turbo_stream_listen` by @Fan2Shrek in https://github.com/symfony/ux/pull/2447

### StimulusBundle
- **Add support for `symfony/stimulus-bridge` 4 by @bobvandevijver in https://github.com/symfony/ux/pull/2609**
- Fix missing `}`, reformat so it's visible by @tacman in https://github.com/symfony/ux/pull/2599
- Misc doc fixes by @javiereguiluz in https://github.com/symfony/ux/pull/2597
- Fix lazy load Stimulus controllers with Turbo by @smnandre in https://github.com/symfony/ux/pull/2590

### Icons
- Improve setup instructions by @dbu in https://github.com/symfony/ux/pull/2664
- Add `xmlns` attribute to svg icons by @Enz000 in https://github.com/symfony/ux/pull/2661

### Notify
- Update image link for native notification example by @skmedix in https://github.com/symfony/ux/pull/2604
- Added `options` to Notification by @ernie76 in https://github.com/symfony/ux/pull/1853

### Miscellaneous
- **Add workflow to automatically publish JS packages on npm by @Kocal in https://github.com/symfony/ux/pull/2615**
- Fix links to changed dist files by @Kocal in https://github.com/symfony/ux/pull/2563
- Fix dist files base/head information by @Kocal in https://github.com/symfony/ux/pull/2564
- Ensure TypeScript code is valid by @Kocal in https://github.com/symfony/ux/pull/2562
- Run tests on minimum-stability=dev too by @Kocal in https://github.com/symfony/ux/pull/2594
- Normalize `package.json` files, to prepare publication on NPM by @Kocal in https://github.com/symfony/ux/pull/2595
- Document `src/**/assets/README.md` files about direct installation and recommended alternatives. by @Kocal in https://github.com/symfony/ux/pull/2612
- Ensure JS packages (either from `vendor/` or npm versions) can be installed/used inside an Encore App by @Kocal in https://github.com/symfony/ux/pull/2613
- Refactor some steps in test-app-encore-app job by @Kocal in https://github.com/symfony/ux/pull/2614
- Document about alternative JS assets installation with npm packages by @Kocal in https://github.com/symfony/ux/pull/2617
- Add documentation check to PR template by @kbond in https://github.com/symfony/ux/pull/2630
- Document and update CI for Corepack manual installation by @Kocal in https://github.com/symfony/ux/pull/2649

### Site
- Fix `favicon.svg` and mention "UX" by @Kocal in https://github.com/symfony/ux/pull/2626

### New Contributors
* @bobvandevijver made their first contribution in https://github.com/symfony/ux/pull/2609
* @Artusamak made their first contribution in https://github.com/symfony/ux/pull/2610
* @ThibaultPelloquin made their first contribution in https://github.com/symfony/ux/pull/2634
* @Huluti made their first contribution in https://github.com/symfony/ux/pull/2640
* @zak39 made their first contribution in https://github.com/symfony/ux/pull/2674
* @dbu made their first contribution in https://github.com/symfony/ux/pull/2664
* @ernie76 made their first contribution in https://github.com/symfony/ux/pull/1853
* @Enz000 made their first contribution in https://github.com/symfony/ux/pull/2661

**Full Changelog**: https://github.com/symfony/ux/compare/v2.23.0...v2.24.0

## 2.23.0 : Minor Improvements & Fixes (v2.23.0)

Released: 2025-02-10

Hey UXer's!

Not a ground-breaking release, but some nice minor improvements and fixes.

### Autocomplete
* Reset TomSelect when updating controller attributes by @pierredup in https://github.com/symfony/ux/pull/1505
* Deprecate `ExtraLazyChoiceLoader` in favor of `LazyChoiceLoader` by @norkunas in https://github.com/symfony/ux/pull/2458
* Fix Incompatibility filter_query and max_results (doc) by @ytilotti in https://github.com/symfony/ux/pull/2440
* Configurable results by @J-Ben87 in https://github.com/symfony/ux/pull/2541

### Twig Components
* Update using macro docs by @smnandre in https://github.com/symfony/ux/pull/2444
* Minor doc syntax fix by @javiereguiluz in https://github.com/symfony/ux/pull/2459
* Document about unwanted behavior with `ExposeInTemplate` and computed methods by @Kocal in https://github.com/symfony/ux/pull/2456
* Fix typo in docs by @JalenWasHere in https://github.com/symfony/ux/pull/2452
* Remove word in documentation by @jmwill86 in https://github.com/symfony/ux/pull/2475
* Various fix / cleans in documentation by @smnandre in https://github.com/symfony/ux/pull/2471
* Use promoted properties in code sample by @tacman in https://github.com/symfony/ux/pull/2484
* Add explicit string cast on string assertions by @Valmonzo in https://github.com/symfony/ux/pull/2507
* Remove obsolete `TemplateNameParser` by @sneakyvv in https://github.com/symfony/ux/pull/2506

### Live Components
* Update CSRF docs by @smnandre in https://github.com/symfony/ux/pull/2443
* "Hooks: Handle Component Behavior" spacing issue in docs by @nehalgajjar in https://github.com/symfony/ux/pull/2435
* Check secret is not empty + add `[SensitiveParameter]` by @smnandre in https://github.com/symfony/ux/pull/2461
* Allow configuring secret for fingerprints and checksums by @smnandre in https://github.com/symfony/ux/pull/2462
* Use `container.build_hash` instead of `kernel.secret` in `CacheWarmer` by @dkarlovi in https://github.com/symfony/ux/pull/2451
* Remove form property in live component docs by @jannes-io in https://github.com/symfony/ux/pull/2474
* Document `make:twig-component` by @seb-jean in https://github.com/symfony/ux/pull/2480
* Add a link label in doc by @MrYamous in https://github.com/symfony/ux/pull/2476
* Update doc on how to use `submitForm()` by @yalit in https://github.com/symfony/ux/pull/2510
* Fix `ComponentWithFormTrait::extractFormValues()` with edge cases by @smnandre in https://github.com/symfony/ux/pull/2491
* Add very simple download files docs by @zefyx in https://github.com/symfony/ux/pull/2513
* Prevent `__component` property to be serialized when called `JSON.stringify()` by @Kocal in https://github.com/symfony/ux/pull/2537
* Add Documentation for testing with `LiveCollectionType` by @yalit in https://github.com/symfony/ux/pull/2517
* Fix formatting of the inline code for the text `RedirectResponse` by @zefyx in https://github.com/symfony/ux/pull/2530
* Fix `ComponentWithFormTrait` not working in batch actions by @smnandre in https://github.com/symfony/ux/pull/2553

### Icons
* Fix aliases support when fetching multiples icons with Iconify by @Kocal in https://github.com/symfony/ux/pull/2467

### Map
* Add new helpers: `DistanceUnit`, `DistanceCalculator`, `CoordinateUtils` by @smnandre in https://github.com/symfony/ux/pull/2551

### Chart.js
* Listen to Stimulus `disconnect` event to destroy the chart by @Shadow-Devil in https://github.com/symfony/ux/pull/1944

### Stimulus
* Update Stimulus Components URL by @94noni in https://github.com/symfony/ux/pull/2495
* Fasten lazy loading + add debug `lazy:loading` and `lazy:loaded`  by @smnandre in https://github.com/symfony/ux/pull/2463

### Turbo
* Remove obsolete Mercure configuration (docs) by @smnandre in https://github.com/symfony/ux/pull/2524
* Add stream format with request listener by @aleho in https://github.com/symfony/ux/pull/2550

### LazyImage
* Add a warning message to not recommend Lazy Image package by @javiereguiluz in https://github.com/symfony/ux/pull/2501

### Site
* Add BlueSky by @smnandre in https://github.com/symfony/ux/pull/2436
* Update deps by @smnandre in https://github.com/symfony/ux/pull/2441
* Visual improvments on IconModal  by @Kocal in https://github.com/symfony/ux/pull/2465
* Update site banner by @smnandre in https://github.com/symfony/ux/pull/2489
* Upgrade PHP8.4 on psh by @smnandre in https://github.com/symfony/ux/pull/2442
* Back to PHP 8.3 by @smnandre in https://github.com/symfony/ux/pull/2494
* Add links to UX icons documentation by @smnandre in https://github.com/symfony/ux/pull/2499

### Miscellaneous
* Mention Doctor Rst in `CONTRIBUTING.md` by @smnandre in https://github.com/symfony/ux/pull/2472
* Fix and display changed dist files in the CI by @Kocal in https://github.com/symfony/ux/pull/2503
* Drop explicit Yarn dependencies caching steps for actions/setup-node by @Kocal in https://github.com/symfony/ux/pull/2504

### New Contributors
* @dkarlovi made their first contribution in https://github.com/symfony/ux/pull/2451
* @JalenWasHere made their first contribution in https://github.com/symfony/ux/pull/2452
* @ytilotti made their first contribution in https://github.com/symfony/ux/pull/2440
* @Shadow-Devil made their first contribution in https://github.com/symfony/ux/pull/1944
* @jmwill86 made their first contribution in https://github.com/symfony/ux/pull/2475
* @Valmonzo made their first contribution in https://github.com/symfony/ux/pull/2507
* @yalit made their first contribution in https://github.com/symfony/ux/pull/2510
* @zefyx made their first contribution in https://github.com/symfony/ux/pull/2513
* @J-Ben87 made their first contribution in https://github.com/symfony/ux/pull/2541

**Full Changelog**: https://github.com/symfony/ux/compare/v2.22.1...v2.23.0


## 2.22.1 : Bug Squashing (v2.22.1)

Released: 2024-12-09

Hey UX'ers!

Just a small, but important bug fix release.

### Autocomplete
* Fix grouped options order by @zavarock in https://github.com/symfony/ux/pull/1825
* Added Polish translation for "Add ..." message by @skmedix in https://github.com/symfony/ux/pull/2418

### Map
* Fix documentations codeblocks for the LiveComponent integration by @Kocal in https://github.com/symfony/ux/pull/2412
* Fix default values of Stimulus Map Controller by @Kocal in https://github.com/symfony/ux/pull/2420

### Icons
* Fix `LockIconsCommand` definition when Iconify is disabled by @smnandre in https://github.com/symfony/ux/pull/2416
* Fix doc typo by @karpilin in https://github.com/symfony/ux/pull/2424

### StimulusBundle
* Fix typo by @MrYamous in https://github.com/symfony/ux/pull/2430

### Live Components
* Update docs for `PostHydrate`, `PreDehydrate` & `PreReRender` by @nehalgajjar in https://github.com/symfony/ux/pull/2431
* Handle loose comparison with empty placeholder by @FoxCie in https://github.com/symfony/ux/pull/2426

### Twig Components
* Add tip about `make:twig-component` command by @DennisdeBest in https://github.com/symfony/ux/pull/2384
* Mention how to work with Twig macros in Twig Components by @javiereguiluz in https://github.com/symfony/ux/pull/2432

### Miscellaneous
* Apply natural import order for JS to synchronise the code base with Biome and its configuration by @chadyred in https://github.com/symfony/ux/pull/2423
* Drop format, lint, check-format and check-lint commands, replace them with check and ci commands by @Kocal in https://github.com/symfony/ux/pull/2428
* Replace CleanCSS by LightningCSS by @Kocal in https://github.com/symfony/ux/pull/2429

### Site
* Update Symfony 7.2 by @smnandre in https://github.com/symfony/ux/pull/2411
* Show a visible link to the docs of each package by @javiereguiluz in https://github.com/symfony/ux/pull/2309

### New Contributors
* @zavarock made their first contribution in https://github.com/symfony/ux/pull/1825
* @skmedix made their first contribution in https://github.com/symfony/ux/pull/2418
* @karpilin made their first contribution in https://github.com/symfony/ux/pull/2424
* @nehalgajjar made their first contribution in https://github.com/symfony/ux/pull/2431
* @FoxCie made their first contribution in https://github.com/symfony/ux/pull/2426

**Full Changelog**: https://github.com/symfony/ux/compare/v2.22.0...v2.22.1

## 2.22.0 : So long CSRF! (v2.22.0)

Released: 2024-11-30

Hey UX'ers!

Here's a shiny new release for you! 🎉

Live components now rely on _same-origin/CORS_ instead of CSRF tokens for protection. They're now stateless and the session is no longer required! In Turbo, `<Turbo:Stream>` and `<Turbo:Frame>` Twig components were added plus support for multiple Mercure topics in `turbo_stream_listen`. The Map component now supports _polylines_ and have come [*alive* with Live Components](https://symfony.com/bundles/ux-map/current/index.html#usage-with-live-components). Across the board, we've improved performance, fixed bugs, and updated documentation.

### Autocomplete
* **Allow configuring TomSelect’s `labelField` by @MatTheCat in https://github.com/symfony/ux/pull/2382**
* Update `AutocompleteBundle.tr.php` by @xDeSwa in https://github.com/symfony/ux/pull/2294
* Adjust `index.rst` format by @smnandre in https://github.com/symfony/ux/pull/2297
* Note form requirements by @MrYamous in https://github.com/symfony/ux/pull/2295
* Mention `preload` can be set to `false` by @MatTheCat in https://github.com/symfony/ux/pull/2348
* Fix handling of associated properties in DQL joins by @HugoSEIGLE in https://github.com/symfony/ux/pull/2377

### Live Components
* **Remove CSRF tokens - rely on same-origin/CORS instead by @nicolas-grekas in https://github.com/symfony/ux/pull/2251**
* Fix documentation for select data-model by @Nek- in https://github.com/symfony/ux/pull/2313
* Fix variable in docs by @xDeSwa in https://github.com/symfony/ux/pull/2402
* Fix checkbox/radio value matching by @smnandre in https://github.com/symfony/ux/pull/2401
* Refactor `elementBelongsToThisComponent` by @smnandre in https://github.com/symfony/ux/pull/2399
* Fix required select not initialized by @dsoriano in https://github.com/symfony/ux/pull/2403

### Twig Components
* Cache component properties metadata by @smnandre in https://github.com/symfony/ux/pull/2211
* Optimize TwigPreLexer by @smnandre in https://github.com/symfony/ux/pull/2316
* Improve `BlockStack` performance by @smnandre in https://github.com/symfony/ux/pull/2343
* Fix directory separator in Debug command by @clussiana in https://github.com/symfony/ux/pull/2342
* Improve `ComponentFactory` performance by @smnandre in https://github.com/symfony/ux/pull/2344
* Store mount methods in compiler pass by @smnandre in https://github.com/symfony/ux/pull/2357
* Cache template class resolution by @smnandre in https://github.com/symfony/ux/pull/2364
* Ignore "nested" for Alpine & Vue attributes by @smnandre in https://github.com/symfony/ux/pull/2328

### StimulusBundle
* Update Jetbrains stimulus plugin url by @Basster in https://github.com/symfony/ux/pull/2299
* Check controllers source files for laziness by @MatTheCat in https://github.com/symfony/ux/pull/2304
* Mention `removeComments` will no longer be necessary by @MatTheCat in https://github.com/symfony/ux/pull/2347

### Turbo
* **Add generic `<Turbo:Stream>` component by @seb-jean in https://github.com/symfony/ux/pull/2302**
* **Add `<Turbo:Frame>` component by @seb-jean in https://github.com/symfony/ux/pull/2303**
* **Support custom `TurboStreamResponse` actions by @DRaichev in https://github.com/symfony/ux/pull/2298**
* **Add support for providing multiple mercure topics to `turbo_stream_listen` by @norkunas in https://github.com/symfony/ux/pull/2407**
* Delete whitespace for `<twig:Turbo:Stream:*>` components by @seb-jean in https://github.com/symfony/ux/pull/2300

### Icons
* Fix commands receive polluted SVG by @smnandre in https://github.com/symfony/ux/pull/2314
* Prepare lock / warmup optimization by @smnandre in https://github.com/symfony/ux/pull/2351
* Support aliases in LockIconsCommand by @smnandre in https://github.com/symfony/ux/pull/2356
* Fetch icons in batch in Import command by @smnandre in https://github.com/symfony/ux/pull/2352
* Use dedicated cache pool by @IndraGunawan in https://github.com/symfony/ux/pull/2410

### Map
* **Add polyline support by @sblondeau in https://github.com/symfony/ux/pull/2340**
* **Make UX Map compatible with Live Components (and some internal things) by @Kocal in https://github.com/symfony/ux/pull/2385**
* Update documentation by @smnandre in https://github.com/symfony/ux/pull/2317
* Update `index.rst` by @LesRouxDominerontLeMonde in https://github.com/symfony/ux/pull/2339
* Introduce `ux_map.google_maps.default_map_id` configuration by @Kocal in https://github.com/symfony/ux/pull/2350
* Add documentation about `ux_map.google_maps.default_map_id`  by @Kocal in https://github.com/symfony/ux/pull/2358
* Remove duplicate question mark ? in DSN string by @alexander-schranz in https://github.com/symfony/ux/pull/2371
* Fix Twig Component example by @ker0x in https://github.com/symfony/ux/pull/2373
* Add position and missing closing parenthesis by @tacman in https://github.com/symfony/ux/pull/2360
* Fix typos 'an' should be 'a' in READMEs by @tacman in https://github.com/symfony/ux/pull/2398
* Fix and improve TypeScript types, refactor same logic into dedicated methods (to reduce file size) by @Kocal in https://github.com/symfony/ux/pull/2406

### Svelte
* Fix a broken link by @MrYamous in https://github.com/symfony/ux/pull/2383

### React
* Fix broken Link in docs by @xDeSwa in https://github.com/symfony/ux/pull/2372

### Translator
* Handle W3C locale format on document element by @aleho in https://github.com/symfony/ux/pull/2390

### Site
* Update dependencies by @smnandre in https://github.com/symfony/ux/pull/2293
* Fix React/Svelte/Vue demo by @smnandre in https://github.com/symfony/ux/pull/2284
* Update docker compose configuration by @Nek- in https://github.com/symfony/ux/pull/2305
* Update `bin/link-locally` by @smnandre in https://github.com/symfony/ux/pull/2310
* Test Symfony 7.2 beta by @smnandre in https://github.com/symfony/ux/pull/2323
* Use variable webfont by @smnandre in https://github.com/symfony/ux/pull/2327
* Update demo components paths by @smnandre in https://github.com/symfony/ux/pull/2336
* Fix FileTree markup (minor) by @smnandre in https://github.com/symfony/ux/pull/2335
* Update symfony by @smnandre in https://github.com/symfony/ux/pull/2346
* Fix typo on cookbook index by @kbond in https://github.com/symfony/ux/pull/2355

### Miscellaneous
* Add myself to code-owners by @Kocal in https://github.com/symfony/ux/pull/2308
* Update the issue template by @smnandre in https://github.com/symfony/ux/pull/2320
* Add CI workflow to compute diff between files dist files by @Kocal in https://github.com/symfony/ux/pull/2269
* Add per-package Yarn scripts (build, watch, test, lint, ...) by @Kocal in https://github.com/symfony/ux/pull/2326
* Some improvements for dependencies management when testing by @Kocal in https://github.com/symfony/ux/pull/2349
* Fix some misc doc issues by @javiereguiluz in https://github.com/symfony/ux/pull/2387
* Add PR template and auto-close PR on subtree split repositories by @Kocal in https://github.com/symfony/ux/pull/2395
* Add `CONTRIBUTING.md` by @Kocal in https://github.com/symfony/ux/pull/2408

### New Contributors
* @MrYamous made their first contribution in https://github.com/symfony/ux/pull/2295
* @Basster made their first contribution in https://github.com/symfony/ux/pull/2299
* @LesRouxDominerontLeMonde made their first contribution in https://github.com/symfony/ux/pull/2339
* @clussiana made their first contribution in https://github.com/symfony/ux/pull/2342
* @alexander-schranz made their first contribution in https://github.com/symfony/ux/pull/2371
* @DRaichev made their first contribution in https://github.com/symfony/ux/pull/2298
* @sblondeau made their first contribution in https://github.com/symfony/ux/pull/2340
* @HugoSEIGLE made their first contribution in https://github.com/symfony/ux/pull/2377

**Full Changelog**: https://github.com/symfony/ux/compare/v2.21.0...v2.22.0

## 2.21.0 : Turbo + TwigComponents = ❤️ (v2.21.0)

Released: 2024-10-22

Hey UX-er's!

In addition to many minor bug fixes and improvements across all packages, this release adds new
`<twig:Turbo:Stream:*>` Twig components to Turbo. Also in Turbo, a new`TurboStreamResponse` and
`TurboStream` helpers we added.

### Map
* Explicitly require StimulusBundle in Bridges, fix tests by @Kocal in https://github.com/symfony/ux/pull/2207
* Update `index.rst` by @ebedy in https://github.com/symfony/ux/pull/2229

### Translator
* Many performance improvements on the cache warming by @Kocal in https://github.com/symfony/ux/pull/2206

### Twig Components
* Fix an example in Twig Components doc by @javiereguiluz in https://github.com/symfony/ux/pull/2213
* Fix `ux:icon` & `ux:map` renders by @smnandre in https://github.com/symfony/ux/pull/2210
* Fix internal variables are dispatched by @smnandre in https://github.com/symfony/ux/pull/2220
* Fix wiring of `ComponentRuntime` by @kbond in https://github.com/symfony/ux/pull/2231
* Fix outerblock markup example by @tobiasberge in https://github.com/symfony/ux/pull/2235

### Toggle Password
* Misc updates in TogglePassword docs by @javiereguiluz in https://github.com/symfony/ux/pull/2214

### React
* Update some dependencies to fix some issues from Dependabot by @Kocal in https://github.com/symfony/ux/pull/2219
* Add `permanent` option to `react_component` function by @smnandre in https://github.com/symfony/ux/pull/2283
* Update `phpunit.xml.dist` by @smnandre in https://github.com/symfony/ux/pull/2286

### Swup
* For Swup's dev dependencies exclusion from our yarn.lock by @Kocal in https://github.com/symfony/ux/pull/2221

### StimulusBundle
* Normalize Stimulus controller name in event name by @7-zete-7 in https://github.com/symfony/ux/pull/2159

### Autocomplete
* Add czech and slovak translation for "Add ..." message by @fbuchlak in https://github.com/symfony/ux/pull/2216
* Typo on Autocomplete page by @alexislefebvre in https://github.com/symfony/ux/pull/2253
* Add missing types by @smnandre in https://github.com/symfony/ux/pull/2265
* Remove `symfony/string` dependency by @smnandre in https://github.com/symfony/ux/pull/2267
* Remove unused `symfony/security-csrf` dev dependency by @smnandre in https://github.com/symfony/ux/pull/2264
* Update `AutocompleteBundle.de.php` by @simonsolutions in https://github.com/symfony/ux/pull/2285
* Translate "Add ..." text with remote data setup by @jonasdekeukelaere in https://github.com/symfony/ux/pull/2279

### Icons
* Some updates in the full configuration example docs by @javiereguiluz in https://github.com/symfony/ux/pull/2226
* Fix a typo in UX Icons docs by @dfridrich in https://github.com/symfony/ux/pull/2275
* Patch to handle Iconify API change by @smnandre in https://github.com/symfony/ux/pull/2289
* Improve `icons:lock` command verbosity by @smnandre in https://github.com/symfony/ux/pull/2287

### Turbo
* Add `Helper/TurboStream::append()` et al. methods by @nicolas-grekas in https://github.com/symfony/ux/pull/2196
* Add `<twig:Turbo:Stream:*>` components by @nicolas-grekas in https://github.com/symfony/ux/pull/2227
* Replace JS toolchain by asset-mapper when testing ux-turbo by @nicolas-grekas in https://github.com/symfony/ux/pull/2232
* Fix to the right test by @GrinWay in https://github.com/symfony/ux/pull/2234

### Dropzone
* Enable file replacement via "drag-and-drop" by @rrr63 in https://github.com/symfony/ux/pull/2154

### Live Components
* Update `index.rst` by @GrinWay in https://github.com/symfony/ux/pull/2274

### Miscellaneous
* Migrate from Yarn Classic to Yarn Berry by @Kocal in https://github.com/symfony/ux/pull/2222
* Delete `UPGRADE.md` by @smnandre in https://github.com/symfony/ux/pull/2242
* Clean `.gitignore`/`.gitattributes` by @smnandre in https://github.com/symfony/ux/pull/2243
* Remove yarn commands in documentations by @Kocal in https://github.com/symfony/ux/pull/2263
* Remove stimulus-bundle unnecessary warning on documentation by @feymo in https://github.com/symfony/ux/pull/2270

### New Contributors
* @ebedy made their first contribution in https://github.com/symfony/ux/pull/2229
* @tobiasberge made their first contribution in https://github.com/symfony/ux/pull/2235
* @GrinWay made their first contribution in https://github.com/symfony/ux/pull/2274
* @dfridrich made their first contribution in https://github.com/symfony/ux/pull/2275
* @jonasdekeukelaere made their first contribution in https://github.com/symfony/ux/pull/2279

**Full Changelog**: https://github.com/symfony/ux/compare/v2.20.0...v2.21.0

## 2.20.0 : Performance and Optimization! (v2.20.0)

Released: 2024-09-24

Hey UX-ers!

This release is packed full of bug fixes and new features. You can now add Polygons in _Map_ and configure icon sets and aliases in _Icons_. There are also some great performance optimizations, especially in _Twig_/_Live_ components and _StimulusBundle_.

### Map

* Rename `render_map` Twig function `ux_map` by @smnandre in https://github.com/symfony/ux/pull/2073
* Fix bridges `.gitattributes` by @smnandre in https://github.com/symfony/ux/pull/2080
* Fix a Twig function name in docs by @javiereguiluz in https://github.com/symfony/ux/pull/2107
* Misc updates in the docs by @javiereguiluz in https://github.com/symfony/ux/pull/2112
* Rename `leaflet` to `L` in event's payloads by @Kocal in https://github.com/symfony/ux/pull/2113
* Adjust changelogs and fix `render_map` deprecated version by @Kocal in https://github.com/symfony/ux/pull/2138
* Render map from Twig with `ux_map()` and `<twig:ux:map />` by @smnandre in https://github.com/symfony/ux/pull/2117
* Fix Google/Leaflet bridges when using Webpack Encore by @Kocal in https://github.com/symfony/ux/pull/2199
* Adding polygons to google and leaflet + info window by @rrr63 in https://github.com/symfony/ux/pull/2162
* Fixed typo in links to Symfony UX repo by @sblum51 in https://github.com/symfony/ux/pull/2193
* Fix some links in docs by @javiereguiluz in https://github.com/symfony/ux/pull/2198

### Twig Components

* Original `Throwable` get lost during component render by @cuchac in https://github.com/symfony/ux/pull/2030
* Fix debug command by @yceruto in https://github.com/symfony/ux/pull/2088
* Twig code style & "boolean props" part by @smnandre in https://github.com/symfony/ux/pull/2082
* Remove `$tag` parameter from `*Node`, as it is now deprecated by `twig/twig` 3.12 by @Kocal in https://github.com/symfony/ux/pull/2114
* Add notice about needing `phpdocumentor/reflection-docblock` by @dejagersh in https://github.com/symfony/ux/pull/2102
* Add some explanation about mixing Twig and HTML syntax in nested components by @javiereguiluz in https://github.com/symfony/ux/pull/2125
* Deprecate `cva` twig function by @Kocal in https://github.com/symfony/ux/pull/2144
* Update `index.rst` by @LaurentMarquet in https://github.com/symfony/ux/pull/2170
* Use a `RuntimeExtension` by @smnandre in https://github.com/symfony/ux/pull/2168
* Optimize the `ComponentLoggerListener` by @smnandre in https://github.com/symfony/ux/pull/2167
* Fix HTML in the profiler panel by @javiereguiluz in https://github.com/symfony/ux/pull/2181
* Optimize `ComponentFactory` by @smnandre in https://github.com/symfony/ux/pull/2201

### Live Components

* Fix PHP 8.4 errors + deprecations by @smnandre in https://github.com/symfony/ux/pull/2079
* Add `setRouteLocale` in `TestLiveComponent` by @smnandre in https://github.com/symfony/ux/pull/2124
* Update CSRF token after component request by @tijnema in https://github.com/symfony/ux/pull/2022
* Fix `DeferLiveComponentSubscriber` service definition by @smnandre in https://github.com/symfony/ux/pull/2200

### Autocomplete

* Reset form state on each request for applications that reuse the Symfony application between requests by @dotdevio in https://github.com/symfony/ux/pull/2094
* Translate "Add ..." text by @jmsche in https://github.com/symfony/ux/pull/2108

### Icons

* Icon aliases by @smnandre in https://github.com/symfony/ux/pull/2127
* Fix issues found by DOCtor-RST by @Kocal in https://github.com/symfony/ux/pull/2145
* Add support for int/float attribute to `ux_icon` function by @Kocal in https://github.com/symfony/ux/pull/2149
* Add _versionadded_ for Icon Aliases to doc by @kbond in https://github.com/symfony/ux/pull/2163
* Configure icon sets: path, alias & icon attributes by @smnandre in https://github.com/symfony/ux/pull/2156

### Dropzone

* Change physical link to the default style file by @chadyred in https://github.com/symfony/ux/pull/2188

### Translator

* Option to throw an exception instead of returning the message as is when the message is not found. by @Crovitche-1623 in https://github.com/symfony/ux/pull/2185

### StimulusBundle

* Improve `StimulusAttributes` rendering performances by switching to `html` escaping strategy by @Kocal in https://github.com/symfony/ux/pull/2180

### Miscellaneous

* Run PHP-CS-Fixer by @Kocal in https://github.com/symfony/ux/pull/2074
* Update php-cs-fixer config by @smnandre in https://github.com/symfony/ux/pull/2077
* Configure `ISSUE_TEMPLATE` by @smnandre in https://github.com/symfony/ux/pull/2084
* Upgrade JS build dependencies by @Kocal in https://github.com/symfony/ux/pull/2075
* Fix Twig extension return types by @smnandre in https://github.com/symfony/ux/pull/2076
* Link to UX support page by @smnandre in https://github.com/symfony/ux/pull/2093
* Upgrade Vitest, use a real browser for Map Bridges tests by @Kocal in https://github.com/symfony/ux/pull/2146
* Add tests on PHP8.4 by @smnandre in https://github.com/symfony/ux/pull/2169

### New Contributors

* @cuchac made their first contribution in https://github.com/symfony/ux/pull/2030
* @dotdevio made their first contribution in https://github.com/symfony/ux/pull/2094
* @dejagersh made their first contribution in https://github.com/symfony/ux/pull/2102
* @tijnema made their first contribution in https://github.com/symfony/ux/pull/2022
* @LaurentMarquet made their first contribution in https://github.com/symfony/ux/pull/2170
* @chadyred made their first contribution in https://github.com/symfony/ux/pull/2188
* @Crovitche-1623 made their first contribution in https://github.com/symfony/ux/pull/2185
* @sblum51 made their first contribution in https://github.com/symfony/ux/pull/2193
* @rrr63 made their first contribution in https://github.com/symfony/ux/pull/2162

**Full Changelog**: https://github.com/symfony/ux/compare/v2.19.3...v2.20.0

## 2.19.3 : Translator fix (v2.19.3)

Released: 2024-08-16

### Map
* Fix doc link by @smnandre in https://github.com/symfony/ux/pull/2058
* Fix Typo: Removal of an extra ";" by @yoanbernabeu in https://github.com/symfony/ux/pull/2064

### Translator
* Revert #1965, which break cache warmup for Symfony applications by @Kocal in https://github.com/symfony/ux/pull/2060

### New Contributors
* @fbnlsr made their first contribution in https://github.com/symfony/ux/pull/2067

**Full Changelog**: https://github.com/symfony/ux/compare/v2.19.2...v2.19.3

## 2.19.2 : Enable Anon. Twig Components in Bundles (v2.19.2)

Released: 2024-08-13

Another follow up to 2.19.0 that fixes UX Map plus enables a convention for providing anonymous Twig Components in 3rd-party bundles!

### Map
* Re-add keyword "symfony-ux", to fix Symfony Flex `package.json` resolving by @Kocal in https://github.com/symfony/ux/pull/2052
* [Leaflet] Fix marker icon gradients rendering, which can fails on some projects by @Kocal in https://github.com/symfony/ux/pull/2055

### Twig Components
* Adding convention to load Anonymous components from bundles by @yceruto in https://github.com/symfony/ux/pull/2019

### Live Components
* Update naming of stimulus controller on default attributes - index.rst by @DennisdeBest in https://github.com/symfony/ux/pull/2046

### Autocomplete
* Fix warning and code formatting on Autocomplete by @alexislefebvre in https://github.com/symfony/ux/pull/2049

### New Contributors
* @alexislefebvre made their first contribution in https://github.com/symfony/ux/pull/2049

**Full Changelog**: https://github.com/symfony/ux/compare/v2.19.1...v2.19.2

## 2.19.1 : UX Map Improvements (v2.19.1)

Released: 2024-08-12

Just a small follow up to 2.19.0 that adds some missing UX Map features!

### Map
* Add the possibility to not configure map zoom/center if fit bounds to markers by @Kocal in https://github.com/symfony/ux/pull/2045
* Add support for `libraries` for Google Bridge, inject provider's SDK (`L` or `google`) to dispatched events by @Kocal in https://github.com/symfony/ux/pull/2044

**Full Changelog**: https://github.com/symfony/ux/compare/v2.19.0...v2.19.1

## 2.19.0 : New UX Map Package (v2.19.0)

Released: 2024-08-12

Hey UX-ers!

This is a big new release with a lot of bug fixes, quality of live improvements, and a
new UX Map package. A new `live_action()` Twig function was added to dramatically reduce
the boilerplate for Live Component actions.

### Translator

* Revert Fix changing dump directory using AssetMapper by @maelanleborgne in https://github.com/symfony/ux/pull/1913
* Disable cache warmup when translator is identity translator by @SanderVerkuil in https://github.com/symfony/ux/pull/1965
* Fix CS on TranslatorCompilerPass by @Kocal in https://github.com/symfony/ux/pull/1996
* Add configuration to filter dumped translations by domain by @maelanleborgne in https://github.com/symfony/ux/pull/1930

### Turbo

* Fix Doctrine Proxy are not Broadcasted by @smnandre in https://github.com/symfony/ux/pull/1929
* Modernize code (ppp, types..) by @smnandre in https://github.com/symfony/ux/pull/1931
* Fix mercure config-file by @Chris53897 in https://github.com/symfony/ux/pull/1928

### Twig Components

* Ignore array|sequence in exception message by @smnandre in https://github.com/symfony/ux/pull/1940
* Allow @ prefix in nested attributes by @smnandre in https://github.com/symfony/ux/pull/1966
* Allow attributes to be prefixed with `@` by @kbond in https://github.com/symfony/ux/pull/1960
* Minor syntax fixes in the Twig component docs by @javiereguiluz in https://github.com/symfony/ux/pull/1977
* Fix wrong example for HTML syntax by @WebMamba in https://github.com/symfony/ux/pull/1985
* Fix null props not overwrite parent context by @WebMamba in https://github.com/symfony/ux/pull/1989
* Fix random errors are throw when empty props by @WebMamba in https://github.com/symfony/ux/pull/1988
* Mention that boolean properties require the dynamic syntax by @javiereguiluz in https://github.com/symfony/ux/pull/1991
* Minor syntax fix in Twig Components docs by @javiereguiluz in https://github.com/symfony/ux/pull/2021

### Live Components

* Tokenize classes on all allowed whitespaces by @aleho in https://github.com/symfony/ux/pull/1828
* Fix typing for loading hooks + HookManager by @YummYume in https://github.com/symfony/ux/pull/1921
* Fix (de)hydration of composite and/or foreign ID entities by @MatTheCat in https://github.com/symfony/ux/pull/1957
* Typo in LiveComponentHydrator.php by @JeanDavidDaviet in https://github.com/symfony/ux/pull/1972
* Handle `loading="lazy"` for LiveComponent only by @smnandre in https://github.com/symfony/ux/pull/1976
* Allow updates in arrays of DTOs by @cgrabenstein in https://github.com/symfony/ux/pull/1990
* Add a new helper to interact with forms in functional tests by @yoye in https://github.com/symfony/ux/pull/1992
* Fix 'onUpdated' hook call by @kempha in https://github.com/symfony/ux/pull/1980
* Add 'live_action' twig function by @pierredup in https://github.com/symfony/ux/pull/1946
* Document how to use `extra_options` in the Ajax-powered autocomplete by @jakubtobiasz in https://github.com/symfony/ux/pull/1702
* Add missing end delimiter by @JanoschOltmanns in https://github.com/symfony/ux/pull/2037

### Dropzone

* Remove event listeners on disconnect by @aleho in https://github.com/symfony/ux/pull/1951

### Icons

* Expose IconRendererInterface by @smnandre in https://github.com/symfony/ux/pull/1889
* Emphasis HTML syntax requires TwigComponent by @smnandre in https://github.com/symfony/ux/pull/1994
* Fix some misc issues in UX Icons docs by @javiereguiluz in https://github.com/symfony/ux/pull/2027
* Add `ignore_not_found` config option by @smnandre in https://github.com/symfony/ux/pull/2023

### React

* Update index.rst by @elkuku in https://github.com/symfony/ux/pull/1974

### Lazy Image

* Webperfs and LCP considerations by @Kocal in https://github.com/symfony/ux/pull/1967

### Map

* Create Map component by @Kocal in https://github.com/symfony/ux/pull/1937
* Rename "symfony/ux-map-%s" to "symfony/ux-%s-map" by @Kocal in https://github.com/symfony/ux/pull/2031
* Fix custom attribute "data-controller" usage by @Kocal in https://github.com/symfony/ux/pull/2032
* [Leaflet] Fix Marker inside-circle by @Kocal in https://github.com/symfony/ux/pull/2036
* [Leaflet] Fix Popup's automatic-content by @Kocal in https://github.com/symfony/ux/pull/2035
* Change "BeforeConnect" for "BeforeCreate" in documentation by @Kocal in https://github.com/symfony/ux/pull/2039
* Add "extra" data for markers and infowindows by @Kocal in https://github.com/symfony/ux/pull/2040
* Fix some comments in component defer part by @Nek- in https://github.com/symfony/ux/pull/2043

### _Miscellaneous_

* Upgrade target from es2017 to es2021 by @Kocal in https://github.com/symfony/ux/pull/1987
* Drop ESLint and Prettier for Biome by @Kocal in https://github.com/symfony/ux/pull/1848
* Upgrade Biomejs, fix patterns, don't use yarn workspaces by @Kocal in https://github.com/symfony/ux/pull/2015
* Update README.md by @94noni in https://github.com/symfony/ux/pull/2038

### New Contributors
* @aleho made their first contribution in https://github.com/symfony/ux/pull/1828
* @MatTheCat made their first contribution in https://github.com/symfony/ux/pull/1957
* @SanderVerkuil made their first contribution in https://github.com/symfony/ux/pull/1965
* @cgrabenstein made their first contribution in https://github.com/symfony/ux/pull/1990
* @Chris53897 made their first contribution in https://github.com/symfony/ux/pull/1928
* @yoye made their first contribution in https://github.com/symfony/ux/pull/1992
* @kempha made their first contribution in https://github.com/symfony/ux/pull/1980
* @JanoschOltmanns made their first contribution in https://github.com/symfony/ux/pull/2037
* @Nek- made their first contribution in https://github.com/symfony/ux/pull/2043

**Full Changelog**: https://github.com/symfony/ux/compare/v2.18.1...v2.19.0

## 2.18.1 : Hotfix (v2.18.1)

Released: 2024-06-12

👋🏻 This is a small release that fixes some issues we had in 2.18.0.

### Twig Components

* Revert throwing exception when public property is unitialized by @smnandre in https://github.com/symfony/ux/pull/1911
* Revert removing `twig_component.controllers_json` by @smnandre in https://github.com/symfony/ux/pull/1908

### Live Components

* Accept live component Content-Type with suffix by @WebMamba in https://github.com/symfony/ux/pull/1903

### Stimulus

* Use camelCase for target naming by @Jibbarth in https://github.com/symfony/ux/pull/1910

### Translator

* Fix changing dump directory using AssetMapper by @maelanleborgne in https://github.com/symfony/ux/pull/1904

**Full Changelog**: https://github.com/symfony/ux/compare/v2.18.0...v2.18.1

## 2.18.0 : Mostly Maintenance (v2.18.0)

Released: 2024-06-07

Hey UX'ers!

This is mostly a maintenance release with a lot of small fixes and improvements across all components.
The most notable changes are the addition of Slovak translations for the Autocomplete component the
abstraction of image content fetching in the Lazy Image component.

### Lazy Image

* Abstract image content fetching by @Kocal in https://github.com/symfony/ux/pull/1781
* Re-add forgotten `twig.runtime` by @Kocal in https://github.com/symfony/ux/pull/1771
* Fix code block rendering in docs by @mttsch in https://github.com/symfony/ux/pull/1876

### Autocomplete

* Ignore the `ExtraLazyChoiceLoader` if the parent `$loader` is `null` by @vesselind in https://github.com/symfony/ux/pull/1775
* Add Slovak translations by @fbuchlak in https://github.com/symfony/ux/pull/1866

### Turbo

* Document running tests locally by @kbond in https://github.com/symfony/ux/pull/1778
* Fix `TurboExtension` for PhpStan by @smnandre in https://github.com/symfony/ux/pull/1854
* Fix the example with Expression Language by @seb-jean in https://github.com/symfony/ux/pull/1874

### Live Components

* Add a note about `render:finished` event by @smnandre in https://github.com/symfony/ux/pull/1779
* Fix namespaces on documentation by @mickaelblondeau in https://github.com/symfony/ux/pull/1801
* Add signature overload for on and off methods of component by @YummYume in https://github.com/symfony/ux/pull/1685
* Add support for testing file uploads in actions by @daFish in https://github.com/symfony/ux/pull/1832
* Fix EscaperRuntime deprecation by @smnandre in https://github.com/symfony/ux/pull/1855
* Add missing closing paranthesis by @richardhj in https://github.com/symfony/ux/pull/1859

### Twig Components

* Fix LiveComponent namespace mapping by @smnandre in https://github.com/symfony/ux/pull/1772
* Misc fixes in Twig Component docs by @javiereguiluz in https://github.com/symfony/ux/pull/1789
* Remove the `--dir` option in `debug:twig-component` command by @javiereguiluz in https://github.com/symfony/ux/pull/1790
* Fix aria attribute cannot be removed by @smnandre in https://github.com/symfony/ux/pull/1805
* Throws if exposed public prop is uninitialized by @smnandre in https://github.com/symfony/ux/pull/1780
* Fix silently failing tests by @adrienlucas in https://github.com/symfony/ux/pull/1810
* Remove wrongly added configuration by @smnandre in https://github.com/symfony/ux/pull/1823
* Allow input props to have the same name as context variables by @squrious in https://github.com/symfony/ux/pull/1820
* Fix `EscaperExtension` deprecation by @smnandre in https://github.com/symfony/ux/pull/1835
* Update DOC preMount validation data code by @cavasinf in https://github.com/symfony/ux/pull/1845
* Disable profiler integration via configuration by @smnandre in https://github.com/symfony/ux/pull/1877
* Restrict anonymous component lookup to Twig files in debug command by @squrious in https://github.com/symfony/ux/pull/1882

### Icons

* Fix warning when Iconset license URL is null by @smnandre in https://github.com/symfony/ux/pull/1792
* Use lowercase `<twig:ux:icon />` in documentation by @smnandre in https://github.com/symfony/ux/pull/1798
* Improve aria attributes rendering by @smnandre in https://github.com/symfony/ux/pull/1797
* Document http-client requirement by @smnandre in https://github.com/symfony/ux/pull/1885

### Translator

* Create valid constant names for keys starting with numeric chars by @wolfgangweintritt in https://github.com/symfony/ux/pull/1809

### Stimulus

* Use Twig >3.9 `EscaperRuntime` by @smnandre in https://github.com/symfony/ux/pull/1824
* Use version instead of url in docs by @ruudk in https://github.com/symfony/ux/pull/1865

### Chart.js

* Replace `chart.js/auto` import with `Chart.register` calls by @smnandre in https://github.com/symfony/ux/pull/1263
* Improve Y axis formatting example by @hellomedia in https://github.com/symfony/ux/pull/1837

### ux.symfony.com

* Fix UX Icons color by @smnandre in https://github.com/symfony/ux/pull/1888
* Add Icons package data by @smnandre in https://github.com/symfony/ux/pull/1864
* CodeBlock with gutter and line pre-slice by @smnandre in https://github.com/symfony/ux/pull/1863
* Icons colors by @smnandre in https://github.com/symfony/ux/pull/1831
* Some more cleaning by @smnandre in https://github.com/symfony/ux/pull/1815
* Add `robots.txt` & `sitemap.xml` by @smnandre in https://github.com/symfony/ux/pull/1814
* Clean demos & packages pages by @smnandre in https://github.com/symfony/ux/pull/1813
* Fix input range color by @smnandre in https://github.com/symfony/ux/pull/1821
* Clean templates by @smnandre in https://github.com/symfony/ux/pull/1827
* Adapt highlighted code blocks to tempest by @smnandre in https://github.com/symfony/ux/pull/1811
* Various small fixes / improvements by @smnandre in https://github.com/symfony/ux/pull/1804
* switch from `highlight.js` to `tempest/highlight` by @kbond in https://github.com/symfony/ux/pull/1808
* Configure Twig-CS-Fixer by @smnandre in https://github.com/symfony/ux/pull/1793
* adjust external link config by @kbond in https://github.com/symfony/ux/pull/1794
* Refactor Translator page by @smnandre in https://github.com/symfony/ux/pull/1783
* refactor commonmark config by @kbond in https://github.com/symfony/ux/pull/1791
* Fix InvoiceCreator demo by @WebMamba in https://github.com/symfony/ux/pull/1861
* Infinite Scroll 2/2  by @smnandre in https://github.com/symfony/ux/pull/1887

### New Contributors
* @vesselind made their first contribution in https://github.com/symfony/ux/pull/1775
* @mickaelblondeau made their first contribution in https://github.com/symfony/ux/pull/1801
* @YummYume made their first contribution in https://github.com/symfony/ux/pull/1685
* @wolfgangweintritt made their first contribution in https://github.com/symfony/ux/pull/1809
* @hellomedia made their first contribution in https://github.com/symfony/ux/pull/1837
* @richardhj made their first contribution in https://github.com/symfony/ux/pull/1859
* @fbuchlak made their first contribution in https://github.com/symfony/ux/pull/1866
* @ruudk made their first contribution in https://github.com/symfony/ux/pull/1865

**Full Changelog**: https://github.com/symfony/ux/compare/v2.17.0...v2.18.0


## 2.17.0 : New UX Icons Package (v2.17.0)

Released: 2024-04-23

Hey UX-ers!

This is a big release - lots of new features to Twig/Live Components and the first release of [UX Icons](https://symfony.com/bundles/ux-icons/current/index.html)! With UX Icons, comes a [beautiful icon search on ux.symfony.com](https://ux.symfony.com/icons)!

### Live Components
* Improve child render handling: avoid removing element from DOM when possible by @weaverryan in https://github.com/symfony/ux/pull/1561
* Add modifier option to `LiveProp` by @squrious in https://github.com/symfony/ux/pull/1507
* Fix collections hydration with serializer by @squrious in https://github.com/symfony/ux/pull/1583
* Lazy load LiveComponent by @smnandre in https://github.com/symfony/ux/pull/1515
* Throw exception for typed LiveProps as interfaces by @smnandre in https://github.com/symfony/ux/pull/1593
* Alias URL bound props by @squrious in https://github.com/symfony/ux/pull/1396

### Twig Components
* CVA: Apply function accept null arguments by @WebMamba in https://github.com/symfony/ux/pull/1575
* Add `attributes.has()` method by @barbieswimcrew in https://github.com/symfony/ux/pull/1571
* CVA: Allow array for base, variants and compound by @WebMamba in https://github.com/symfony/ux/pull/1600
* CVA: Allow compound variant value to be string by @kbond in https://github.com/symfony/ux/pull/1610
* Allow stringable objects as attribute values by @kbond in https://github.com/symfony/ux/pull/1609
* Nested attributes by @kbond in https://github.com/symfony/ux/pull/1405
* Remove experimental tag to HTML syntax by @WebMamba in https://github.com/symfony/ux/pull/1662
* CVA: Resolving boolean as variant keys by @smnandre in https://github.com/symfony/ux/pull/1710
* Handle `aria-*` attribute boolean values by @smnandre in https://github.com/symfony/ux/pull/1709
* Merge props from template with class props by @WebMamba in https://github.com/symfony/ux/pull/1652
* Twig "use_yield" compatibility by @smnandre in https://github.com/symfony/ux/pull/1487

### Icons
* Introduce `symfony/ux-icons` by @kbond in https://github.com/symfony/ux/pull/1450https://github.com/symfony/ux/pull/1603
* Website Icon search (beta) by @smnandre in https://github.com/symfony/ux/pull/1577

### Chart.js
* Add view-value-change event by @IndraGunawan in https://github.com/symfony/ux/pull/1605

### Autocomplete
* Command `make:autocomplete-field` output a doc compliant class by @lucbu in https://github.com/symfony/ux/pull/1699
* Use `choice_value` in the `WrappedEntityTypeAutocompleter` in `EntityAutocompleteField` by @jakubtobiasz in https://github.com/symfony/ux/pull/1723

### Turbo

* Use blocks instead of partials to render turbo-streams by @nicolas-grekas in https://github.com/symfony/ux/pull/1045

### Lazy Image

* Cache BlurHash, close #2 by @Kocal in https://github.com/symfony/ux/pull/1755
* Support `intervention/image` 3 by @kbond in https://github.com/symfony/ux/pull/1766

### New Contributors
* @o0morgan0o made their first contribution in https://github.com/symfony/ux/pull/1580
* @barbieswimcrew made their first contribution in https://github.com/symfony/ux/pull/1576
* @tomschwiha made their first contribution in https://github.com/symfony/ux/pull/1621
* @IndraGunawan made their first contribution in https://github.com/symfony/ux/pull/1605
* @JeanDavidDaviet made their first contribution in https://github.com/symfony/ux/pull/1633
* @gremo made their first contribution in https://github.com/symfony/ux/pull/1615
* @kachnitel made their first contribution in https://github.com/symfony/ux/pull/1584
* @yoanbernabeu made their first contribution in https://github.com/symfony/ux/pull/1654
* @LtMost made their first contribution in https://github.com/symfony/ux/pull/1703
* @JorickPepin made their first contribution in https://github.com/symfony/ux/pull/1692
* @kasperh90 made their first contribution in https://github.com/symfony/ux/pull/1689
* @lucbu made their first contribution in https://github.com/symfony/ux/pull/1699
* @cavasinf made their first contribution in https://github.com/symfony/ux/pull/1705
* @raphael-geffroy made their first contribution in https://github.com/symfony/ux/pull/1716
* @daifma made their first contribution in https://github.com/symfony/ux/pull/1746
* @adrienlucas made their first contribution in https://github.com/symfony/ux/pull/1745

**Full Changelog**: https://github.com/symfony/ux/compare/v2.16.0...v2.17.0

## 2.16.0 : Live Components is Stable 🥳 (v2.16.0)

Released: 2024-02-29

Hi UX'ers!

This release is the first that declares Live Components as *stable* 🎆! This means that it is now protected by our backwards compatibility promise. However, there *are* some **BC breaks in LiveComponents** that will affect most projects. See https://github.com/symfony/ux/blob/2.x/src/LiveComponent/CHANGELOG.md#2160

In addition, this release has a number of fun features & fixes.

### Live Components

-   LiveComponents is now stable and no longer experimental 🥳
-   [BC BREAK] The `data-action-name` attribute behavior was removed in favor of using Stimulus "action parameters" and `data-live-action-param`. This is a breaking change if you were using the `data-action-name` attribute directly in your templates. #1418

    To upgrade your application, follow these changes:

    ```diff
    <button
        data-action="live#action"
    -    data-action-name="debounce(300)|save"
    +    data-live-action-param="debounce(300)|save"
    >Save</button>
    ```

    To pass arguments to an action, also use the Stimulus "action parameters" syntax:

    ```diff
    <button
        data-action="live#action"
    -     data-action-name="addItem(id={{ item.id }}, itemName=CustomItem)"
    +     data-live-action-param="addItem"
    +     data-live-id-param="{{ item.id }}"
    +     data-live-item-name-param="CustomItem"
    >Add Item</button>
    ```

    Additionally, the `prevent` modifier (e.g. `prevent|save`) was removed. Replace this with the standard Stimulus `:prevent` action option:

    ```diff
    <button
    -    data-action="live#action
    +    data-action="live#action:prevent"
    -    data-action-name="prevent|save"
    +    data-live-action-param="save"
     >Save</button>
    ```

-   [BC BREAK] The `data-event` attribute was removed in favor of using Stimulus "action parameters": rename `data-event` to `data-live-event-param`. Additionally, if you were passing arguments to the event name, use action parameter attributes for those as well - e.g. `data-live-foo-param="bar"`. #1418

-   Reverted setting `ignoreActiveValue: true` in Idiomorph #1548
-   New placeholder macro to generate defer/lazy skeleton #1532
-   improve TestLiveComponent::actingAs() #1461
-   Drop Twig 2 support #1436
-   Add better error message when hydrating dates #1431
-   Store TemplateMap in build_dir #1525

### Twig Component

-   Introduce CVA to style TwigComponent #1416
-   Drop Twig 2 support #1436
-   Fix full context is stored in profiler #1552

### Autocomplete 

-   Missing translations added for many languages #1527 #1528 #1535

### Translator

-   Increase version range of `intl-messageformat` to `^10.5.11`, in order to see a faster implementation of ICU messages parsing. #1443

### New Contributors
* @itsdanielfelix made their first contribution in https://github.com/symfony/ux/pull/1511
* @Fan2Shrek made their first contribution in https://github.com/symfony/ux/pull/1545
* @xDeSwa made their first contribution in https://github.com/symfony/ux/pull/1535

**Full Changelog**: https://github.com/symfony/ux/compare/v2.15.0...v2.16.0

Have fun!

## v2.15.0 - LiveComponents & Autocomplete improvements & more (v2.15.0)

Released: 2024-02-20

Hi UX'ers!

This release contains a mixture of new features and important bug fixes, especially LiveComponents & Autocomplete, which were discovered after the morphing library change in 2.14.0.

### Autocomplete

Add doctrine/orm 3 support #1468
-   Allow passing extra options to the autocomplete fields #1322
-   Fix 2 bugs where TomSelect would reset when not necessary #1502
-   Add one missing German translation #1521

### Chartjs

-   Remove restriction that prevented Chart.js 3.9 #1518

### LiveComponent

-   [BC BREAK] The `data-live-id` attribute was changed to `id` #1484
-   Fixed child handling bug during re-rendering introduced with the
    new morphing library in 2.14.0 #1484
-   Fix bug where the active input would maintain its value, but lose its cursor position #1501
-   Restrict Twig 3.9 for now #1486

### Turbo

-   Add Turbo 8 support #1476
-   Fix missing `use` statement used during broadcast #1475

### TwigComponent

-   Add the ability to render specific attributes from the `attributes` variable #1442
-   Restrict Twig 3.9 for now #1486
-   Build reproducible TemplateMap to fix possible post-deploy breakage #1497

### New Contributors
* @jrushlow made their first contribution in https://github.com/symfony/ux/pull/1475
* @partulaj made their first contribution in https://github.com/symfony/ux/pull/1485
* @simonsolutions made their first contribution in https://github.com/symfony/ux/pull/1521

**Full Changelog**: https://github.com/symfony/ux/compare/v2.14.2...v2.15.0

Have fun!

## Fixing Turbo support for newer Doctrine (v2.14.2)

Released: 2024-02-07

Hi UX'ers!



This release fixes a regression in the Live Component testing utilities.

### Turbo

* [Turbo] Fixing support for not using old ClassUtils by @weaverryan in https://github.com/symfony/ux/pull/1471

### StimulusBundle

* [StimulusBundle] UxPackageReader class doesn't support projects with varied structures using Composer with custom directory structure by @yobrx in https://github.com/symfony/ux/pull/1467

### New Contributors
* @yobrx made their first contribution in https://github.com/symfony/ux/pull/1467

**Full Changelog**: https://github.com/symfony/ux/compare/v2.14.1...v2.14.2

Have fun!

## Fix regression in Live Component testing tools (v2.14.1)

Released: 2024-02-03

Hi UX'ers!

This release fixes a regression in the Live Component testing utilities.

### Live Component

* fix: use method from metadata for live component test helper by @daFish in https://github.com/symfony/ux/pull/1434

### StimulusBundle

* Handles Windows directory separator when normalizing controller names by @tamcy in https://github.com/symfony/ux/pull/1444

### ux.symfony.com

* [Site] LiveMemory demo by @smnandre in https://github.com/symfony/ux/pull/1377

### New Contributors
* @tamcy made their first contribution in https://github.com/symfony/ux/pull/1444

**Full Changelog**: https://github.com/symfony/ux/compare/v2.14.0...v2.14.1

Have fun!

## Features & Fixed for LiveComponent, TwigComponent & other packages (v2.14.0)

Released: 2024-01-30

Hi UX'ers!

A beautiful release with a set of features across several packages. 100+ commits, from 19 contributors 🔥 .

### TwigComponent

-   Make `ComponentAttributes` traversable/countable
-   Fixed lexing some `{# twig comments #}` with HTML Twig syntax
-   Fix various usages of deprecated Twig code

### LiveComponent

-   Add support for URL binding in `LiveProp`
-   DOM morphing changed from `morphdom` to `idiomorph`
-   Allow multiple `LiveListener` attributes on a single method
-   Requests to LiveComponent are sent as POST by default
-   Add method prop to AsLiveComponent to still allow GET requests, usage: `#[AsLiveComponent(method: 'get')]`
-   Add a new `urlReferenceType` parameter to `AsLiveComponent`, which allows to
    generate different type URL (e.g. absolute) for the component Ajax calls
-   The `symfony/serializer` dependency is now optional
-   Added a `data-skip-morph` attribute to allow skipping morphing of an element
    (the element's attributes will be morphed, but its inner HTML will be overwritten
    instead of morphed)
-   Added an entry to the packages' `package.json` file so that `@symfony/ux-live-component`
    will appear in the user's `importmap.php` file if using AssetMapper. This
    will allow using the JavaScript from the package without extra setup.
-   Fixed edge-case rendering bug where a 2nd Ajax request might start before
    the 1st finished processing
-   Fix usage of `{% embed %}` with `{% block %}` in `<twig:>` components
-   Fixed `data-loading` not working when on root element of a component
-   Fixed error when `class` attributes contained a space at start or end
-   Fixed loading directives being matched in a child component

### Autocomplete

-   Fixed behavior of Autocomplete when the underlying `select` or `option`
    elements were modified to hopefully, more reliably, reset the autocomplete
    instance. This is particularly important with LiveComponents.
-   Add support for the `render.loading_more` Tom Select Virtual Scroll option (`loading_more_text`)
-   Avoid losing the selected options when the Stimulus component is disconnected
    and reconnected to the DOM.
-   Added `tom-select/dist/css/tom-select.bootstrap4.css` to `autoimport` - this
    will cause this to appear in your `controllers.json` file by default, but disabled
    see.

### StimulusBundle

-   Added Typescript controllers support

### ChartJs

-   Add support for Chart.js version 4

**Full Changelog**: https://github.com/symfony/ux/compare/v2.13.3...v2.14.0

### New Contributors
* @nayodahl made their first contribution in https://github.com/symfony/ux/pull/1316
* @squrious made their first contribution in https://github.com/symfony/ux/pull/1230
* @srich387 made their first contribution in https://github.com/symfony/ux/pull/1367
* @vgaret made their first contribution in https://github.com/symfony/ux/pull/1338
* @hepisec made their first contribution in https://github.com/symfony/ux/pull/1218
* @althaus made their first contribution in https://github.com/symfony/ux/pull/1425

Have fun!

## Various minor bug fixes (v2.13.3)

Released: 2024-01-30

Hi UX'ers!

A bug fix release. Nice!

### TwigComponent

* Merge data-action in `ComponentAttributes` #1288
* Fix DataCollector return types #1297

### LiveComponent

* Fix date object hydration for custom format #1295
* Allow trailing coma in "props" tags #1298
* Fix `BatchActionController` redirection #1301

### StimulusBundle

* Remove `stimulus.asset_mapper.loader_javascript_compiler` when no asset-mapper

**Full Changelog**: https://github.com/symfony/ux/compare/v2.13.2...v2.13.3

### New Contributors
* @nieck made their first contribution in https://github.com/symfony/ux/pull/1272
* @maxrem made their first contribution in https://github.com/symfony/ux/pull/1269
* @boedah made their first contribution in https://github.com/symfony/ux/pull/1280
* @TBoileau made their first contribution in https://github.com/symfony/ux/pull/1275
* @JeroenMoonen made their first contribution in https://github.com/symfony/ux/pull/1302
* @mariusadam made their first contribution in https://github.com/symfony/ux/pull/1294
* @6insanes made their first contribution in https://github.com/symfony/ux/pull/1301
* @stloyd made their first contribution in https://github.com/symfony/ux/pull/1311

Have fun!


## v2.13.2 Revert change to type: module (v2.13.2)

Released: 2023-11-11

Hi UX'ers!

In 2.13.0, all UX JavaScript packages changed to `type: module`. This had unintended side effects in certain environments / setups. This release reverts that change. See #1268.

**Full Changelog**: https://github.com/symfony/ux/compare/v2.13.1...v2.13.2

Have fun!

## v2.13.1: Fix chart.js but with type: module (v2.13.1)

Released: 2023-11-09

Hi UX'ers!

This release fixes a but in ux-chart.js. We changed the package to `type: 'module'`, but due to some inconsistencies with the `chart.js` library, that can't be done quite yet. We've reverted for now.

### What's Changed
* [Chart.js] Reverting chart.js type: module by @weaverryan in https://github.com/symfony/ux/pull/1264

**Full Changelog**: https://github.com/symfony/ux/compare/v2.13.0...v2.13.1

Have fun!

## v2.13.0: Lazy/Deferred components, Symfony 7 support & more (v2.13.0)

Released: 2023-11-08

Hi UX People!

This is a big release that contains new features across the components! It's the result of 156 commits from 29 different contributors! Note there is an edge-case **BC BREAK** in StimulusBundle if you were using action parameters in an unexpected way.

### All Components

-   Add Symfony 7 support.
-   Change JavaScript package to `type: module`

### Autocomplete

-   Add new `BaseEntityAutocompleteType`
-   Drop symfony 5.4 support.

### TwigComponent

-   Added configuration to separate your components into different "namespaces"
-   Add `outerScope` variable reach variables from the parent template of an
    "embedded" component.
-   Deprecate calling `ComponentTemplateFinder` constructor without `directory` argument.
-   Add profiler integration: `TwigComponentDataCollector` and debug toolbar templates
-   Add search feature in `debug:twig-component` command.
-   Fix inconsistencies with how `{% component %}`/`<twig:component>` syntaxes are
    rendered vs `component()`: `PostRenderEvent` is now dispatched & the template
    resolution happens at runtime.
-   Fix priority of passed in props vs default props with anonymous components.
-   Add Symfony 7 support.
-   TwigPreLexer: improve performance.
-   Fix twig:lint bug with anonymous component tag.

### LIveComponent

-   Add deferred/lazy rendering of Live Components.
-   Fix option tag synchronization.
-   Handle array-like objects when working with checkboxes.
-   Normalize "true" & "false" model values
-   Fix DTO hydration from phpdoc typehints.
-   Fix instantiating LiveComponentMetadata multiple times.
-   Throwing an error when setting an invalid model name.

### StimulusBundle

-   Normalize parameters names given to twig helper 'stimulus_action()'.
    **BC Break**: previously, parameters given in camelCase (eg.
    `bigCrocodile`) were incorrectly registered by the controller as
    flatcase (`event.params.bigcrocodile`). This was fixed, which means
    they are now correctly registered as camelCase
    (`event.params.bigCrocodile`).
-   Added AssetMapper 6.4 support.
-   Add Symfony 7 support.
-   Fix missing double dash in namespaced Stimulus outlets.
-   Change JavaScript package to `type: module`

### Svelte
- Add support for Svelte 4.

### New Contributors
* @tacman made their first contribution in https://github.com/symfony/ux/pull/1144
* @dsoriano made their first contribution in https://github.com/symfony/ux/pull/1145
* @gregberger made their first contribution in https://github.com/symfony/ux/pull/1148
* @andersonamuller made their first contribution in https://github.com/symfony/ux/pull/1154
* @JoppeDC made their first contribution in https://github.com/symfony/ux/pull/1135
* @gharlan made their first contribution in https://github.com/symfony/ux/pull/1175
* @jakubtobiasz made their first contribution in https://github.com/symfony/ux/pull/1143
* @maelanleborgne made their first contribution in https://github.com/symfony/ux/pull/1196
* @yceruto made their first contribution in https://github.com/symfony/ux/pull/1185
* @norival made their first contribution in https://github.com/symfony/ux/pull/1193
* @rrenteria-dev made their first contribution in https://github.com/symfony/ux/pull/1250
* @TheDutchScorpion made their first contribution in https://github.com/symfony/ux/pull/1251
* @bdujon made their first contribution in https://github.com/symfony/ux/pull/1246

**Full Changelog**: https://github.com/symfony/ux/compare/v2.12.0...v2.13.0

## v2.12.0 LiveComponent DTO support & much more (v2.12.0)

Released: 2023-09-22

Hi UX People!

This release contains a basket-load of goodness.

#### TwigComponent

-   Added a `debug:twig-component` command.
-   Fixed bad exception when the error comes from a Twig template.
-   Fixed deprecation with `TemplateCacheWarmer` return type.

#### LiveComponent

-   Add support for (de)hydrating DTO classes in `LiveProp`.
-   Fixed `emit()` method of `TestLiveComponent` to properly test events.
-   Add `actingAs()` to `TestLiveComponent`.
-   Fixed rendering bug when using Chrome's translation feature.
-   Add `onUpdated()` hook for `LiveProp`.
-   Fix support for Alpine.js & live components.

#### TogglePassword

-   Added default values for the Stimulus controller values.

### New Contributors
* @OskarStark made their first contribution in https://github.com/symfony/ux/pull/1109
* @MirakuSan made their first contribution in https://github.com/symfony/ux/pull/1101
* @StevenRenaux made their first contribution in https://github.com/symfony/ux/pull/1088
* @rdavaillaud made their first contribution in https://github.com/symfony/ux/pull/1134

**Full Changelog**: https://github.com/symfony/ux/compare/v2.11.2...v2.12.0

Have fun!

## ux-autocomplete security release + LiveComponent bugs (v2.11.2)

Released: 2023-09-11

Hi!

This release contains an important security release for `symfony/ux-autocomplete`: https://symfony.com/blog/cve-2023-41336-symfony-ux-autocomplete-prevent-injection-of-invalid-entity-ids-for-autocomplete-fields

If you are using `symfony/ux-autocomplete`, you should upgrade immediately:

```
composer update symfony/ux-autocomplete
```

Other changes:

#### LiveComponents

* [bug] Only consider Live components in InterceptChildComponentRenderSubscriber by @sneakyvv in https://github.com/symfony/ux/pull/1097
* [bug] Don't store ux_live_component URLs in setTargetPath of the security component by @gbere in https://github.com/symfony/ux/pull/1096

### New Contributors
* @andersmateusz made their first contribution in https://github.com/symfony/ux/pull/1100
* @mariecharles made their first contribution in https://github.com/symfony/ux/pull/1058
* @gbere made their first contribution in https://github.com/symfony/ux/pull/1096

**Full Changes**: https://github.com/symfony/ux/compare/v2.11.1...v2.11.2

## v2.11.1 - Twig & Live Component bug fixes (v2.11.1)

Released: 2023-09-07

Hi UX'ers!

A small release to address a few bug fixes:

### What's Changed

* [LiveComponent] Add priority to PreDehydrate & PostHydrate hooks by @sneakyvv in https://github.com/symfony/ux/pull/1074
* [LiveComponent] Use `display:revert` for `data-loading` style by @norkunas in https://github.com/symfony/ux/pull/1079
* [TwigComponent][LiveComponent] Fix Live embedded component within namespaced template by @sneakyvv in https://github.com/symfony/ux/pull/1082
* [TwigComponent][LiveComponent] Fix DataModelPropsSubscriber for embedded components by @sneakyvv in https://github.com/symfony/ux/pull/1093

**Full Changes**: https://github.com/symfony/ux/compare/v2.11.0...v2.11.1

Have fun!

## v2.11.0: TogglePassword Component, Anonymous Twig Components + more! (v2.11.0)

Released: 2023-08-28

Hi UX People!

This release contains a bucketload of good stuff:

#### New Component!

* UX Toggle Password: add "hide/show" links to toggle the password to plain-text!

#### TwigComponent

-   Support ...spread operator with html syntax (requires Twig 3.7.0 or higher)
-   Add support for anonymous Twig components.
-   Add `RenderedComponent::crawler()` and `toString()` methods.
-   Allow a block outside a Twig component to be available inside via `outerBlocks`.
-   Fix `<twig:component>` syntax where an attribute is set to an empty value.

#### LiveComponent

-   Add helper for testing live components.
-   Add initial file upload support.
-   Respect `data-turbo="false"` when handling redirects.
-   Fix checksum calculation for deeply nested data.

### New Contributors
* @youassi made their first contribution in https://github.com/symfony/ux/pull/987
* @ngrie made their first contribution in https://github.com/symfony/ux/pull/993
* @DennisdeBest made their first contribution in https://github.com/symfony/ux/pull/1001
* @gpetraroli made their first contribution in https://github.com/symfony/ux/pull/1011
* @asispts made their first contribution in https://github.com/symfony/ux/pull/1019
* @feymo made their first contribution in https://github.com/symfony/ux/pull/1000
* @leonardsimonse made their first contribution in https://github.com/symfony/ux/pull/1020
* @sponno made their first contribution in https://github.com/symfony/ux/pull/1035
* @yassinefikri made their first contribution in https://github.com/symfony/ux/pull/1040
* @jcrombez made their first contribution in https://github.com/symfony/ux/pull/1054
* @Jasperator made their first contribution in https://github.com/symfony/ux/pull/1067

**Full Changes**: https://github.com/symfony/ux/compare/v2.10.0...v2.11.0

##  (v2.10.0)

Released: 2023-07-06

Hi UX People!

This release contains various new features and big fixes:

#### BC Breaks

* [LiveComponent] A BC break was made to `ComponentWithFormTrait` in #967: some methods were renamed.

#### Features

* [All] bump to php >=8.1 everywhere by @bendavies in https://github.com/symfony/ux/pull/946
* [TwigComponent] Support passing blocks to nested embedded components by @sneakyvv in https://github.com/symfony/ux/pull/920
* [TwigComponent] add test helper by @kbond in https://github.com/symfony/ux/pull/821
* [LiveComponent] resetForm() method to get a fresh form by @weaverryan in https://github.com/symfony/ux/pull/884
* [LiveComponent] Method Name changes in ComponentWithFormTrait + expanded docs by @weaverryan in https://github.com/symfony/ux/pull/967
* [Autocomplete] When min chars is not set, keep loading after initial load by @weaverryan in https://github.com/symfony/ux/pull/919
* Stimulus controllers: allow to define outlets by @jmsche in https://github.com/symfony/ux/pull/942

#### Bug Fixes

* Fix Doctrine Persistence deprecation by @jmsche in https://github.com/symfony/ux/pull/918
* [Live] Removing docs showing the proxied component by @weaverryan in https://github.com/symfony/ux/pull/926
* [TwigComponent] Fix opening of default block inside an open twig block by @sneakyvv in https://github.com/symfony/ux/pull/892
* [TwigComponent] Ignore verbatim block during Prelexing by @WebMamba in https://github.com/symfony/ux/pull/949
* [TwigComponent] Fix escaping stimulus attributes by @1ed in https://github.com/symfony/ux/pull/969
* [LiveComponent] Working around issue where FormView is passed to the component by @weaverryan in https://github.com/symfony/ux/pull/943
* [Turbo] Fixing a bug where saving a proxy would not trigger Broadcasts by @weaverryan in https://github.com/symfony/ux/pull/951
* [Live] Fixing bug with data-action="live#update" and inside clickable elements by @weaverryan in https://github.com/symfony/ux/pull/950
* [Translator] generate unique constants name (fix #938) by @Kocal in https://github.com/symfony/ux/pull/945
* [StimulusBundle] Fix controller name conversion by @jon-ht in https://github.com/symfony/ux/pull/953
* [StimulusBundle] Fixing bug where new custom controllers were not seen due to cache by @weaverryan in https://github.com/symfony/ux/pull/964

**Full Changes**: https://github.com/symfony/ux/compare/v2.9.1...v2.10.0

## Various compatibility bug fixes (v2.9.1)

Released: 2023-05-31

Hi UX people!

This release fixes several bugs with the 2.9.0 release that caused problems when updating.

* More precisely initializing services/config for asset mapper by @weaverryan in https://github.com/symfony/ux/pull/911
* [LiveComponent] Fix array valued checkboxes change event handling by @welcoMattic in https://github.com/symfony/ux/pull/910
* [StimulusBundle] Marking only the AssetMapper integration as experimental by @weaverryan in https://github.com/symfony/ux/pull/908
* [TwigComponent] Fix breaking (deprecation instead) when using .add() + StimulusBundle by @weaverryan in https://github.com/symfony/ux/pull/914

### Upgrading

Like with version 2.9.0, if you're upgrading from a 2.8 or earlier, you may get this error after running `composer update`:

> Uncaught Exception: The service "chartjs.twig_extension" has a dependency on a non-existent service "stimulus.helper"

To fix this, run `composer update` one more time. The problem is, after the first update, Symfony Flex may not properly add StimulusBundle to `config/bundles.php`. After the 2nd update, it should be added, and the error will go away. See #907.

Diff: https://github.com/symfony/ux/compare/v2.9.0...v2.9.1

Cheers!

## New StimulusBundle + AssetMapper Support (v2.9.0)

Released: 2023-05-29

Hi UX people!

This release includes significant, but lower-level changes:

A) A new StimulusBundle was added! This is the new home for the `{{ stimulus_controller() }}`, `{{ stimulus_action() }}` and `{{ stimulus_target() }}` Twig functions that were previously part of WebpackEncoreBundle. These functions work the same as before, though the internals of how they do their job was improved.

B) Several UX packages (e.g. ux/chartjs) that previously relied on WebpackEncoreBundle internally now rely on StimulusBundle. Though, you shouldn't notice any difference.

C) Support for Symfony 6.3's new AssetMapper component were added to all packages.

In addition to this, several bugs were fixed in TwigComponent's new HTML syntax,  LiveComponent and Chart.js.

### Upgrading

Due to a bug in Symfony Flex, when upgrading your dependencies, you may get an error like:

> Uncaught Exception: The service "chartjs.twig_extension" has a dependency on a non-existent service "stimulus.helper"

To fix this, run `composer update` one more time. The problem is, after the first update, Symfony Flex may not properly add StimulusBundle to `config/bundles.php`. After the 2nd update, it should be added, and the error will go away. See #907.

Diff: https://github.com/symfony/ux/compare/v2.8.1...v2.9.0

Cheers!

## Collection of bug fixes across LiveComponents, TwigComponents, Chartjs (v2.8.1)

Released: 2023-05-16

Hi UX people!

This release contains a number of nice bug fixes across several components:

#### ChartJs

* [Bug] Adding a better way to register Chartjs plugins by @weaverryan in https://github.com/symfony/ux/pull/870

#### TwigComponent

* [Bug] Fix lexer to escape attribute name when it contains dashes by @norkunas in https://github.com/symfony/ux/pull/837
* [Bug] Ignore twig comments when prelexing by @WebMamba in https://github.com/symfony/ux/pull/842
* [Bug] fixing issue with files finishing with comments by @WebMamba in https://github.com/symfony/ux/pull/847
* [Bug] Fix lexer to escape truthy attribute names by @norkunas in https://github.com/symfony/ux/pull/848
* [Bug] Fixing bug where traditional blocks aren't handled correctly by @weaverryan in https://github.com/symfony/ux/pull/859

#### LiveComponent

* [Bug] Throw clear error when using union types for LiveProps by @sneakyvv in https://github.com/symfony/ux/pull/856
* [Bug] Fixing bug with ComponentWithFormTrait and empty collections by @weaverryan in https://github.com/symfony/ux/pull/857
* [Bug] Smarter form trait data extracting by @weaverryan in https://github.com/symfony/ux/pull/866
* [Bug] Upping priority on LiveComponentSubscriber by @weaverryan in https://github.com/symfony/ux/pull/868

Diff: https://github.com/symfony/ux/compare/v2.8.0...v2.8.1

Happy UX'ing!

## 2 new components, Twig HTML Syntax + Big Live Updates (v2.8.0)

Released: 2023-05-03

Hi UX people!

This is a BIG release full of a new Twig component HTML syntax (`<twig:Component/>`), massive live components updates and various other items.

* 2 new components: [ux-translator](https://ux.symfony.com/translator) and [ux-svelte](https://ux.symfony.com/svelte)!
* `LiveComponents`: new smart rendering system, better handling for `LiveProp` data types, `emit()` to other components + much more - see the full [CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/LiveComponent/CHANGELOG.md)
* `TwigComponents`: new `<twig:ComponentName/>` HTML syntax and other improvements - [CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/TwigComponent/CHANGELOG.md)
* `Chartjs`: Chart now smartly re-renders if any Stimulus values passed to it change [CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/Chartjs/CHANGELOG.md)
* `Autocomplete`: Added support for `optiongroup` & updating of the smart select when the underlying options change - [CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/Autocomplete/CHANGELOG.md).

Diff: https://github.com/symfony/ux/compare/v2.7.1...v2.8.0

Cheers!

## Fixing missing CSS files in packages (v2.7.1)

Released: 2023-01-25

Hi UX people!

This release fixes a problem where some packages were missing their associated CSS files, do to an overeager `.gitattributes` setting. That's it - nice and simple.

Diff: https://github.com/symfony/ux/compare/v2.7.0...v2.7.1

Cheers!

## TypeScript Types, JavaScript Bubbling & Many LiveComponent Improvements (v2.7.0)

Released: 2023-01-23

Hi UX people!

This release is a big mixture of a lot of nice changes. The most notable are that (A) TypeScript types are now included in the packages, (B) all Stimulus events (e.g. `chartjs:connect`) now "bubble" so that you can attach listeners around the controllers (this was already the case for some packages, but not all) and (C) MANY continued improvements and fixes for LiveComponents.

Diff: https://github.com/symfony/ux/compare/v2.6.1...v2.7.0

### UX Autocomplete

-   Add `assets/src` to `.gitattributes` to exclude them from the installation

-   Fix minCharacters option default value handling when using a falsy value like 0.

-   Fix TypeScript types

-   Add a new `route` parameter to `AsEntityAutocompleteField`, which allows to choose another route for Ajax calls.

-   Fix minCharacters option default value handling when using a falsy value like 0.

-   Fix TypeScript types

-   Add a way to detect if a field is an "autocomplete" field in form themes - #608

### UX Chartjs

-   The `chartjs:connect` JavaScript event now bubbles up.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### UX Cropperjs

-   The JavaScript events now bubble up.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### Dropzone

-   The JavaScript events now bubble up.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### LazyImage

-   The JavaScript events now bubble up.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### LiveComponent

-   [BC BREAK]: The "key" used to load the controller in your `assets/controllers.json`
    file changed from `typed` to `live`. Update your `assets/controllers.json`
    file to change this key.

-   Add a strategy for adding a Stimulus controller to a Twig component - #589.

-   Added a new `getCompontent()` function in JavaScript as the best way to find
    a Component object for a given element.

-   Fixed various bugs related to child component handling - #596

-   Added a new `route` parameter to `AsLiveComponent`, which allows to choose
    another route for Ajax calls.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

-   Added new `response:error` JavaScript component hook for custom handling Ajax errors - #587.

### Notify

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### React

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### Swup

-   The JavaScript events now bubble up.

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### Turbo

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### TwigComponent

-   `PreMount` and `PostMount` hooks can now return nothing.

### Typed

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

### Vue

-   Add `assets/src` to `.gitattributes` to exclude source TypeScript files from
    installing.

-   TypeScript types are now included.

Cheers!

## Fix Autocomplete preload behavior & ux-turbo-mercure packae (v2.6.1)

Released: 2022-12-07

Hi UX people!

This PR fixes a few bugs with 2.6.0. Most notably, the `symfony/ux-turbo-mercure` package is deprecated as it now comes automatically with `symfony/ux-turbo`. See the [Turbo CHANGELOG](https://github.com/symfony/ux/blob/2.x/src/Turbo/CHANGELOG.md#261) for more details.

Diff: https://github.com/symfony/ux/compare/v2.6.0...v2.6.1

Cheers!


</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/accordion.md">
# Accordion

Build vertically collapsing sections powered by Bootstrap's Collapse plugin.

```twig
<twig:Accordion id="faq-accordion">
    <twig:Accordion:Item id="faq-first" label="What is Symfony UX?" expanded>
        <strong>Symfony UX connects Symfony with modern frontend tools.</strong>
        It provides JavaScript packages, Twig components, and integrations designed to work naturally with Symfony applications.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="faq-second" label="Can I customize these components?">
        Yes. Pass HTML attributes and Bootstrap utility classes directly to the Twig components, or customize Bootstrap through Sass and CSS variables.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="faq-third" label="Does the accordion support multiple open items?">
        Set <code>alwaysOpen</code> on the root accordion to omit Bootstrap's parent constraint.
    </twig:Accordion:Item>
</twig:Accordion>
```

## Installation

```shell
php bin/console ux:install accordion --kit bootstrap
```
## Usage

```twig
<twig:Accordion id="account-accordion">
    <twig:Accordion:Item id="account-profile" label="Profile" expanded>
        Update your personal details and contact information.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="account-security" label="Security">
        Review your password and two-factor authentication settings.
    </twig:Accordion:Item>
</twig:Accordion>
```

## Accessibility

Choose a `headingTag` that fits the surrounding document hierarchy. Each heading contains a button with `aria-expanded` and `aria-controls`, and each panel references its heading with `aria-labelledby`.

Bootstrap's transition respects `prefers-reduced-motion`. Keep labels concise and do not hide essential information exclusively inside collapsed sections.

## Examples

Render a conventional accordion where opening one item closes the currently open item.

```twig
<twig:Accordion id="accordion-example">
    <twig:Accordion:Item id="accordion-item-one" label="Accordion Item #1" expanded>
        <strong>This is the first item's accordion body.</strong>
        It is shown by default until the Collapse plugin updates the appropriate classes and ARIA state.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="accordion-item-two" label="Accordion Item #2">
        <strong>This is the second item's accordion body.</strong>
        It is hidden by default and can contain nearly any HTML content.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="accordion-item-three" label="Accordion Item #3">
        <strong>This is the third item's accordion body.</strong>
        Opening it closes the currently open item.
    </twig:Accordion:Item>
</twig:Accordion>
```

### Flush

Remove outer borders and rounded corners for an edge-to-edge accordion.

```twig
<twig:Accordion id="accordion-flush-example" flush>
    <twig:Accordion:Item id="flush-item-one" label="Accordion Item #1">
        Placeholder content for this edge-to-edge accordion item.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="flush-item-two" label="Accordion Item #2">
        The flush style removes some borders and rounded corners.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="flush-item-three" label="Accordion Item #3">
        Items retain the same Collapse behavior and accessibility attributes.
    </twig:Accordion:Item>
</twig:Accordion>
```

### Always open

Allow several items to remain expanded by omitting Bootstrap's parent constraint.

```twig
<twig:Accordion id="accordion-always-open" alwaysOpen>
    <twig:Accordion:Item id="always-open-one" label="Accordion Item #1" expanded>
        This item starts open and remains open when another item is expanded.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="always-open-two" label="Accordion Item #2">
        Multiple items can stay open because no <code>data-bs-parent</code> constraint is rendered.
    </twig:Accordion:Item>
    <twig:Accordion:Item id="always-open-three" label="Accordion Item #3">
        Each button still controls its own panel and synchronizes <code>aria-expanded</code>.
    </twig:Accordion:Item>
</twig:Accordion>
```

## API Reference

### `<twig:Accordion>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier used to coordinate the accordion items. |
| `flush` | `boolean` | `false` | Whether to remove outer borders and rounded corners. |
| `alwaysOpen` | `boolean` | `false` | Whether multiple accordion items may remain open. |

| Block | Description |
|:------|:------------|
| `content` | The accordion items, typically `Accordion:Item` components. |
### `<twig:Accordion:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier used for the heading and collapsible panel. |
| `label` | `string` | `''` | The text displayed in the accordion button. |
| `expanded` | `boolean` | `false` | Whether the accordion item is initially expanded. |
| `headingTag` | `'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'h2'` | The heading element to render. |

| Block | Description |
|:------|:------------|
| `label` | The accordion button label. |
| `content` | The content displayed inside the collapsible panel. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/alert.md">
# Alert

Provides contextual feedback messages for typical user actions.

```twig
<twig:Alert color="success" heading="Well done!" dismissible>
    Your changes were saved successfully. <a href="#" class="alert-link">Review them now</a>.
</twig:Alert>
```

## Installation

```shell
php bin/console ux:install alert --kit bootstrap
```
## Usage

```twig
<twig:Alert>A simple primary alert - check it out!</twig:Alert>
```

## Accessibility

Do not rely on color alone to communicate the alert's meaning. Include clear visible text or additional context for assistive technologies.

Dismissal removes the alert from the document. When appropriate, listen for Bootstrap's `closed.bs.alert` event and move focus to a logical destination.

## Examples

### Contextual variants

Use one of Bootstrap's eight contextual colors to match the message's purpose.

```twig
<div class="d-flex flex-column gap-2">
    <twig:Alert class="mb-0">A simple primary alert - check it out!</twig:Alert>
    <twig:Alert color="secondary" class="mb-0">A simple secondary alert - check it out!</twig:Alert>
    <twig:Alert color="success" class="mb-0">A simple success alert - check it out!</twig:Alert>
    <twig:Alert color="danger" class="mb-0">A simple danger alert - check it out!</twig:Alert>
    <twig:Alert color="warning" class="mb-0">A simple warning alert - check it out!</twig:Alert>
    <twig:Alert color="info" class="mb-0">A simple info alert - check it out!</twig:Alert>
    <twig:Alert color="light" class="mb-0">A simple light alert - check it out!</twig:Alert>
    <twig:Alert color="dark" class="mb-0">A simple dark alert - check it out!</twig:Alert>
</div>
```

### Link color

Use `alert-link` for links that inherit a suitable color from their alert variant.

```twig
<div class="d-flex flex-column gap-2">
    <twig:Alert class="mb-0">A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="secondary" class="mb-0">A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="success" class="mb-0">A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="danger" class="mb-0">A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="warning" class="mb-0">A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="info" class="mb-0">A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="light" class="mb-0">A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="dark" class="mb-0">A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
</div>
```

### Additional content

Alerts can contain headings, paragraphs, dividers, and other structured content.

```twig
<twig:Alert color="success" heading="Well done!">
    <p>Aww yeah, you successfully read this important alert message. This example text is long enough to show how spacing works with additional content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, use margin utilities to keep things nice and tidy.</p>
</twig:Alert>
```

### Icons

Combine alerts with flex utilities and accessible inline icons.

```twig
<div class="d-flex flex-column gap-2">
    <twig:Alert class="d-flex align-items-center mb-0">
        <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="Warning:">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </svg>
        <div>An example alert with an icon</div>
    </twig:Alert>

    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
        <symbol id="check-circle-fill" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
        </symbol>
        <symbol id="info-fill" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
        </symbol>
        <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </symbol>
    </svg>

    <twig:Alert class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Info:"><use href="#info-fill" /></svg>
        <div>An example alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="success" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Success:"><use href="#check-circle-fill" /></svg>
        <div>An example success alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="warning" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill" /></svg>
        <div>An example warning alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="danger" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill" /></svg>
        <div>An example danger alert with an icon</div>
    </twig:Alert>
</div>
```

### Dismissing

Enable Bootstrap's alert plugin with a close button, dismissal classes, and transition classes.

```twig
<twig:Alert color="warning" dismissible>
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</twig:Alert>
```

## API Reference

### `<twig:Alert>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'` | `'primary'` | The Bootstrap contextual color. |
| `dismissible` | `boolean` | `false` | Whether to render a dismiss button and dismissal transition classes. |
| `heading` | `string\|null` | `null` | The optional alert heading. |
| `content` | `string` | `''` | The fallback message when no content block is provided. |

| Block | Description |
|:------|:------------|
| `heading` | The alert heading, rendered before the main content. |
| `content` | The alert message and optional additional content. |
| `close` | The dismiss control rendered when the alert is dismissible. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/badge.md">
# Badge

A small count or label used to highlight status, counts, or short contextual information.

```twig
<div class="d-flex flex-wrap align-items-center gap-2">
    <twig:Badge color="primary">New</twig:Badge>
    <twig:Badge color="success">Published</twig:Badge>
    <twig:Badge color="warning">Pending</twig:Badge>
    <twig:Badge color="danger" pill>99+</twig:Badge>
    <button type="button" class="btn btn-primary position-relative ms-2">
        Inbox
        <twig:Badge color="danger" pill class="position-absolute top-0 start-100 translate-middle">
            12
            <span class="visually-hidden">unread messages</span>
        </twig:Badge>
    </button>
</div>
```

## Installation

```shell
php bin/console ux:install badge --kit bootstrap
```
## Usage

```twig
<twig:Badge>New</twig:Badge>
```

## Accessibility

Do not rely on badge color alone to communicate meaning. Include meaningful visible text or additional context with Bootstrap's `visually-hidden` utility.

When a badge contains a count, make sure its relationship to the surrounding heading, button, or link is clear to assistive technologies.

## Examples

### Headings

Badges inherit their size from the immediate parent, so they scale naturally inside headings.

```twig
<h1>Example heading <twig:Badge color="secondary">New</twig:Badge></h1>
<h2>Example heading <twig:Badge color="secondary">New</twig:Badge></h2>
<h3>Example heading <twig:Badge color="secondary">New</twig:Badge></h3>
<h4>Example heading <twig:Badge color="secondary">New</twig:Badge></h4>
<h5>Example heading <twig:Badge color="secondary">New</twig:Badge></h5>
<h6>Example heading <twig:Badge color="secondary">New</twig:Badge></h6>
```

### Buttons

Place a badge inside a button to display a related count.

```twig
<button type="button" class="btn btn-primary">
    Notifications <twig:Badge color="secondary">4</twig:Badge>
</button>
```

### Positioned

Combine badges with Bootstrap's position utilities to create counters and status indicators.

```twig
<div class="d-flex align-items-center gap-5">
    <button type="button" class="btn btn-primary position-relative">
        Inbox
        <twig:Badge color="danger" pill class="position-absolute top-0 start-100 translate-middle">
            99+
            <span class="visually-hidden">unread messages</span>
        </twig:Badge>
    </button>

    <button type="button" class="btn btn-primary position-relative">
        Profile
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
            <span class="visually-hidden">New alerts</span>
        </span>
    </button>
</div>
```

### Background colors

Use contextual background colors while keeping the badge's meaning clear from its text.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Badge color="primary">Primary</twig:Badge>
    <twig:Badge color="secondary">Secondary</twig:Badge>
    <twig:Badge color="success">Success</twig:Badge>
    <twig:Badge color="danger">Danger</twig:Badge>
    <twig:Badge color="warning">Warning</twig:Badge>
    <twig:Badge color="info">Info</twig:Badge>
    <twig:Badge color="light">Light</twig:Badge>
    <twig:Badge color="dark">Dark</twig:Badge>
</div>
```

### Pill badges

Use the pill style for a more rounded badge with a larger border radius.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Badge color="primary" pill>Primary</twig:Badge>
    <twig:Badge color="secondary" pill>Secondary</twig:Badge>
    <twig:Badge color="success" pill>Success</twig:Badge>
    <twig:Badge color="danger" pill>Danger</twig:Badge>
    <twig:Badge color="warning" pill>Warning</twig:Badge>
    <twig:Badge color="info" pill>Info</twig:Badge>
    <twig:Badge color="light" pill>Light</twig:Badge>
    <twig:Badge color="dark" pill>Dark</twig:Badge>
</div>
```

## API Reference

### `<twig:Badge>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'` | `'primary'` | The Bootstrap contextual color. |
| `pill` | `boolean` | `false` | Whether to use Bootstrap's rounded pill style. |
| `label` | `string` | `''` | The fallback badge text when no content block is provided. |

| Block | Description |
|:------|:------------|
| `content` | The badge text and optional inline content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/breadcrumb.md">
# Breadcrumb

Indicates the current page's location within a navigational hierarchy.

```twig
<twig:Breadcrumb>
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
</twig:Breadcrumb>
```

## Installation

```shell
php bin/console ux:install breadcrumb --kit bootstrap
```
## Usage

```twig
<twig:Breadcrumb>
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</twig:Breadcrumb>
```

## Accessibility

Give the navigation a meaningful accessible name. Apply `aria-current="page"` to the final breadcrumb item so assistive technologies can identify the current page.

## Examples

Build breadcrumb trails with linked items followed by an active item for the current page.

```twig
<div class="d-flex flex-column gap-2">
    <twig:Breadcrumb>
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb>
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb>
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </twig:Breadcrumb>
</div>
```

### Dividers

Customize the divider with text, an escaped SVG data URL, or an empty CSS custom property.

```twig
<div class="d-flex flex-column gap-2">
    <twig:Breadcrumb divider=">">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb style="--bs-breadcrumb-divider: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&quot;);">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb style="--bs-breadcrumb-divider: ''">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>
</div>
```

## API Reference

### `<twig:Breadcrumb>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `divider` | `string\|null` | `null` | The custom text used as the divider between breadcrumb items. |
| `label` | `string\|null` | `'breadcrumb'` | The accessible name for the breadcrumb navigation. |

| Block | Description |
|:------|:------------|
| `content` | The ordered list of breadcrumb items. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/button-group.md">
# Button Group

Groups a series of buttons on a single line or in a vertical column.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <twig:ButtonGroup label="Primary actions">
        <twig:Button>Left</twig:Button>
        <twig:Button>Middle</twig:Button>
        <twig:Button>Right</twig:Button>
    </twig:ButtonGroup>

    <twig:ButtonGroup label="Mixed actions">
        <twig:Button color="danger">Delete</twig:Button>
        <twig:Button color="warning">Archive</twig:Button>
        <twig:Button color="success">Publish</twig:Button>
    </twig:ButtonGroup>
</div>
```

## Installation

```shell
php bin/console ux:install button-group --kit bootstrap
```
## Usage

```twig
<twig:ButtonGroup label="Basic example">
    <twig:Button>Left</twig:Button>
    <twig:Button>Middle</twig:Button>
    <twig:Button>Right</twig:Button>
</twig:ButtonGroup>
```

## Accessibility

Button groups need `role="group"` and an explicit accessible name. The `label` prop supplies `aria-label`; set it to `null` only when providing an equivalent `aria-labelledby` attribute.

Use `role="toolbar"` and a meaningful label on toolbars that combine multiple button groups.

## Examples

### Basic example

Group buttons or links together as one related set of controls.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <twig:ButtonGroup label="Basic example">
        <twig:Button>Left</twig:Button>
        <twig:Button>Middle</twig:Button>
        <twig:Button>Right</twig:Button>
    </twig:ButtonGroup>

    <twig:ButtonGroup label="Page navigation">
        <twig:Button tag="a" href="#" class="active" aria-current="page">Active link</twig:Button>
        <twig:Button tag="a" href="#">Link</twig:Button>
        <twig:Button tag="a" href="#">Link</twig:Button>
    </twig:ButtonGroup>
</div>
```

### Mixed styles

Mix contextual button styles within one group.

```twig
<twig:ButtonGroup label="Basic mixed styles example">
    <twig:Button color="danger">Left</twig:Button>
    <twig:Button color="warning">Middle</twig:Button>
    <twig:Button color="success">Right</twig:Button>
</twig:ButtonGroup>
```

### Outlined styles

Use outline buttons for a group with less visual weight.

```twig
<twig:ButtonGroup label="Basic outlined example">
    <twig:Button outline>Left</twig:Button>
    <twig:Button outline>Middle</twig:Button>
    <twig:Button outline>Right</twig:Button>
</twig:ButtonGroup>
```

### Checkbox and radio button groups

Combine Bootstrap toggle inputs and labels into seamless checkbox or radio groups.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <twig:ButtonGroup label="Basic checkbox toggle button group">
        <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
        <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
        <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </twig:ButtonGroup>

    <twig:ButtonGroup label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
        <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </twig:ButtonGroup>
</div>
```

### Button toolbar

Combine several button groups, and optionally input groups, inside a labeled toolbar.

```twig
<div class="d-flex flex-column gap-3">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <twig:ButtonGroup label="First group" class="me-2">
            <twig:Button>1</twig:Button>
            <twig:Button>2</twig:Button>
            <twig:Button>3</twig:Button>
            <twig:Button>4</twig:Button>
        </twig:ButtonGroup>
        <twig:ButtonGroup label="Second group" class="me-2">
            <twig:Button color="secondary">5</twig:Button>
            <twig:Button color="secondary">6</twig:Button>
            <twig:Button color="secondary">7</twig:Button>
        </twig:ButtonGroup>
        <twig:ButtonGroup label="Third group">
            <twig:Button color="info">8</twig:Button>
        </twig:ButtonGroup>
    </div>

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with input group">
        <twig:ButtonGroup label="First group" class="me-2">
            <twig:Button color="secondary" outline>1</twig:Button>
            <twig:Button color="secondary" outline>2</twig:Button>
            <twig:Button color="secondary" outline>3</twig:Button>
            <twig:Button color="secondary" outline>4</twig:Button>
        </twig:ButtonGroup>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
        </div>
    </div>

    <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with justified input group">
        <twig:ButtonGroup label="First group">
            <twig:Button color="secondary" outline>1</twig:Button>
            <twig:Button color="secondary" outline>2</twig:Button>
            <twig:Button color="secondary" outline>3</twig:Button>
            <twig:Button color="secondary" outline>4</twig:Button>
        </twig:ButtonGroup>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon2">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
        </div>
    </div>
</div>
```

### Sizing

Apply a size to the group instead of repeating it on every button.

```twig
<div class="d-flex flex-column align-items-start gap-2">
    <twig:ButtonGroup size="lg" label="Large button group">
        <twig:Button outline>Left</twig:Button>
        <twig:Button outline>Middle</twig:Button>
        <twig:Button outline>Right</twig:Button>
    </twig:ButtonGroup>

    <twig:ButtonGroup label="Default button group">
        <twig:Button outline>Left</twig:Button>
        <twig:Button outline>Middle</twig:Button>
        <twig:Button outline>Right</twig:Button>
    </twig:ButtonGroup>

    <twig:ButtonGroup size="sm" label="Small button group">
        <twig:Button outline>Left</twig:Button>
        <twig:Button outline>Middle</twig:Button>
        <twig:Button outline>Right</twig:Button>
    </twig:ButtonGroup>
</div>
```

### Nesting

Nest a button group to place a dropdown alongside other buttons.

```twig
<twig:ButtonGroup label="Button group with nested dropdown">
    <twig:Button>1</twig:Button>
    <twig:Button>2</twig:Button>
    <twig:ButtonGroup label="Dropdown menu">
        <twig:Button class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</twig:Button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </twig:ButtonGroup>
</twig:ButtonGroup>
```

### Vertical variation

Stack buttons, dropdowns, or radio controls in a vertical group.

```twig
<div class="d-flex flex-wrap align-items-start gap-4">
    <twig:ButtonGroup vertical label="Vertical button group">
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
    </twig:ButtonGroup>

    <twig:ButtonGroup vertical label="Vertical button group with dropdowns">
        <twig:ButtonGroup label="Dropdown menu">
            <twig:Button class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</twig:Button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </twig:ButtonGroup>
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
        <twig:ButtonGroup label="Dropstart menu" class="dropstart">
            <twig:Button class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</twig:Button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </twig:ButtonGroup>
        <twig:ButtonGroup label="Dropend menu" class="dropend">
            <twig:Button class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</twig:Button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </twig:ButtonGroup>
        <twig:ButtonGroup label="Dropup menu" class="dropup">
            <twig:Button class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</twig:Button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </twig:ButtonGroup>
    </twig:ButtonGroup>

    <twig:ButtonGroup vertical label="Vertical radio toggle button group">
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
        <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
        <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
        <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
        <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
    </twig:ButtonGroup>
</div>
```

## API Reference

### `<twig:ButtonGroup>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `vertical` | `boolean` | `false` | Whether to stack the buttons vertically. |
| `size` | `'sm'\|'lg'\|null` | `null` | The Bootstrap size applied to every button in the group. |
| `label` | `string\|null` | `'Button group'` | The accessible name for the group. |

| Block | Description |
|:------|:------------|
| `content` | The buttons, links, or form controls contained in the group. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/button.md">
# Button

Use Bootstrap button styles for actions in forms, dialogs, navigation, and more.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Button>Primary</twig:Button>
    <twig:Button color="secondary">Secondary</twig:Button>
    <twig:Button color="success">Success</twig:Button>
    <twig:Button color="danger">Danger</twig:Button>
    <twig:Button color="warning">Warning</twig:Button>
    <twig:Button color="info">Info</twig:Button>
    <twig:Button color="light">Light</twig:Button>
    <twig:Button color="dark">Dark</twig:Button>
    <twig:Button color="link">Link</twig:Button>
</div>
```

## Installation

```shell
php bin/console ux:install button --kit bootstrap
```
## Usage

```twig
<twig:Button>Save changes</twig:Button>
```

## Accessibility

Do not rely on button color alone to communicate meaning. Use explicit labels or additional visually hidden text when needed.

Disabled links omit their `href`, expose `aria-disabled="true"`, and are removed from keyboard navigation.

## Examples

### Base class

Use the base Bootstrap button class without a contextual color when defining a custom style.

```twig
<twig:Button :color="null">Base class</twig:Button>
```

### Variants

Use contextual colors to communicate the purpose of an action.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Button>Primary</twig:Button>
    <twig:Button color="secondary">Secondary</twig:Button>
    <twig:Button color="success">Success</twig:Button>
    <twig:Button color="danger">Danger</twig:Button>
    <twig:Button color="warning">Warning</twig:Button>
    <twig:Button color="info">Info</twig:Button>
    <twig:Button color="light">Light</twig:Button>
    <twig:Button color="dark">Dark</twig:Button>
    <twig:Button color="link">Link</twig:Button>
</div>
```

### Disable text wrapping

Add Bootstrap's `text-nowrap` utility when a button label must remain on one line.

```twig
<twig:Button class="text-nowrap">This button label does not wrap</twig:Button>
```

### Button tags

Render the component as a button, link, or input depending on the semantic element required.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Button tag="a" href="#">Link</twig:Button>
    <twig:Button type="submit">Button</twig:Button>
    <twig:Button tag="input" value="Input" />
    <twig:Button tag="input" type="submit" value="Submit" />
    <twig:Button tag="input" type="reset" value="Reset" />
</div>
```

### Outline buttons

Use outline styles for actions that need less visual weight.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Button outline>Primary</twig:Button>
    <twig:Button color="secondary" outline>Secondary</twig:Button>
    <twig:Button color="success" outline>Success</twig:Button>
    <twig:Button color="danger" outline>Danger</twig:Button>
    <twig:Button color="warning" outline>Warning</twig:Button>
    <twig:Button color="info" outline>Info</twig:Button>
    <twig:Button color="light" outline>Light</twig:Button>
    <twig:Button color="dark" outline>Dark</twig:Button>
</div>
```

### Sizes

Use Bootstrap's large and small sizes, or customize the component with Bootstrap CSS variables.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <div class="d-flex flex-wrap gap-2">
        <twig:Button size="lg">Large button</twig:Button>
        <twig:Button color="secondary" size="lg">Large button</twig:Button>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <twig:Button size="sm">Small button</twig:Button>
        <twig:Button color="secondary" size="sm">Small button</twig:Button>
    </div>
    <twig:Button style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
        Custom button
    </twig:Button>
</div>
```

### Disabled state

Disable buttons and links while preserving the appropriate HTML and accessibility semantics.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <div class="d-flex flex-wrap gap-2">
        <twig:Button disabled>Primary button</twig:Button>
        <twig:Button color="secondary" disabled>Button</twig:Button>
        <twig:Button outline disabled>Primary button</twig:Button>
        <twig:Button color="secondary" outline disabled>Button</twig:Button>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <twig:Button tag="a" disabled>Primary link</twig:Button>
        <twig:Button tag="a" color="secondary" disabled>Link</twig:Button>
    </div>
</div>
```

### Block buttons

Combine the component with Bootstrap layout utilities to create responsive full-width buttons.

```twig
<div class="d-flex flex-column gap-4">
    <div class="d-grid gap-2">
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
    </div>
    <div class="d-grid gap-2 d-md-block">
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
    </div>
    <div class="d-grid gap-2 col-6 mx-auto">
        <twig:Button>Button</twig:Button>
        <twig:Button>Button</twig:Button>
    </div>
    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <twig:Button class="me-md-2">Button</twig:Button>
        <twig:Button>Button</twig:Button>
    </div>
</div>
```

### Toggle states

Use Bootstrap's button plugin for controls that toggle between pressed and unpressed states.

```twig
<div class="d-flex flex-column align-items-start gap-3">
    <div class="d-inline-flex flex-wrap gap-1">
        <twig:Button :color="null" data-bs-toggle="button">Toggle button</twig:Button>
        <twig:Button :color="null" class="active" data-bs-toggle="button" aria-pressed="true">Active toggle button</twig:Button>
        <twig:Button :color="null" disabled data-bs-toggle="button">Disabled toggle button</twig:Button>
    </div>
    <div class="d-inline-flex flex-wrap gap-1">
        <twig:Button data-bs-toggle="button">Toggle button</twig:Button>
        <twig:Button class="active" data-bs-toggle="button" aria-pressed="true">Active toggle button</twig:Button>
        <twig:Button disabled data-bs-toggle="button">Disabled toggle button</twig:Button>
    </div>
    <div class="d-inline-flex flex-wrap gap-1">
        <twig:Button tag="a" :color="null" href="#" data-bs-toggle="button">Toggle link</twig:Button>
        <twig:Button tag="a" :color="null" href="#" class="active" data-bs-toggle="button" aria-pressed="true">Active toggle link</twig:Button>
        <twig:Button tag="a" :color="null" disabled data-bs-toggle="button">Disabled toggle link</twig:Button>
    </div>
    <div class="d-inline-flex flex-wrap gap-1">
        <twig:Button tag="a" href="#" data-bs-toggle="button">Toggle link</twig:Button>
        <twig:Button tag="a" href="#" class="active" data-bs-toggle="button" aria-pressed="true">Active toggle link</twig:Button>
        <twig:Button tag="a" disabled data-bs-toggle="button">Disabled toggle link</twig:Button>
    </div>
</div>
```

## API Reference

### `<twig:Button>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'button'\|'a'\|'input'` | `'button'` | The HTML element to render. |
| `type` | `'button'\|'submit'\|'reset'\|null` | `null` | The type used for button and input elements. |
| `href` | `string\|null` | `null` | The destination used for anchor elements. |
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'\|'link'\|null` | `'primary'` | The Bootstrap contextual color. |
| `outline` | `boolean` | `false` | Whether to use an outline style. |
| `size` | `'sm'\|'lg'\|null` | `null` | The Bootstrap button size. |
| `disabled` | `boolean` | `false` | Whether the control is disabled. |
| `value` | `string\|null` | `null` | The value rendered by input elements. |
| `content` | `string` | `''` | The fallback label when no content block is provided. |

| Block | Description |
|:------|:------------|
| `content` | The button label and optional inline content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/card.md">
# Card

Build flexible content containers with optional headers, footers, images, and contextual styles.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<twig:Card style="width: 22rem;">
    <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
    <twig:Card:Body>
        <twig:Card:Title>Explore the outdoors</twig:Card:Title>
        <twig:Card:Subtitle class="mb-2 text-body-secondary">Weekend inspiration</twig:Card:Subtitle>
        <twig:Card:Text>Discover a new trail and make time for a change of scenery.</twig:Card:Text>
        <a href="#" class="btn btn-primary">Find a trail</a>
        <twig:Card:Link href="#">View guide</twig:Card:Link>
    </twig:Card:Body>
    <twig:Card:Footer class="text-body-secondary">Updated today</twig:Card:Footer>
</twig:Card>
```

## Installation

```shell
php bin/console ux:install card --kit bootstrap
```
## Usage

```twig
<twig:Card style="max-width: 24rem;">
    <twig:Card:Header>Featured</twig:Card:Header>
    <twig:Card:Body>
        <twig:Card:Title>Card title</twig:Card:Title>
        <twig:Card:Text>Some quick example text to build on the card title.</twig:Card:Text>
    </twig:Card:Body>
    <twig:Card:Footer class="text-body-secondary">2 days ago</twig:Card:Footer>
</twig:Card>
```

## Accessibility

Choose a semantic heading level for each card title that fits the surrounding page hierarchy.

Do not rely on background, text, or border color alone to communicate meaning. Keep sufficient contrast and provide an equivalent text cue when color carries information.

## Examples

Combine an image, title, supporting text, and action in a fixed-width card.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<twig:Card style="width: 18rem;">
    <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
    <twig:Card:Body>
        <twig:Card:Title>Card title</twig:Card:Title>
        <twig:Card:Text>Some quick example text to build on the card title and make up the bulk of the card's content.</twig:Card:Text>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </twig:Card:Body>
</twig:Card>
```

### Content types

Mix card bodies, titles, subtitles, text, links, images, and list groups.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<div class="d-flex flex-wrap gap-3">
    <twig:Card style="width: 18rem;">
        <twig:Card:Body>
            <twig:Card:Title>Card title</twig:Card:Title>
            <twig:Card:Subtitle class="mb-2 text-body-secondary">Card subtitle</twig:Card:Subtitle>
            <twig:Card:Text>Some quick example text to build on the card title.</twig:Card:Text>
            <twig:Card:Link href="#">Card link</twig:Card:Link>
            <twig:Card:Link href="#">Another link</twig:Card:Link>
        </twig:Card:Body>
    </twig:Card>

    <twig:Card style="width: 18rem;">
        <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
        <twig:Card:Body>
            <twig:Card:Text>Text, images, list groups, and links can be freely combined.</twig:Card:Text>
        </twig:Card:Body>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">An item</li>
            <li class="list-group-item">A second item</li>
            <li class="list-group-item">A third item</li>
        </ul>
        <twig:Card:Body>
            <twig:Card:Link href="#">Card link</twig:Card:Link>
        </twig:Card:Body>
    </twig:Card>
</div>
```

### Header and footer

Add optional headers and footers, including semantic heading and quote content.

```twig
<div class="d-grid gap-3">
    <twig:Card>
        <twig:Card:Header>Featured</twig:Card:Header>
        <twig:Card:Body>
            <twig:Card:Title>Special title treatment</twig:Card:Title>
            <twig:Card:Text>With supporting text below as a natural lead-in to additional content.</twig:Card:Text>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </twig:Card:Body>
    </twig:Card>

    <twig:Card class="text-center">
        <twig:Card:Header tag="h5">Featured</twig:Card:Header>
        <twig:Card:Body>
            <figure class="mb-0">
                <blockquote class="blockquote"><p>A well-known quote, contained in a blockquote element.</p></blockquote>
                <figcaption class="blockquote-footer mb-0">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
            </figure>
        </twig:Card:Body>
        <twig:Card:Footer class="text-body-secondary">2 days ago</twig:Card:Footer>
    </twig:Card>
</div>
```

### Sizing

Size cards with Bootstrap's grid, width utilities, or custom CSS.

```twig
<div class="row">
    <div class="col-sm-6 mb-3 mb-sm-0">
        <twig:Card>
            <twig:Card:Body>
                <twig:Card:Title>Grid-sized card</twig:Card:Title>
                <twig:Card:Text>The surrounding Bootstrap grid controls this card's width.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    </div>
    <div class="col-sm-6">
        <twig:Card class="w-75">
            <twig:Card:Body>
                <twig:Card:Title>Utility-sized card</twig:Card:Title>
                <twig:Card:Text>Width utilities or custom CSS can size a card directly.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    </div>
</div>
```

### Text alignment

Apply Bootstrap text alignment utilities to a card or one of its sections.

```twig
<div class="d-flex flex-wrap gap-3">
    {% for alignment, label in {'': 'Start', 'text-center': 'Center', 'text-end': 'End'} %}
        <twig:Card class="{{ alignment }}" style="width: 18rem;">
            <twig:Card:Body>
                <twig:Card:Title>{{ label }} aligned</twig:Card:Title>
                <twig:Card:Text>Use Bootstrap text utilities on the whole card or an individual section.</twig:Card:Text>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </twig:Card:Body>
        </twig:Card>
    {% endfor %}
</div>
```

### Navigation

Place tabs or pills in the card header.

```twig
<div class="d-grid gap-3">
    {% for style in ['tabs', 'pills'] %}
        <twig:Card class="text-center">
            <twig:Card:Header>
                <ul class="nav nav-{{ style }} card-header-{{ style }}">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
            </twig:Card:Header>
            <twig:Card:Body>
                <twig:Card:Title>Special title treatment</twig:Card:Title>
                <twig:Card:Text>Card headers can contain Bootstrap tab or pill navigation.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    {% endfor %}
</div>
```

### Image caps

Position an image at the top or bottom edge of a card.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=960&q=80' %}

<div class="row row-cols-1 row-cols-sm-2 g-3">
    <div class="col">
        <twig:Card class="h-100">
            <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
            <twig:Card:Body>
                <twig:Card:Title>Top image cap</twig:Card:Title>
                <twig:Card:Text>Images can sit at either end of a card.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    </div>
    <div class="col">
        <twig:Card class="h-100">
            <twig:Card:Body>
                <twig:Card:Title>Bottom image cap</twig:Card:Title>
                <twig:Card:Text>The bottom position matches the lower card corners.</twig:Card:Text>
            </twig:Card:Body>
            <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" position="bottom" />
        </twig:Card>
    </div>
</div>
```

### Image overlays

Use an image as the card background and place concise, high-contrast content over it.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=960&q=80' %}

<twig:Card class="text-bg-dark">
    <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" position="background" />
    <twig:Card:Overlay>
        <twig:Card:Title>Card title</twig:Card:Title>
        <twig:Card:Text>Overlay text should remain shorter than the image height and maintain sufficient contrast.</twig:Card:Text>
        <twig:Card:Text><small>Last updated 3 mins ago</small></twig:Card:Text>
    </twig:Card:Overlay>
</twig:Card>
```

### Horizontal

Combine the component with Bootstrap's responsive grid to create a horizontal card.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<twig:Card class="mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-sm-4">
            <img src="{{ image_url }}" class="img-fluid rounded-start h-100 object-fit-cover" alt="A quiet mountain landscape">
        </div>
        <div class="col-sm-8">
            <twig:Card:Body>
                <twig:Card:Title>Card title</twig:Card:Title>
                <twig:Card:Text>This card becomes horizontal at the small breakpoint.</twig:Card:Text>
                <twig:Card:Text><small class="text-body-secondary">Last updated 3 mins ago</small></twig:Card:Text>
            </twig:Card:Body>
        </div>
    </div>
</twig:Card>
```

### Background and color

Use Bootstrap's `text-bg-*` helpers for contextual card styles.

```twig
<div class="d-flex flex-wrap gap-3">
    {% for color in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'] %}
        <twig:Card class="text-bg-{{ color }}" style="max-width: 18rem;">
            <twig:Card:Header>Header</twig:Card:Header>
            <twig:Card:Body>
                <twig:Card:Title>{{ color|title }} card title</twig:Card:Title>
                <twig:Card:Text>Some quick example text to build on the card title.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    {% endfor %}
</div>
```

### Borders

Change border and text colors independently with utility classes.

```twig
<div class="d-flex flex-wrap gap-3">
    {% for color in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'] %}
        <twig:Card class="border-{{ color }}" style="max-width: 18rem;">
            <twig:Card:Header class="border-{{ color }}">Header</twig:Card:Header>
            <twig:Card:Body class="text-{{ color }}">
                <twig:Card:Title>{{ color|title }} card title</twig:Card:Title>
                <twig:Card:Text>Use border utilities independently from backgrounds.</twig:Card:Text>
            </twig:Card:Body>
        </twig:Card>
    {% endfor %}
</div>
```

### Mixins utilities

Customize header and footer borders or remove their background color.

```twig
<twig:Card class="border-success" style="max-width: 18rem;">
    <twig:Card:Header class="bg-transparent border-success">Header</twig:Card:Header>
    <twig:Card:Body class="text-success">
        <twig:Card:Title>Success card title</twig:Card:Title>
        <twig:Card:Text>Header and footer borders can be customized independently.</twig:Card:Text>
    </twig:Card:Body>
    <twig:Card:Footer class="bg-transparent border-success">Footer</twig:Card:Footer>
</twig:Card>
```

### Card groups

Render a set of attached cards with equal width and height.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<div class="card-group">
    {% for length in ['This content is a little bit longer.', 'This card has supporting text.', 'This card has even longer content to demonstrate equal heights.'] %}
        <twig:Card>
            <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
            <twig:Card:Body>
                <twig:Card:Title>Card title</twig:Card:Title>
                <twig:Card:Text>{{ length }}</twig:Card:Text>
            </twig:Card:Body>
            <twig:Card:Footer><small class="text-body-secondary">Last updated 3 mins ago</small></twig:Card:Footer>
        </twig:Card>
    {% endfor %}
</div>
```

### Grid cards

Use responsive grid columns and `h-100` cards for a flexible multi-card layout.

```twig
{% set image_url = 'https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80' %}

<div class="row row-cols-1 row-cols-sm-3 g-4">
    {% for length in ['A longer card with supporting text.', 'A short card.', 'A card with supporting text and an aligned footer.'] %}
        <div class="col">
            <twig:Card class="h-100">
                <twig:Card:Image src="{{ image_url }}" alt="A quiet mountain landscape" />
                <twig:Card:Body>
                    <twig:Card:Title>Card title</twig:Card:Title>
                    <twig:Card:Text>{{ length }}</twig:Card:Text>
                </twig:Card:Body>
                <twig:Card:Footer><small class="text-body-secondary">Last updated 3 mins ago</small></twig:Card:Footer>
            </twig:Card>
        </div>
    {% endfor %}
</div>
```

## API Reference

### `<twig:Card>`

| Block | Description |
|:------|:------------|
| `content` | The card content, typically including `Card:Header`, `Card:Body`, and `Card:Footer`. |
### `<twig:Card:Body>`

| Block | Description |
|:------|:------------|
| `content` | The main content area of the card. |
### `<twig:Card:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer content of the card. |
### `<twig:Card:Header>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'div'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'div'` | The HTML element to render. |

| Block | Description |
|:------|:------------|
| `content` | The header content of the card. |
### `<twig:Card:Image>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `src` | `string` | - | The image source URL. |
| `alt` | `string` | `''` | A text alternative describing the image. |
| `position` | `'top'\|'bottom'\|'background'` | `'top'` | The image position within the card. |
### `<twig:Card:Link>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `href` | `string` | `'#'` | The link destination. |

| Block | Description |
|:------|:------------|
| `content` | The link label. |
### `<twig:Card:Overlay>`

| Block | Description |
|:------|:------------|
| `content` | The content displayed over the card image. |
### `<twig:Card:Subtitle>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'h2'\|'h3'\|'h4'\|'h5'\|'h6'\|'div'` | `'h6'` | The HTML element to render. |

| Block | Description |
|:------|:------------|
| `content` | The subtitle text of the card. |
### `<twig:Card:Text>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'p'\|'div'` | `'p'` | The HTML element to render. |

| Block | Description |
|:------|:------------|
| `content` | The supporting text of the card. |
### `<twig:Card:Title>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'h2'\|'h3'\|'h4'\|'h5'\|'h6'\|'div'` | `'h5'` | The HTML element to render. |

| Block | Description |
|:------|:------------|
| `content` | The title text of the card. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/carousel.md">
# Carousel

Cycle through images, text, and other content with optional controls and indicators.

```twig
<twig:Carousel id="demo-carousel" indicators class="w-100">
    <twig:block name="indicators">
        <button type="button" data-bs-target="#demo-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#demo-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#demo-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </twig:block>
    <twig:Carousel:Item active>
        <div class="d-flex align-items-center justify-content-center bg-primary text-white fs-1" style="height: 12rem">First slide</div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="d-flex align-items-center justify-content-center bg-success text-white fs-1" style="height: 12rem">Second slide</div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="d-flex align-items-center justify-content-center bg-danger text-white fs-1" style="height: 12rem">Third slide</div>
    </twig:Carousel:Item>
</twig:Carousel>
```

## Installation

```shell
php bin/console ux:install carousel --kit bootstrap
```
## Usage

```twig
<twig:Carousel id="featured-content">
    <twig:Carousel:Item active>
        <img src="..." class="d-block w-100" alt="...">
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <img src="..." class="d-block w-100" alt="...">
    </twig:Carousel:Item>
</twig:Carousel>
```

## Accessibility

Every carousel needs a unique `id`, and every indicator and control must target that same value. Mark exactly one initial `Carousel:Item` as `active`; otherwise the carousel is not visible.

Carousels that start automatically can be difficult for people using assistive technology or who need more time to read. Prefer user-controlled playback, or provide a pause control when autoplay is required. Write meaningful alternative text for images and keep the previous and next labels understandable in the page language.

## Examples

### Basic example

Cycle through three slides with Bootstrap's previous and next controls.

```twig
<twig:Carousel id="basic-carousel" class="w-100">
    <twig:Carousel:Item active>
        <div class="d-flex align-items-center justify-content-center bg-primary text-white fs-1" style="height: 12rem">First slide</div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="d-flex align-items-center justify-content-center bg-secondary text-white fs-1" style="height: 12rem">Second slide</div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="d-flex align-items-center justify-content-center bg-dark text-white fs-1" style="height: 12rem">Third slide</div>
    </twig:Carousel:Item>
</twig:Carousel>
```

### Indicators

Add buttons that identify and select each slide.

```twig
<twig:Carousel id="indicators-carousel" indicators class="w-100">
    <twig:block name="indicators">
        <button type="button" data-bs-target="#indicators-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#indicators-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#indicators-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </twig:block>
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Captions

Overlay responsive headings and supporting text on each slide.

```twig
<twig:Carousel id="captions-carousel" indicators class="w-100">
    <twig:block name="indicators">
        <button type="button" data-bs-target="#captions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#captions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#captions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </twig:block>
    <twig:Carousel:Item active>
        <div class="bg-primary" style="height: 12rem"></div>
        <div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Representative placeholder content for the first slide.</p></div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="bg-success" style="height: 12rem"></div>
        <div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Representative placeholder content for the second slide.</p></div>
    </twig:Carousel:Item>
    <twig:Carousel:Item>
        <div class="bg-danger" style="height: 12rem"></div>
        <div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Representative placeholder content for the third slide.</p></div>
    </twig:Carousel:Item>
</twig:Carousel>
```

### Crossfade

Replace the horizontal movement with a fade transition.

```twig
<twig:Carousel id="crossfade-carousel" fade class="w-100">
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Autoplaying carousels

Start cycling as soon as the page loads with `ride="carousel"`.

```twig
<twig:Carousel id="autoplay-carousel" ride="carousel" class="w-100">
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Ride after interaction

Start cycling only after the user first interacts with the carousel.

```twig
<twig:Carousel id="interaction-carousel" ride="true" class="w-100">
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Individual item interval

Give individual slides a longer or shorter display interval.

```twig
<twig:Carousel id="interval-carousel" ride="carousel" class="w-100">
    <twig:Carousel:Item active :interval="10000"><div class="bg-primary text-white p-5 text-center fs-2">10 seconds</div></twig:Carousel:Item>
    <twig:Carousel:Item :interval="2000"><div class="bg-success text-white p-5 text-center fs-2">2 seconds</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Default interval</div></twig:Carousel:Item>
</twig:Carousel>
```

### Autoplay without controls

Autoplay a carousel without rendering previous and next buttons.

```twig
<twig:Carousel id="uncontrolled-carousel" ride="carousel" :controls="false" class="w-100">
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Disable touch swiping

Keep controls active while disabling touch gestures.

```twig
<twig:Carousel id="no-touch-carousel" :touch="false" class="w-100">
    <twig:Carousel:Item active><div class="bg-primary text-white p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-success text-white p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-danger text-white p-5 text-center fs-2">Third slide</div></twig:Carousel:Item>
</twig:Carousel>
```

### Dark variant

Use Bootstrap's dark color mode for controls and indicators on a light slide.

```twig
<twig:Carousel id="dark-carousel" theme="dark" indicators class="w-100">
    <twig:block name="indicators">
        <button type="button" data-bs-target="#dark-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#dark-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    </twig:block>
    <twig:Carousel:Item active><div class="bg-light text-dark p-5 text-center fs-2">First slide</div></twig:Carousel:Item>
    <twig:Carousel:Item><div class="bg-light text-dark p-5 text-center fs-2">Second slide</div></twig:Carousel:Item>
</twig:Carousel>
```

## API Reference

### `<twig:Carousel>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier targeted by carousel controls and indicators. |
| `controls` | `boolean` | `true` | Whether to render previous and next controls. |
| `indicators` | `boolean` | `false` | Whether to render the indicators block. |
| `ride` | `'carousel'\|'true'\|null` | `null` | Whether and when the carousel starts cycling automatically. |
| `interval` | `number\|null` | `null` | The delay in milliseconds between automatically cycling slides. |
| `pause` | `'hover'\|false\|null` | `null` | Whether cycling pauses when the pointer enters the carousel. |
| `wrap` | `boolean` | `true` | Whether the carousel cycles continuously. |
| `touch` | `boolean` | `true` | Whether touch swipe interactions are enabled. |
| `fade` | `boolean` | `false` | Whether slides crossfade instead of moving horizontally. |
| `theme` | `'light'\|'dark'\|null` | `null` | The component-specific Bootstrap color mode. |

| Block | Description |
|:------|:------------|
| `indicators` | The carousel indicator buttons. |
| `content` | The carousel items, typically `Carousel:Item` components. |
| `previous` | The visually hidden label for the previous control. |
| `next` | The visually hidden label for the next control. |
### `<twig:Carousel:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `active` | `boolean` | `false` | Whether this item is the currently visible slide. |
| `interval` | `number\|null` | `null` | The item-specific delay in milliseconds before advancing. |

| Block | Description |
|:------|:------------|
| `content` | The slide content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/close-button.md">
# Close Button

Provide an accessible control for dismissing content such as modals and alerts.

```twig
<div class="d-flex align-items-center gap-4">
    <twig:CloseButton label="Dismiss notification" />
    <twig:CloseButton disabled label="Dismiss notification" />
    <span class="rounded bg-dark p-3" data-bs-theme="dark">
        <twig:CloseButton label="Dismiss dark notification" />
    </span>
</div>
```

## Installation

```shell
php bin/console ux:install close-button --kit bootstrap
```
## Usage

```twig
<twig:CloseButton />
```

## Accessibility

Always provide a concise `label` that identifies what the button closes or dismisses. The visible icon is decorative and the accessible name comes from `aria-label`.

Use the disabled state only when the close action is genuinely unavailable.

## Examples

Render a standard close button with an accessible label.

```twig
<twig:CloseButton label="Close" />
```

### Disabled state

Disable the button when the dismiss action is unavailable.

```twig
<twig:CloseButton disabled label="Close" />
```

### Dark variant

Use Bootstrap's `data-bs-theme="dark"` color mode on the button or an ancestor. The deprecated `.btn-close-white` class is intentionally not used.

```twig
<div class="d-inline-flex gap-3 rounded bg-dark p-3" data-bs-theme="dark">
    <twig:CloseButton label="Close" />
    <twig:CloseButton disabled label="Close" />
</div>
```

## API Reference

### `<twig:CloseButton>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `disabled` | `boolean` | `false` | Whether the close button is disabled. |
| `label` | `string` | - | The accessible label describing the close action. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/collapse.md">
# Collapse

Toggle the visibility of content with Bootstrap's Collapse plugin.

```twig
<div class="align-self-start w-100">
    <button
        class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-demo"
        aria-expanded="false"
        aria-controls="collapse-demo"
    >
        Show project details
    </button>
    <twig:Collapse id="collapse-demo" class="mt-3">
        <div class="card card-body">
            This panel is controlled by Bootstrap's Collapse plugin. Its trigger automatically keeps <code>aria-expanded</code> synchronized.
        </div>
    </twig:Collapse>
</div>
```

## Installation

```shell
php bin/console ux:install collapse --kit bootstrap
```
## Usage

```twig
<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#details-collapse"
    aria-expanded="false"
    aria-controls="details-collapse"
>
    Toggle details
</button>

<twig:Collapse id="details-collapse" class="mt-3">
    Additional details appear here.
</twig:Collapse>
```

## Accessibility

Prefer a native button trigger. If an anchor is used, add `role="button"`. Set the initial `aria-expanded` value to match the `show` prop and point `aria-controls` to the collapsible element's ID.

Bootstrap synchronizes `aria-expanded` while toggling. Avoid padding directly on the collapse element because Bootstrap animates its height or width; place padding on an inner element instead.

## Examples

Control the same collapsible panel with a link or a button.

```twig
<div class="align-self-start w-100 d-flex flex-column gap-2">
    <div>
        <a
            class="btn btn-primary"
            data-bs-toggle="collapse"
            href="#collapse-example"
            role="button"
            aria-expanded="false"
            aria-controls="collapse-example"
        >
            Link with href
        </a>
        <button
            class="btn btn-primary"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapse-example"
            aria-expanded="false"
            aria-controls="collapse-example"
        >
            Button with data-bs-target
        </button>
    </div>
    <twig:Collapse id="collapse-example">
        <div class="card card-body">
            Some placeholder content for the collapse component. This panel can be toggled by either control.
        </div>
    </twig:Collapse>
</div>
```

### Horizontal

Animate width instead of height and set a width on the immediate child.

```twig
<div class="align-self-start w-75">
    <button
        class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-width-example"
        aria-expanded="false"
        aria-controls="collapse-width-example"
    >
        Toggle width collapse
    </button>
    <div class="mt-3" style="min-height: 120px;">
        <twig:Collapse id="collapse-width-example" horizontal>
            <div class="card card-body" style="width: 300px;">
                This content collapses horizontally. The immediate child defines the expanded width.
            </div>
        </twig:Collapse>
    </div>
</div>
```

### Multiple toggles and targets

Use ID and class selectors to control individual panels or several targets together.

```twig
<div class="align-self-start w-100">
    <p class="d-flex flex-wrap gap-2">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-collapse-one" aria-expanded="false" aria-controls="multi-collapse-one">Toggle first element</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-collapse-two" aria-expanded="false" aria-controls="multi-collapse-two">Toggle second element</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multi-collapse-one multi-collapse-two">Toggle both elements</button>
    </p>
    <div class="row">
        <div class="col">
            <twig:Collapse id="multi-collapse-one" class="multi-collapse">
                <div class="card card-body">The first panel can be toggled independently or together with the second.</div>
            </twig:Collapse>
        </div>
        <div class="col">
            <twig:Collapse id="multi-collapse-two" class="multi-collapse">
                <div class="card card-body">The second panel responds to its ID and the shared class selector.</div>
            </twig:Collapse>
        </div>
    </div>
</div>
```

## API Reference

### `<twig:Collapse>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier targeted by collapse controls. |
| `show` | `boolean` | `false` | Whether the collapsible content is initially visible. |
| `horizontal` | `boolean` | `false` | Whether the width is collapsed instead of the height. |

| Block | Description |
|:------|:------------|
| `content` | The content shown and hidden by the collapse control. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/dropdown.md">
# Dropdown

Display contextual menus from buttons and links in any Bootstrap direction.

```twig
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100" style="min-height: 124px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="demo-dropdown">Dropdown button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu labelledBy="demo-dropdown">
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

## Installation

```shell
php bin/console ux:install dropdown --kit bootstrap
```
## Usage

```twig
<twig:Dropdown>
    <twig:Dropdown:Toggle id="actions-dropdown">Actions</twig:Dropdown:Toggle>
    <twig:Dropdown:Menu labelledBy="actions-dropdown">
        <twig:Dropdown:Item href="/edit">Edit</twig:Dropdown:Item>
        <twig:Dropdown:Item href="/duplicate">Duplicate</twig:Dropdown:Item>
        <twig:Dropdown:Divider />
        <twig:Dropdown:Item href="/archive">Archive</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
</twig:Dropdown>
```

## Accessibility

Bootstrap dropdowns are generic popovers, so the component does not add ARIA menu roles automatically. Add `role="menu"`, `role="menuitem"`, and the matching keyboard behavior only when the dropdown implements the complete ARIA menu pattern.

Use a button for actions and reserve link toggles and items for navigation. Give a toggle an `id` and pass it to the menu's `labelledBy` prop when an explicit accessible relationship is useful. Disabled links receive `aria-disabled="true"` and are removed from sequential keyboard navigation, but application code must still prevent any custom activation behavior.

## Examples

### Single button

Use buttons or links with Bootstrap's contextual colors.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100" style="min-height: 204px">
    {% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
        <twig:Dropdown>
            <twig:Dropdown:Toggle color="{{ color }}">{{ color|title }}</twig:Dropdown:Toggle>
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
    <twig:Dropdown>
        <twig:Dropdown:Toggle tag="a" color="primary">Dropdown link</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu>
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Split button

Separate the primary action from the menu toggle.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100" style="min-height: 224px">
    {% for color in ['primary', 'secondary', 'success', 'info', 'warning', 'danger'] %}
        <twig:Dropdown grouped>
            <button type="button" class="btn btn-{{ color }}">{{ color|title }}</button>
            <twig:Dropdown:Toggle color="{{ color }}" split />
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
                <twig:Dropdown:Divider />
                <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
</div>
```

### Sizing

Create large and small regular or split dropdown buttons.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100" style="min-height: 324px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle color="secondary" size="lg">Large button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button class="btn btn-light btn-lg" type="button">Large split button</button>
        <twig:Dropdown:Toggle color="light" size="lg" split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown>
        <twig:Dropdown:Toggle color="secondary" size="sm">Small button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button class="btn btn-light btn-sm" type="button">Small split button</button>
        <twig:Dropdown:Toggle color="light" size="sm" split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Dark dropdowns

Render a dark menu with a visible active item.

```twig
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100" style="min-height: 164px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="dark-dropdown" color="secondary">Dropdown button</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu dark labelledBy="dark-dropdown">
            <twig:Dropdown:Item href="#" active>Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
            <twig:Dropdown:Divider />
            <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Directions

Open menus from the center, above, or from either side.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100" style="min-height: 264px">
    <twig:Dropdown direction="center">
        <twig:Dropdown:Toggle>Centered dropdown</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up">
        <twig:Dropdown:Toggle>Dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up" grouped>
        <button type="button" class="btn btn-secondary">Split dropup</button>
        <twig:Dropdown:Toggle split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up-center">
        <twig:Dropdown:Toggle>Centered dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end">
        <twig:Dropdown:Toggle>Dropend</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end" grouped>
        <button type="button" class="btn btn-secondary">Split dropend</button>
        <twig:Dropdown:Toggle split />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start">
        <twig:Dropdown:Toggle>Dropstart</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start" grouped>
        <twig:Dropdown:Toggle split />
        <button type="button" class="btn btn-secondary">Split dropstart</button>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Menu items

Use links, buttons, or non-interactive text as menu content.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-4 w-100">
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
        <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
        <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Item tag="button">Action</twig:Dropdown:Item>
        <twig:Dropdown:Item tag="button">Another action</twig:Dropdown:Item>
        <twig:Dropdown:Item tag="button">Something else here</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
    <twig:Dropdown:Menu class="d-block position-static">
        <twig:Dropdown:Text>Dropdown item text</twig:Dropdown:Text>
        <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
    </twig:Dropdown:Menu>
</div>
```

### Active and disabled items

Communicate the current item and unavailable choices.

```twig
<twig:Dropdown:Menu class="d-block position-static">
    <twig:Dropdown:Item href="#">Regular link</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#" active>Active link</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#" disabled>Disabled link</twig:Dropdown:Item>
</twig:Dropdown:Menu>
```

### Menu alignment

Align a menu against the end of its toggle.

```twig
<div class="d-flex justify-content-center align-items-start align-self-stretch w-100" style="min-height: 124px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle id="aligned-dropdown">Right-aligned menu</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="end" labelledBy="aligned-dropdown">
            <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Something else here</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Responsive alignment

Change menu alignment at Bootstrap breakpoints.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100" style="min-height: 144px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-display="static">Left-aligned but right-aligned when large screen</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="lg-end"><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-display="static">Right-aligned but left-aligned when large screen</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu :align="['end', 'lg-start']"><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Alignment options

Combine responsive alignment with dropdowns that open in different directions.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3 w-100" style="min-height: 424px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle>Dropdown</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu>
            <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
            <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="end">
        <twig:Dropdown:Toggle>Dropend</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu :align="['end', 'lg-start']">
            <twig:Dropdown:Item href="#">Right-aligned, left-aligned when large</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="start">
        <twig:Dropdown:Toggle>Dropstart</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="lg-end">
            <twig:Dropdown:Item href="#">Left-aligned, right-aligned when large</twig:Dropdown:Item>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown direction="up">
        <twig:Dropdown:Toggle>Dropup</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu align="end"><twig:Dropdown:Item href="#">Right-aligned menu</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Headers, dividers, and text

Structure longer menus with headings, separators, and explanatory copy.

```twig
<twig:Dropdown:Menu class="d-block position-static">
    <twig:Dropdown:Header>Dropdown header</twig:Dropdown:Header>
    <twig:Dropdown:Item href="#">Action</twig:Dropdown:Item>
    <twig:Dropdown:Item href="#">Another action</twig:Dropdown:Item>
    <twig:Dropdown:Divider />
    <twig:Dropdown:Text>Some example text that's free-flowing within the dropdown menu.</twig:Dropdown:Text>
    <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
</twig:Dropdown:Menu>
```

### Forms

Display a static form or open one from a dropdown toggle.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-4 w-100" style="min-height: 304px">
    <twig:Dropdown:Menu tag="form" class="d-block position-static p-4">
        <div class="mb-3">
            <label for="dropdown-email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="dropdown-email" placeholder="email@example.com">
        </div>
        <div class="mb-3">
            <label for="dropdown-password" class="form-label">Password</label>
            <input type="password" class="form-control" id="dropdown-password" placeholder="Password">
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdown-check">
                <label class="form-check-label" for="dropdown-check">Remember me</label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
    </twig:Dropdown:Menu>
    <twig:Dropdown>
        <twig:Dropdown:Toggle>Dropdown form</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu tag="form" class="p-4">
            <div class="mb-3">
                <label for="menu-email" class="form-label">Email address</label>
                <input type="email" class="form-control" id="menu-email">
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Dropdown options

Configure Popper's offset and reference element with Bootstrap data attributes.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100" style="min-height: 134px">
    <twig:Dropdown>
        <twig:Dropdown:Toggle data-bs-offset="10,20">Offset</twig:Dropdown:Toggle>
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
    <twig:Dropdown grouped>
        <button type="button" class="btn btn-secondary">Reference</button>
        <twig:Dropdown:Toggle split data-bs-reference="parent" />
        <twig:Dropdown:Menu><twig:Dropdown:Item href="#">Action</twig:Dropdown:Item></twig:Dropdown:Menu>
    </twig:Dropdown>
</div>
```

### Auto close behavior

Choose which inside or outside interactions dismiss the menu.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-start gap-3 w-100" style="min-height: 184px">
    {% for behavior, label in {
    true: 'Default dropdown',
    inside: 'Clickable inside',
    outside: 'Clickable outside',
    false: 'Manual close',
    } %}
        <twig:Dropdown>
            <twig:Dropdown:Toggle data-bs-auto-close="{{ behavior }}">{{ label }}</twig:Dropdown:Toggle>
            <twig:Dropdown:Menu>
                <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Menu item</twig:Dropdown:Item>
            </twig:Dropdown:Menu>
        </twig:Dropdown>
    {% endfor %}
</div>
```

## API Reference

### `<twig:Dropdown>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `direction` | `'down'\|'center'\|'up'\|'up-center'\|'end'\|'start'` | `'down'` | The direction in which the menu opens. |
| `grouped` | `boolean` | `false` | Whether to use a button group wrapper, as required by split toggles. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown toggle and menu. |
### `<twig:Dropdown:Header>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'h6'` | The heading element to render. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown section heading. |
### `<twig:Dropdown:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'a'\|'button'` | `'a'` | The interactive element to render. |
| `href` | `string` | `'#'` | The destination used by link items. |
| `active` | `boolean` | `false` | Whether the item represents the current selection. |
| `disabled` | `boolean` | `false` | Whether the item is unavailable. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown item label. |
### `<twig:Dropdown:Menu>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'ul'\|'div'\|'form'` | `'ul'` | The menu container element to render. |
| `dark` | `boolean` | `false` | Whether to use Bootstrap's dark menu variant. |
| `align` | `string\|array<string>\|null` | `null` | One or more Bootstrap alignment suffixes, such as `end` or `lg-end`. |
| `labelledBy` | `string\|null` | `null` | The identifier of the toggle that labels the menu. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown menu items and custom content. |
### `<twig:Dropdown:Text>`

| Block | Description |
|:------|:------------|
| `content` | The non-interactive dropdown text. |
### `<twig:Dropdown:Toggle>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'button'\|'a'` | `'button'` | The interactive element to render. |
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'` | `'secondary'` | The Bootstrap contextual color. |
| `outline` | `boolean` | `false` | Whether to render the outline variant. |
| `size` | `'sm'\|'lg'\|null` | `null` | The optional button size. |
| `split` | `boolean` | `false` | Whether to render only the split-menu caret. |
| `disabled` | `boolean` | `false` | Whether the toggle is disabled. |

| Block | Description |
|:------|:------------|
| `content` | The visible toggle label. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/figure.md">
# Figure

Display related visual content with an optional caption and responsive alignment.

```twig
<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" captionAlign="center" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=960&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>
```

## Installation

```shell
php bin/console ux:install figure --kit bootstrap
```
## Usage

```twig
<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>
```

## Accessibility

Write image alternative text that describes the image's purpose in context. Avoid repeating the caption verbatim unless both carry distinct information.

Use an empty `alt` value for a decorative image. The caption remains associated with the figure through the native `figure` and `figcaption` elements.

## Examples

### Default figure

Display a responsive image with a caption below it.

```twig
<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>
```

### Caption alignment

Align the caption with Bootstrap's text utilities through the `captionAlign` prop.

```twig
<twig:Figure caption="Bukchon Hanok Village, in Seoul, South Korea" captionAlign="end" style="max-width: 36rem;">
    <img
        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?auto=format&fit=crop&w=720&q=80"
        class="figure-img img-fluid rounded"
        alt="Bukchon Hanok Village, in Seoul, South Korea"
    >
</twig:Figure>
```

## API Reference

### `<twig:Figure>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `caption` | `string\|null` | `null` | The optional caption displayed below the figure content. |
| `captionAlign` | `'start'\|'center'\|'end'\|null` | `null` | The horizontal alignment of the caption. |

| Block | Description |
|:------|:------------|
| `content` | The figure content, typically a responsive image. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/list-group.md">
# List Group

Display a flexible series of content with active, disabled, actionable, and contextual states.

```twig
<twig:ListGroup tag="div" style="max-width: 28rem;">
    <twig:ListGroup:Item href="#" active>The current link item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#">A second link item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#">A third link item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" disabled>A disabled link item</twig:ListGroup:Item>
</twig:ListGroup>
```

## Installation

```shell
php bin/console ux:install list-group --kit bootstrap
```
## Usage

```twig
<twig:ListGroup>
    <twig:ListGroup:Item>An item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A second item</twig:ListGroup:Item>
    <twig:ListGroup:Item active>A third item</twig:ListGroup:Item>
</twig:ListGroup>
```

## Accessibility

Do not rely on contextual color alone to communicate meaning. Make the meaning explicit in the visible content or provide additional visually hidden text.

Disabled links omit their `href`, expose `aria-disabled="true"`, and are removed from keyboard navigation. Associate every checkbox and radio with a visible label or an `aria-label`.

## Examples

### Basic example

Use a list group to display a simple series of related items.

```twig
<twig:ListGroup>
    <twig:ListGroup:Item>An item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A second item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A third item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A fourth item</twig:ListGroup:Item>
    <twig:ListGroup:Item>And a fifth one</twig:ListGroup:Item>
</twig:ListGroup>
```

### Active items

Mark the current selection with the active state.

```twig
<twig:ListGroup>
    <twig:ListGroup:Item active>An active item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A second item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A third item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A fourth item</twig:ListGroup:Item>
    <twig:ListGroup:Item>And a fifth one</twig:ListGroup:Item>
</twig:ListGroup>
```

### Links and buttons

Render actionable list items as links or buttons to expose hover, active, and disabled states.

```twig
<div class="vstack gap-3">
    <twig:ListGroup tag="div">
        <twig:ListGroup:Item href="#" active>The current link item</twig:ListGroup:Item>
        <twig:ListGroup:Item href="#">A second link item</twig:ListGroup:Item>
        <twig:ListGroup:Item href="#">A third link item</twig:ListGroup:Item>
        <twig:ListGroup:Item href="#">A fourth link item</twig:ListGroup:Item>
        <twig:ListGroup:Item href="#" disabled>A disabled link item</twig:ListGroup:Item>
    </twig:ListGroup>

    <twig:ListGroup tag="div">
        <twig:ListGroup:Item tag="button" active>The current button</twig:ListGroup:Item>
        <twig:ListGroup:Item tag="button">A second button item</twig:ListGroup:Item>
        <twig:ListGroup:Item tag="button">A third button item</twig:ListGroup:Item>
        <twig:ListGroup:Item tag="button">A fourth button item</twig:ListGroup:Item>
        <twig:ListGroup:Item tag="button" disabled>A disabled button item</twig:ListGroup:Item>
    </twig:ListGroup>
</div>
```

### Flush

Remove outer borders and rounded corners for edge-to-edge rendering inside a parent container.

```twig
<twig:ListGroup flush>
    <twig:ListGroup:Item>An item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A second item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A third item</twig:ListGroup:Item>
    <twig:ListGroup:Item>A fourth item</twig:ListGroup:Item>
    <twig:ListGroup:Item>And a fifth one</twig:ListGroup:Item>
</twig:ListGroup>
```

### Numbered

Generate item numbers with Bootstrap's CSS counters, including for items with custom content.

```twig
<div class="vstack gap-3">
    <twig:ListGroup numbered>
        <twig:ListGroup:Item>A list item</twig:ListGroup:Item>
        <twig:ListGroup:Item>A list item</twig:ListGroup:Item>
        <twig:ListGroup:Item>A list item</twig:ListGroup:Item>
    </twig:ListGroup>

    <twig:ListGroup numbered>
        {% for item in 1..3 %}
            <twig:ListGroup:Item class="d-flex justify-content-between align-items-start">
                <div class="ms-2 me-auto">
                    <div class="fw-bold">Subheading</div>
                    Content for list item
                </div>
                <span class="badge text-bg-primary rounded-pill">14</span>
            </twig:ListGroup:Item>
        {% endfor %}
    </twig:ListGroup>
</div>
```

### Horizontal

Display items horizontally at every breakpoint or from a selected responsive breakpoint.

```twig
<div class="vstack gap-2">
    {% for breakpoint in [true, 'sm', 'md', 'lg', 'xl', 'xxl'] %}
        <twig:ListGroup :horizontal="breakpoint">
            <twig:ListGroup:Item>An item</twig:ListGroup:Item>
            <twig:ListGroup:Item>A second item</twig:ListGroup:Item>
            <twig:ListGroup:Item>A third item</twig:ListGroup:Item>
        </twig:ListGroup>
    {% endfor %}
</div>
```

### Variants

Apply contextual colors to non-actionable list items.

```twig
<twig:ListGroup>
    <twig:ListGroup:Item>A simple default list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="primary">A simple primary list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="secondary">A simple secondary list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="success">A simple success list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="danger">A simple danger list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="warning">A simple warning list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="info">A simple info list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="light">A simple light list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item color="dark">A simple dark list group item</twig:ListGroup:Item>
</twig:ListGroup>
```

### Action variants

Combine contextual colors with actionable links and their hover and active states.

```twig
<twig:ListGroup tag="div">
    <twig:ListGroup:Item href="#">A simple default list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="primary">A simple primary list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="secondary">A simple secondary list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="success">A simple success list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="danger">A simple danger list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="warning">A simple warning list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="info">A simple info list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="light">A simple light list group item</twig:ListGroup:Item>
    <twig:ListGroup:Item href="#" color="dark">A simple dark list group item</twig:ListGroup:Item>
</twig:ListGroup>
```

### With badges

Add badges to communicate counts or activity alongside an item label.

```twig
<twig:ListGroup>
    <twig:ListGroup:Item class="d-flex justify-content-between align-items-center">
        A list item
        <span class="badge text-bg-primary rounded-pill">14</span>
    </twig:ListGroup:Item>
    <twig:ListGroup:Item class="d-flex justify-content-between align-items-center">
        A second list item
        <span class="badge text-bg-primary rounded-pill">2</span>
    </twig:ListGroup:Item>
    <twig:ListGroup:Item class="d-flex justify-content-between align-items-center">
        A third list item
        <span class="badge text-bg-primary rounded-pill">1</span>
    </twig:ListGroup:Item>
</twig:ListGroup>
```

### Custom content

Compose headings, supporting text, metadata, and other HTML within actionable items.

```twig
<twig:ListGroup tag="div">
    <twig:ListGroup:Item href="#" active>
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small>And some small print.</small>
    </twig:ListGroup:Item>
    {% for item in 1..2 %}
        <twig:ListGroup:Item href="#">
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small class="text-body-secondary">3 days ago</small>
            </div>
            <p class="mb-1">Some placeholder content in a paragraph.</p>
            <small class="text-body-secondary">And some muted small print.</small>
        </twig:ListGroup:Item>
    {% endfor %}
</twig:ListGroup>
```

### Checkboxes and radios

Place labeled form controls inside list items, with an optional stretched label for a larger click target.

```twig
<div class="vstack gap-3">
    <twig:ListGroup>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="firstCheckbox">
            <label class="form-check-label" for="firstCheckbox">First checkbox</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="secondCheckbox">
            <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="thirdCheckbox">
            <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
        </twig:ListGroup:Item>
    </twig:ListGroup>

    <twig:ListGroup>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="firstRadio" checked>
            <label class="form-check-label" for="firstRadio">First radio</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="secondRadio">
            <label class="form-check-label" for="secondRadio">Second radio</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="thirdRadio">
            <label class="form-check-label" for="thirdRadio">Third radio</label>
        </twig:ListGroup:Item>
    </twig:ListGroup>

    <twig:ListGroup>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="firstCheckboxStretched">
            <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="secondCheckboxStretched">
            <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
        </twig:ListGroup:Item>
        <twig:ListGroup:Item>
            <input class="form-check-input me-1" type="checkbox" id="thirdCheckboxStretched">
            <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
        </twig:ListGroup:Item>
    </twig:ListGroup>
</div>
```

### JavaScript behavior

Use Bootstrap's tab plugin and data attributes to connect list items with tab panels.

```twig
<div class="row">
    <div class="col-4">
        <twig:ListGroup tag="div" id="list-tab" role="tablist">
            <twig:ListGroup:Item
                href="#list-home"
                id="list-home-list"
                role="tab"
                data-bs-toggle="list"
                aria-controls="list-home"
                :current="false"
                active
            >Home</twig:ListGroup:Item>
            <twig:ListGroup:Item
                href="#list-profile"
                id="list-profile-list"
                role="tab"
                data-bs-toggle="list"
                aria-controls="list-profile"
            >Profile</twig:ListGroup:Item>
            <twig:ListGroup:Item
                href="#list-messages"
                id="list-messages-list"
                role="tab"
                data-bs-toggle="list"
                aria-controls="list-messages"
            >Messages</twig:ListGroup:Item>
            <twig:ListGroup:Item
                href="#list-settings"
                id="list-settings-list"
                role="tab"
                data-bs-toggle="list"
                aria-controls="list-settings"
            >Settings</twig:ListGroup:Item>
        </twig:ListGroup>
    </div>
    <div class="col-8">
        <div class="tab-content" id="list-tab-content">
            <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list" tabindex="0">
                Some placeholder content relating to Home.
            </div>
            <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list" tabindex="0">
                Some placeholder content relating to Profile.
            </div>
            <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list" tabindex="0">
                Some placeholder content relating to Messages.
            </div>
            <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list" tabindex="0">
                Some placeholder content relating to Settings.
            </div>
        </div>
    </div>
</div>
```

## API Reference

### `<twig:ListGroup>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'ul'\|'ol'\|'div'\|null` | `null` | The HTML element to render. |
| `flush` | `boolean` | `false` | Whether to remove outer borders and rounded corners. |
| `numbered` | `boolean` | `false` | Whether to display CSS-generated item numbers. |
| `horizontal` | `boolean\|'sm'\|'md'\|'lg'\|'xl'\|'xxl'` | `false` | Whether and when to use a horizontal layout. |

| Block | Description |
|:------|:------------|
| `content` | The list group items. |
### `<twig:ListGroup:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'li'\|'a'\|'button'\|null` | `null` | The HTML element to render. |
| `href` | `string\|null` | `null` | The destination used for anchor items. |
| `type` | `'button'\|'submit'\|'reset'` | `'button'` | The type used for button items. |
| `active` | `boolean` | `false` | Whether the item represents the current selection. |
| `current` | `boolean\|string\|null` | `null` | Whether and how to expose an active item as current. |
| `disabled` | `boolean` | `false` | Whether the actionable item is disabled. |
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'\|null` | `null` | The Bootstrap contextual color. |
| `label` | `string` | `''` | The fallback label when no content block is provided. |

| Block | Description |
|:------|:------------|
| `content` | The item content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/modal.md">
# Modal

Add accessible dialog overlays for notifications, forms, and custom content.

```twig
<div style="min-height: 204px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demo-modal">
        Review changes
    </button>

    <twig:Modal id="demo-modal" centered>
        <twig:Modal:Header>
            <twig:Modal:Title>Review changes</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <p>Your profile information is ready to be saved.</p>
            <p class="mb-0 text-body-secondary">You can return to editing or confirm these changes now.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

## Installation

```shell
php bin/console ux:install modal --kit bootstrap
```
## Usage

```twig
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#usage-modal">
    Open modal
</button>

<twig:Modal id="usage-modal">
    <twig:Modal:Header>
        <twig:Modal:Title>Modal title</twig:Modal:Title>
    </twig:Modal:Header>
    <twig:Modal:Body>Modal body content goes here.</twig:Modal:Body>
    <twig:Modal:Footer>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </twig:Modal:Footer>
</twig:Modal>
```

## Accessibility

Include a `Modal:Title` so the root modal's `aria-labelledby` points to a real heading. A modal represents a separate document context, so an `h1` is usually appropriate; use the `tag` prop when the surrounding hierarchy requires another level.

Bootstrap adds the dialog role and manages focus while the modal is open. The HTML `autofocus` attribute does not focus controls inside a modal; listen for `shown.bs.modal` when an initial focus target is required. Do not nest modals, and always provide an explicit dismiss action.

## Examples

### Modal components

Display the complete modal structure statically when composing or reviewing its content.

```twig
<div style="min-height: 354px">
    <twig:Modal id="static-modal" :fade="false" class="position-static d-block" aria-hidden="false">
        <twig:Modal:Header>
            <twig:Modal:Title tag="h5">Modal title</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <p>Modal body text goes here.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Live demo

Open and dismiss a standard animated modal through Bootstrap data attributes.

```twig
<div style="min-height: 204px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#live-demo-modal">
        Launch demo modal
    </button>

    <twig:Modal id="live-demo-modal">
        <twig:Modal:Header>
            <twig:Modal:Title>Modal title</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <p>Woo-hoo, you're reading this text in a modal!</p>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Static backdrop

Prevent backdrop clicks and Escape from dismissing a modal that requires an explicit choice.

```twig
<div style="min-height: 204px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#static-backdrop-modal">
        Launch static backdrop modal
    </button>

    <twig:Modal id="static-backdrop-modal" backdrop="static" :keyboard="false">
        <twig:Modal:Header>
            <twig:Modal:Title>Modal title</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <p>I will not close if you click outside of me or press Escape.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Scrolling long content

Let the viewport scroll with a long modal or constrain scrolling to the modal body.

```twig
<div style="min-height: 204px">
    <div class="d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#long-content-modal">Launch long modal</button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollable-modal">Launch scrollable modal</button>
    </div>

    <twig:Modal id="long-content-modal">
        <twig:Modal:Header><twig:Modal:Title>Long modal</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>
            <p>This modal grows with its content, allowing the viewport to scroll.</p>
            <div style="min-height: 900px;"></div>
            <p class="mb-0">This content appears at the bottom.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>

    <twig:Modal id="scrollable-modal" scrollable>
        <twig:Modal:Header><twig:Modal:Title>Scrollable modal</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>
            <p>Only this modal body scrolls when its content exceeds the available height.</p>
            <div style="min-height: 900px;"></div>
            <p class="mb-0">This content appears at the bottom.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Vertically centered

Center the dialog vertically, with or without an independently scrollable body.

```twig
<div style="min-height: 204px">
    <div class="d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centered-modal">Vertically centered modal</button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centered-scrollable-modal">Centered scrollable modal</button>
    </div>

    <twig:Modal id="centered-modal" centered>
        <twig:Modal:Header><twig:Modal:Title>Modal title</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>This is a vertically centered modal.</twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>

    <twig:Modal id="centered-scrollable-modal" centered scrollable>
        <twig:Modal:Header><twig:Modal:Title>Modal title</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>
            <p>This modal combines vertical centering with an independently scrollable body.</p>
            <div style="min-height: 900px;"></div>
            <p class="mb-0">Just like that.</p>
        </twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Tooltips and popovers

Place supplementary Bootstrap overlays inside a modal. Bootstrap dismisses them automatically when the modal closes.

```twig
<div style="min-height: 304px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-with-overlays">
        Launch demo modal
    </button>

    <twig:Modal id="modal-with-overlays">
        <twig:Modal:Header>
            <twig:Modal:Title>Modal title</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <h2 class="fs-5">Popover in a modal</h2>
            <p>
                This
                <twig:Popover title="Popover title" content="Popover body content is set in this attribute.">
                    <button class="btn btn-secondary" type="button" {{ html_attr(popover_trigger_attrs) }}>button</button>
                </twig:Popover>
                triggers a popover on click.
            </p>
            <hr>
            <h2 class="fs-5">Tooltips in a modal</h2>
            <p>
                <twig:Tooltip title="Tooltip"><a href="#" {{ html_attr(tooltip_trigger_attrs) }}>This link</a></twig:Tooltip>
                and
                <twig:Tooltip title="Tooltip"><a href="#" {{ html_attr(tooltip_trigger_attrs) }}>that link</a></twig:Tooltip>
                have tooltips on hover.
            </p>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Using the grid

Nest Bootstrap's responsive grid inside the modal body.

```twig
<div style="min-height: 544px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#grid-modal">
        Launch grid modal
    </button>

    <twig:Modal id="grid-modal" size="lg">
        <twig:Modal:Header><twig:Modal:Title>Grids in modals</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>
            <div class="container-fluid text-center">
                <div class="row mb-3">
                    <div class="col-md-4 border py-2">.col-md-4</div>
                    <div class="col-md-4 ms-auto border py-2">.col-md-4 .ms-auto</div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3 ms-auto border py-2">.col-md-3 .ms-auto</div>
                    <div class="col-md-2 ms-auto border py-2">.col-md-2 .ms-auto</div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6 ms-auto border py-2">.col-md-6 .ms-auto</div>
                </div>
                <div class="row">
                    <div class="col-sm-9 border py-2">
                        Level 1: .col-sm-9
                        <div class="row mt-2">
                            <div class="col-8 col-sm-6 border py-2">Level 2: .col-8 .col-sm-6</div>
                            <div class="col-4 col-sm-6 border py-2">Level 2: .col-4 .col-sm-6</div>
                        </div>
                    </div>
                </div>
            </div>
        </twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Varying modal content

Read data attributes from the triggering button to update a shared modal before it is displayed.

```twig
<div style="min-height: 354px">
    <div class="d-flex flex-wrap gap-2">
        {% for recipient in ['@mdo', '@fat', '@getbootstrap'] %}
            <button
                type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#varying-content-modal"
                data-bs-recipient="{{ recipient }}"
            >Open modal for {{ recipient }}</button>
        {% endfor %}
    </div>

    <twig:Modal id="varying-content-modal">
        <twig:Modal:Header>
            <twig:Modal:Title>New message</twig:Modal:Title>
        </twig:Modal:Header>
        <twig:Modal:Body>
            <form>
                <div class="mb-3">
                    <label for="recipient-name" class="col-form-label">Recipient:</label>
                    <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="mb-3">
                    <label for="message-text" class="col-form-label">Message:</label>
                    <textarea class="form-control" id="message-text"></textarea>
                </div>
            </form>
        </twig:Modal:Body>
        <twig:Modal:Footer>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
        </twig:Modal:Footer>
    </twig:Modal>

    <script type="module">
        const modal = document.querySelector('#varying-content-modal');

        modal.addEventListener('show.bs.modal', (event) => {
            const recipient = event.relatedTarget.getAttribute('data-bs-recipient');
            modal.querySelector('.modal-title').textContent = `New message to ${recipient}`;
            modal.querySelector('#recipient-name').value = recipient;
        });
    </script>
</div>
```

### Toggle between modals

Switch between two modals without displaying them at the same time.

```twig
<div style="min-height: 204px">
    <button class="btn btn-primary" data-bs-target="#first-toggle-modal" data-bs-toggle="modal">Open first modal</button>

    <twig:Modal id="first-toggle-modal" centered>
        <twig:Modal:Header><twig:Modal:Title>Modal 1</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>Show a second modal and hide this one with the button below.</twig:Modal:Body>
        <twig:Modal:Footer>
            <button class="btn btn-primary" data-bs-target="#second-toggle-modal" data-bs-toggle="modal">Open second modal</button>
        </twig:Modal:Footer>
    </twig:Modal>

    <twig:Modal id="second-toggle-modal" centered>
        <twig:Modal:Header><twig:Modal:Title>Modal 2</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>Hide this modal and show the first with the button below.</twig:Modal:Body>
        <twig:Modal:Footer>
            <button class="btn btn-primary" data-bs-target="#first-toggle-modal" data-bs-toggle="modal">Back to first</button>
        </twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Remove animation

Disable the fade transition when the modal should appear immediately.

```twig
<div style="min-height: 204px">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#no-animation-modal">
        Open without animation
    </button>

    <twig:Modal id="no-animation-modal" :fade="false">
        <twig:Modal:Header><twig:Modal:Title>Modal without animation</twig:Modal:Title></twig:Modal:Header>
        <twig:Modal:Body>This modal appears immediately because the <code>.fade</code> class is omitted.</twig:Modal:Body>
        <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
    </twig:Modal>
</div>
```

### Optional sizes

Choose Bootstrap's small, large, or extra-large modal widths.

```twig
<div style="min-height: 204px">
    <div class="d-flex flex-wrap gap-2">
        {% for size, label in {xl: 'Extra large', lg: 'Large', sm: 'Small'} %}
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#size-{{ size }}-modal">{{ label }} modal</button>
        {% endfor %}
    </div>

    {% for size, label in {xl: 'Extra large', lg: 'Large', sm: 'Small'} %}
        <twig:Modal id="size-{{ size }}-modal" size="{{ size }}">
            <twig:Modal:Header><twig:Modal:Title>{{ label }} modal</twig:Modal:Title></twig:Modal:Header>
            <twig:Modal:Body>Modal content at the <code>{{ size }}</code> size.</twig:Modal:Body>
            <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
        </twig:Modal>
    {% endfor %}
</div>
```

### Fullscreen modal

Fill the viewport at every size or only below a selected breakpoint.

```twig
{% set variants = {
    always: ['Full screen', true],
    sm: ['Full screen below sm', 'sm'],
    md: ['Full screen below md', 'md'],
    lg: ['Full screen below lg', 'lg'],
    xl: ['Full screen below xl', 'xl'],
    xxl: ['Full screen below xxl', 'xxl'],
} %}

<div style="min-height: 204px">
    <div class="d-flex flex-wrap gap-2">
        {% for key, variant in variants %}
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreen-{{ key }}-modal">{{ variant[0] }}</button>
        {% endfor %}
    </div>

    {% for key, variant in variants %}
        <twig:Modal id="fullscreen-{{ key }}-modal" fullscreen="{{ variant[1] }}">
            <twig:Modal:Header><twig:Modal:Title>{{ variant[0] }}</twig:Modal:Title></twig:Modal:Header>
            <twig:Modal:Body>Responsive fullscreen modal content.</twig:Modal:Body>
            <twig:Modal:Footer><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></twig:Modal:Footer>
        </twig:Modal>
    {% endfor %}
</div>
```

## API Reference

### `<twig:Modal>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier targeted by modal controls. |
| `size` | `'sm'\|'lg'\|'xl'\|null` | `null` | The optional maximum width of the modal dialog. |
| `centered` | `boolean` | `false` | Whether to vertically center the modal dialog. |
| `scrollable` | `boolean` | `false` | Whether only the modal body scrolls when content overflows. |
| `fullscreen` | `boolean\|'sm'\|'md'\|'lg'\|'xl'\|'xxl'` | `false` | Whether and below which breakpoint the modal fills the viewport. |
| `backdrop` | `boolean\|'static'` | `true` | Whether clicking the backdrop dismisses the modal. |
| `keyboard` | `boolean` | `true` | Whether pressing Escape dismisses the modal. |
| `fade` | `boolean` | `true` | Whether to use Bootstrap's fade transition. |

| Block | Description |
|:------|:------------|
| `content` | The modal structure, typically `Modal:Header`, `Modal:Body`, and `Modal:Footer`. |
### `<twig:Modal:Body>`

| Block | Description |
|:------|:------------|
| `content` | The main content of the modal. |
### `<twig:Modal:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The modal actions and supplementary content. |
### `<twig:Modal:Header>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `closable` | `boolean` | `true` | Whether to render a dismiss button. |
| `closeLabel` | `string` | - | The accessible label of the dismiss button. |

| Block | Description |
|:------|:------------|
| `content` | The modal heading, typically a `Modal:Title` component. |
### `<twig:Modal:Title>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'h1'` | The heading element to render. |

| Block | Description |
|:------|:------------|
| `content` | The modal title. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/navbar.md">
# Navbar

A powerful, responsive navigation header with support for branding, navigation, forms, and collapsing content.

```twig
<div class="align-self-start w-100">
    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDemo" aria-controls="navbarDemo" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarDemo">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </twig:Navbar>
</div>
```

## Installation

```shell
php bin/console ux:install navbar --kit bootstrap
```
## Usage

```twig
<twig:Navbar>
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
    </div>
</twig:Navbar>
```

## Accessibility

The component renders a native `nav` landmark. When a page contains multiple navigation landmarks, give each one a distinct accessible name with the `label` prop or an `aria-labelledby` attribute.

Mark the active link with `aria-current="page"`. Every toggler must expose `aria-controls`, `aria-expanded`, and a meaningful accessible label. When external content opens before its toggler in the document, move focus programmatically when needed.

## Examples

### Supported content

Compose branding, navigation, dropdowns, forms, togglers, and collapsing content inside one responsive navbar.

```twig
<div class="align-self-start w-100">
    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </twig:Navbar>
</div>
```

### Brand

Use text, headings, images, or image-and-text combinations for the navbar brand.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar>
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
        </div>
    </twig:Navbar>

    <twig:Navbar>
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">Navbar</span>
        </div>
    </twig:Navbar>

    <twig:Navbar>
        <div class="container">
            <a class="navbar-brand" href="#" aria-label="Bootstrap">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118 94" width="30" height="24" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor" />
                </svg>
            </a>
        </div>
    </twig:Navbar>

    <twig:Navbar>
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118 94" width="30" height="24" class="d-inline-block align-text-top" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor" />
                </svg>
                Bootstrap
            </a>
        </div>
    </twig:Navbar>
</div>
```

### Nav

Build navigation from lists, direct links, or dropdown items, and mark the current page explicitly.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Pricing</a>
                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                </div>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </twig:Navbar>
</div>
```

### Forms

Place search forms, input groups, and button groups inside navbars.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar>
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </twig:Navbar>

    <twig:Navbar>
        <div class="container-fluid">
            <a class="navbar-brand">Navbar</a>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </twig:Navbar>

    <twig:Navbar>
        <form class="container-fluid">
            <div class="input-group">
                <span class="input-group-text" id="basic-addon1">@</span>
                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
            </div>
        </form>
    </twig:Navbar>

    <twig:Navbar>
        <form class="container-fluid justify-content-start">
            <button class="btn btn-outline-success me-2" type="button">Main button</button>
            <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
        </form>
    </twig:Navbar>
</div>
```

### Text

Use `navbar-text` for vertically aligned text alongside navigation content.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar>
        <div class="container-fluid">
            <span class="navbar-text">Navbar text with an inline element</span>
        </div>
    </twig:Navbar>

    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar w/ text</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                </ul>
                <span class="navbar-text">Navbar text with an inline element</span>
            </div>
        </div>
    </twig:Navbar>
</div>
```

### Color schemes

Use `data-bs-theme` through the `theme` prop and combine it with background utilities or custom colors.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar background="dark" theme="dark" class="border-bottom border-body">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="navbar-nav flex-row gap-3">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Features</a>
                <a class="nav-link" href="#">Pricing</a>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar background="primary" theme="dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="navbar-nav flex-row gap-3">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Features</a>
                <a class="nav-link" href="#">Pricing</a>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar :background="null" theme="light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="navbar-nav flex-row gap-3">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Features</a>
                <a class="nav-link" href="#">Pricing</a>
            </div>
        </div>
    </twig:Navbar>
</div>
```

### Containers

Wrap a navbar in a container, or choose a responsive inner container to constrain its content.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <div class="container">
        <twig:Navbar expand="lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
            </div>
        </twig:Navbar>
    </div>

    <twig:Navbar expand="lg">
        <div class="container-md">
            <a class="navbar-brand" href="#">Navbar</a>
        </div>
    </twig:Navbar>
</div>
```

### Default placement

Keep the navbar in the normal document flow.

```twig
<twig:Navbar class="w-100">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Default</a>
    </div>
</twig:Navbar>
```

### Fixed top

Fix the navbar to the top of the viewport and account for the removed document-flow space.

```twig
<twig:Navbar class="fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Fixed top</a>
    </div>
</twig:Navbar>
```

### Fixed bottom

Fix the navbar to the bottom of the viewport.

```twig
<twig:Navbar class="fixed-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Fixed bottom</a>
    </div>
</twig:Navbar>
```

### Sticky top

Keep the navbar at the top after it reaches that edge while scrolling.

```twig
<twig:Navbar class="sticky-top w-100">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Sticky top</a>
    </div>
</twig:Navbar>
```

### Sticky bottom

Keep the navbar at the bottom after it reaches that edge while scrolling.

```twig
<twig:Navbar class="sticky-bottom w-100">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Sticky bottom</a>
    </div>
</twig:Navbar>
```

### Scrolling

Limit collapsed navigation height with `navbar-nav-scroll` and `--bs-scroll-height`.

```twig
<twig:Navbar expand="lg" class="w-100">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar scroll</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Link</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Link</a></li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</twig:Navbar>
```

### Toggler

Place the responsive toggler before or after the brand to control its alignment.

```twig
<div class="d-flex flex-column gap-3 w-100">
    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand" href="#">Hidden brand</a>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
                <form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
                <form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form>
            </div>
        </div>
    </twig:Navbar>

    <twig:Navbar expand="lg">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
                </ul>
                <form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form>
            </div>
        </div>
    </twig:Navbar>
</div>
```

### External content

Target collapsible content that sits outside the navbar while keeping the ARIA relationship explicit.

```twig
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
    <div class="bg-dark p-4">
        <h5 class="text-body-emphasis h4">Collapsed content</h5>
        <span class="text-body-secondary">Toggleable via the navbar brand.</span>
    </div>
</div>
<twig:Navbar background="dark" theme="dark" class="w-100">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</twig:Navbar>
```

### Offcanvas

Use an offcanvas drawer for a navbar that remains collapsed at every breakpoint.

```twig
<twig:Navbar class="fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="d-flex mt-3" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
</twig:Navbar>
```

### Responsive offcanvas

Expand the offcanvas navigation into a regular navbar at a selected breakpoint.

```twig
<twig:Navbar expand="lg" class="fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="navbarOffcanvasLgLabel">Navigation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                </ul>
            </div>
        </div>
    </div>
</twig:Navbar>
```

### Dark offcanvas

Keep the navbar, drawer, close button, and dropdown menu aligned with a dark theme.

```twig
<twig:Navbar background="dark" theme="dark" class="fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="d-flex mt-3" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
</twig:Navbar>
```

## API Reference

### `<twig:Navbar>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `expand` | `'always'\|'sm'\|'md'\|'lg'\|'xl'\|'xxl'\|null` | `null` | The breakpoint at which the navbar expands. |
| `background` | `string\|null` | `'body-tertiary'` | The Bootstrap background utility suffix. |
| `theme` | `'light'\|'dark'\|null` | `null` | The component-specific Bootstrap color mode. |
| `label` | `string\|null` | `null` | The accessible name for the navigation landmark. |

| Block | Description |
|:------|:------------|
| `content` | The navbar brand, navigation, forms, togglers, and collapsible content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/navs-tabs.md">
# Navs and Tabs

Build navigation components and accessible dynamic tabbed interfaces with Bootstrap.

```twig
<div>
    <twig:Nav type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-home-tab" target="#demo-home" active>Home</twig:Nav:Link>
        </twig:Nav:Item>
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-profile-tab" target="#demo-profile">Profile</twig:Nav:Link>
        </twig:Nav:Item>
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-contact-tab" target="#demo-contact">Contact</twig:Nav:Link>
        </twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="demo-home" labelledBy="demo-home-tab" active fade>Home tab content.</twig:TabPane>
        <twig:TabPane id="demo-profile" labelledBy="demo-profile-tab" fade>Profile tab content.</twig:TabPane>
        <twig:TabPane id="demo-contact" labelledBy="demo-contact-tab" fade>Contact tab content.</twig:TabPane>
    </twig:TabContent>
</div>
```

## Installation

```shell
php bin/console ux:install navs-tabs --kit bootstrap
```
## Usage

```twig
<twig:Nav>
    <twig:Nav:Item>
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
    </twig:Nav:Item>
    <twig:Nav:Item>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
    </twig:Nav:Item>
    <twig:Nav:Item>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav:Item>
</twig:Nav>
<twig:TabContent>
    <twig:TabPane id="demo-home" labelledBy="demo-home-tab" active fade>
        Home tab content.
    </twig:TabPane>
    <twig:TabPane id="demo-profile" labelledBy="demo-profile-tab" fade>
        Profile tab content.
    </twig:TabPane>
    <twig:TabPane id="demo-contact" labelledBy="demo-contact-tab" fade>
        Contact tab content.
    </twig:TabPane>
</twig:TabContent>
```

## Accessibility

Use `aria-current="page"` for active navigation links. Dynamic tab interfaces instead need `role="tablist"`, `role="tab"`, `role="tabpanel"`, and the `aria-selected`, `aria-controls`, and `aria-labelledby` relationships shown in the examples.

Prefer buttons for dynamic tabs. Do not put `role="tablist"` directly on a `nav` landmark; place it on a nested `div` instead. Vertical tab lists also need `aria-orientation="vertical"`.

## Examples

### Base nav

Build navigation with list markup or direct links inside a `nav` element.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Nav>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" aria-label="Primary navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>
```

### Horizontal alignment

Align navigation items with Bootstrap flexbox utilities through the `align` prop.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Nav align="center">
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav align="end">
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
</div>
```

### Vertical

Stack navigation links vertically with list or landmark markup.

```twig
<div class="d-flex gap-5">
    <twig:Nav vertical>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" vertical aria-label="Secondary navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>
```

### Tabs

Apply the static tab appearance to navigation links.

```twig
<twig:Nav type="tabs">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
```

### Pills

Render active navigation links with Bootstrap's pill style.

```twig
<twig:Nav type="pills">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
```

### Underline

Use the underline style introduced in Bootstrap 5.3.

```twig
<twig:Nav type="underline">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
```

### Fill and justify

Fill the available width proportionally or give every navigation item the same width.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Nav type="pills" fill>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Much longer nav link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" type="pills" justified aria-label="Equal width navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Much longer nav link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>
```

### Responsive flex

Combine the component with responsive flex utilities for breakpoint-specific layouts.

```twig
<twig:Nav tag="nav" type="pills" class="flex-column flex-sm-row" aria-label="Responsive navigation">
    <twig:Nav:Link href="#" active class="flex-sm-fill text-sm-center">Active</twig:Nav:Link>
    <twig:Nav:Link href="#" class="flex-sm-fill text-sm-center">Longer nav link</twig:Nav:Link>
    <twig:Nav:Link href="#" class="flex-sm-fill text-sm-center">Link</twig:Nav:Link>
    <twig:Nav:Link disabled class="flex-sm-fill text-sm-center">Disabled</twig:Nav:Link>
</twig:Nav>
```

### Tabs with dropdowns

Add a Bootstrap dropdown to a static tabs navigation.

```twig
<twig:Nav type="tabs">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item class="dropdown">
        <twig:Nav:Link href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</twig:Nav:Link>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
```

### Pills with dropdowns

Add a Bootstrap dropdown to a static pills navigation.

```twig
<twig:Nav type="pills">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item class="dropdown">
        <twig:Nav:Link href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</twig:Nav:Link>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
```

### JavaScript tabs

Connect tab buttons to focusable content panels with Bootstrap's Tab plugin.

```twig
<twig:Nav type="tabs" role="tablist" class="mb-3">
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="home-tab" target="#home-tab-pane" active>Home</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="profile-tab" target="#profile-tab-pane">Profile</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="contact-tab" target="#contact-tab-pane">Contact</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="disabled-tab" target="#disabled-tab-pane" disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
<twig:TabContent>
    <twig:TabPane id="home-tab-pane" labelledBy="home-tab" active fade>This is the Home tab content.</twig:TabPane>
    <twig:TabPane id="profile-tab-pane" labelledBy="profile-tab" fade>This is the Profile tab content.</twig:TabPane>
    <twig:TabPane id="contact-tab-pane" labelledBy="contact-tab" fade>This is the Contact tab content.</twig:TabPane>
    <twig:TabPane id="disabled-tab-pane" labelledBy="disabled-tab" fade>This tab is disabled.</twig:TabPane>
</twig:TabContent>
```

### JavaScript nav

Keep the navigation landmark while placing `role="tablist"` on a nested container.

```twig
<nav aria-label="Account sections">
    <twig:Nav tag="div" type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Link tag="button" id="nav-home-tab" target="#nav-home" active>Home</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-profile-tab" target="#nav-profile">Profile</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-contact-tab" target="#nav-contact">Contact</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-disabled-tab" target="#nav-disabled" disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</nav>
<twig:TabContent>
    <twig:TabPane id="nav-home" labelledBy="nav-home-tab" active fade>This is the Home tab content.</twig:TabPane>
    <twig:TabPane id="nav-profile" labelledBy="nav-profile-tab" fade>This is the Profile tab content.</twig:TabPane>
    <twig:TabPane id="nav-contact" labelledBy="nav-contact-tab" fade>This is the Contact tab content.</twig:TabPane>
    <twig:TabPane id="nav-disabled" labelledBy="nav-disabled-tab" fade>This tab is disabled.</twig:TabPane>
</twig:TabContent>
```

### JavaScript pills

Use the same dynamic tab semantics with Bootstrap's pill appearance.

```twig
<div>
    <twig:Nav type="pills" role="tablist" class="mb-3">
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-home-tab" target="#pills-home" toggle="pill" active>Home</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-profile-tab" target="#pills-profile" toggle="pill">Profile</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-contact-tab" target="#pills-contact" toggle="pill">Contact</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-disabled-tab" target="#pills-disabled" toggle="pill" disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="pills-home" labelledBy="pills-home-tab" active fade>This is the Home pill content.</twig:TabPane>
        <twig:TabPane id="pills-profile" labelledBy="pills-profile-tab" fade>This is the Profile pill content.</twig:TabPane>
        <twig:TabPane id="pills-contact" labelledBy="pills-contact-tab" fade>This is the Contact pill content.</twig:TabPane>
        <twig:TabPane id="pills-disabled" labelledBy="pills-disabled-tab" fade>This pill is disabled.</twig:TabPane>
    </twig:TabContent>
</div>
```

### Vertical pills

Build a vertical dynamic tab interface and expose its orientation to assistive technologies.

```twig
<div class="d-flex align-items-start">
    <twig:Nav tag="div" type="pills" vertical role="tablist" class="me-3" aria-orientation="vertical">
        <twig:Nav:Link tag="button" id="vertical-home-tab" target="#vertical-home" toggle="pill" active>Home</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-profile-tab" target="#vertical-profile" toggle="pill">Profile</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-disabled-tab" target="#vertical-disabled" toggle="pill" disabled>Disabled</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-messages-tab" target="#vertical-messages" toggle="pill">Messages</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-settings-tab" target="#vertical-settings" toggle="pill">Settings</twig:Nav:Link>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="vertical-home" labelledBy="vertical-home-tab" active fade>Home content.</twig:TabPane>
        <twig:TabPane id="vertical-profile" labelledBy="vertical-profile-tab" fade>Profile content.</twig:TabPane>
        <twig:TabPane id="vertical-disabled" labelledBy="vertical-disabled-tab" fade>Disabled content.</twig:TabPane>
        <twig:TabPane id="vertical-messages" labelledBy="vertical-messages-tab" fade>Messages content.</twig:TabPane>
        <twig:TabPane id="vertical-settings" labelledBy="vertical-settings-tab" fade>Settings content.</twig:TabPane>
    </twig:TabContent>
</div>
```

### Fade effect

Add Bootstrap's fade transition to tab panels. The initially active panel also receives `show`.

```twig
<div class="w-75">
    <twig:Nav type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="fade-home-tab" target="#fade-home" active>Home</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="fade-profile-tab" target="#fade-profile">Profile</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="fade-home" labelledBy="fade-home-tab" active fade>The active panel also receives the `show` class.</twig:TabPane>
        <twig:TabPane id="fade-profile" labelledBy="fade-profile-tab" fade>Inactive panels only receive the `fade` class.</twig:TabPane>
    </twig:TabContent>
</div>
```

## API Reference

### `<twig:Nav>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'ul'\|'nav'\|'div'` | `'ul'` | The HTML element used for the navigation container. |
| `type` | `'tabs'\|'pills'\|'underline'\|null` | `null` | The Bootstrap navigation style. |
| `fill` | `boolean` | `false` | Whether items proportionally fill the available width. |
| `justified` | `boolean` | `false` | Whether items use equal widths. |
| `vertical` | `boolean` | `false` | Whether items are stacked vertically. |
| `align` | `'start'\|'center'\|'end'\|null` | `null` | The horizontal alignment of the navigation items. |
| `role` | `string\|null` | `null` | The ARIA role applied to the navigation container. |

| Block | Description |
|:------|:------------|
| `content` | The navigation links or `Nav:Item` components. |
### `<twig:Nav:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `presentation` | `boolean` | `false` | Whether the item has the presentation role in a dynamic tab list. |

| Block | Description |
|:------|:------------|
| `content` | The navigation link, typically a `Nav:Link` component. |
### `<twig:Nav:Link>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'a'\|'button'` | `'a'` | The HTML element used for the navigation control. |
| `href` | `string\|null` | `'#'` | The destination used by anchor navigation links. |
| `id` | `string\|null` | `null` | The unique identifier of a dynamic tab control. |
| `target` | `string\|null` | `null` | The selector of the associated tab panel. |
| `toggle` | `'tab'\|'pill'\|null` | `null` | The Bootstrap JavaScript behavior. |
| `active` | `boolean` | `false` | Whether the navigation link or tab is active. |
| `disabled` | `boolean` | `false` | Whether the navigation link or tab is disabled. |
| `content` | `string` | `''` | The fallback label when no content block is provided. |

| Block | Description |
|:------|:------------|
| `content` | The navigation link or tab label. |
### `<twig:TabContent>`

| Block | Description |
|:------|:------------|
| `content` | The associated `TabPane` components. |
### `<twig:TabPane>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier targeted by a tab control. |
| `labelledBy` | `string\|null` | `null` | The identifier of the tab control labelling the panel. |
| `active` | `boolean` | `false` | Whether the panel is initially visible. |
| `fade` | `boolean` | `false` | Whether the panel uses Bootstrap's fade transition. |

| Block | Description |
|:------|:------------|
| `content` | The tab panel content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/offcanvas.md">
# Offcanvas

Build responsive sliding panels for navigation, forms, and supplementary content.

```twig
<div style="min-height: 124px">
    <div class="d-flex justify-content-center w-100">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo-offcanvas" aria-controls="demo-offcanvas">
            Launch demo offcanvas
        </button>

        <twig:Offcanvas id="demo-offcanvas">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Offcanvas</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>Content for the offcanvas goes here. You can place just about any Bootstrap component or custom element here.</p>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </div>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install offcanvas --kit bootstrap
```
## Usage

```twig
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#navigation-panel" aria-controls="navigation-panel">
    Open panel
</button>

<twig:Offcanvas id="navigation-panel">
    <twig:Offcanvas:Header>
        <twig:Offcanvas:Title>Navigation</twig:Offcanvas:Title>
    </twig:Offcanvas:Header>
    <twig:Offcanvas:Body>
        Add navigation links or any other content here.
    </twig:Offcanvas:Body>
</twig:Offcanvas>
```

## Accessibility

Every trigger must identify the panel with either `href` or `data-bs-target` and expose the same id through `aria-controls`. The offcanvas root derives its `aria-labelledby` from its `id`, and `Offcanvas:Title` automatically applies the matching id, so the panel is always correctly labelled.

Bootstrap adds the dialog role and manages focus when a non-responsive offcanvas opens. Keep a visible dismiss control in the header, use descriptive trigger text, and verify that responsive panels remain understandable when they become regular page content above their breakpoint.

## Examples

### Offcanvas components

Display the complete panel structure statically while composing its content.

```twig
<twig:Offcanvas id="static-offcanvas" shown class="position-static w-100">
    <twig:Offcanvas:Header>
        <twig:Offcanvas:Title>Offcanvas</twig:Offcanvas:Title>
    </twig:Offcanvas:Header>
    <twig:Offcanvas:Body>
        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom element here.
    </twig:Offcanvas:Body>
</twig:Offcanvas>
```

### Live demo

Open the same panel from either a link or a button.

```twig
<div style="min-height: 124px">
    <div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100">
        <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#live-offcanvas" role="button" aria-controls="live-offcanvas">Link with href</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#live-offcanvas" aria-controls="live-offcanvas">Button with data-bs-target</button>

        <twig:Offcanvas id="live-offcanvas">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Offcanvas</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>Content for the offcanvas goes here. You can place just about any Bootstrap component or custom element here.</p>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </div>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Body scrolling

Allow body scrolling without displaying a backdrop.

```twig
<div style="min-height: 84px">
    <div class="d-flex justify-content-center w-100">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#scrolling-offcanvas" aria-controls="scrolling-offcanvas">Enable body scrolling</button>

        <twig:Offcanvas id="scrolling-offcanvas" scroll :backdrop="false">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Offcanvas with body scrolling</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>Try scrolling the rest of the page while this offcanvas is open.</p>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Body scrolling and backdrop

Keep the body scrollable while retaining the backdrop.

```twig
<div style="min-height: 84px">
    <div class="d-flex justify-content-center w-100">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#scrolling-backdrop-offcanvas" aria-controls="scrolling-backdrop-offcanvas">Enable both scrolling and backdrop</button>

        <twig:Offcanvas id="scrolling-backdrop-offcanvas" scroll>
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Backdrop with scrolling</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>Try scrolling the rest of the page while this offcanvas is open.</p>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Static backdrop

Require an explicit dismiss action instead of closing on backdrop clicks.

```twig
<div style="min-height: 84px">
    <div class="d-flex justify-content-center w-100">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#static-backdrop-offcanvas" aria-controls="static-backdrop-offcanvas">Toggle static offcanvas</button>

        <twig:Offcanvas id="static-backdrop-offcanvas" backdrop="static">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Offcanvas</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>I will not close if you click outside of me.</p>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Dark offcanvas

Apply Bootstrap's dark color mode to the panel and its close button.

```twig
<div style="min-height: 84px">
    <div class="d-flex justify-content-center w-100">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#dark-offcanvas" aria-controls="dark-offcanvas">Toggle dark offcanvas</button>

        <twig:Offcanvas id="dark-offcanvas" theme="dark">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Dark offcanvas</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>Place offcanvas content here.</p>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Responsive

Turn an offcanvas panel into regular content at a selected breakpoint.

```twig
<div style="min-height: 284px">
    <div class="w-100">
        <button class="btn btn-primary d-block mx-auto d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#responsive-offcanvas" aria-controls="responsive-offcanvas">Toggle offcanvas</button>

        <twig:Offcanvas id="responsive-offcanvas" responsive="lg" placement="end">
            <twig:Offcanvas:Header>
                <twig:Offcanvas:Title>Responsive offcanvas</twig:Offcanvas:Title>
            </twig:Offcanvas:Header>
            <twig:Offcanvas:Body>
                <p>This is content within an <code>.offcanvas-lg</code>.</p>
            </twig:Offcanvas:Body>
        </twig:Offcanvas>
    </div>
</div>
```

### Placement

Open panels from any viewport edge.

```twig
<div style="min-height: 164px">
    <div class="d-flex flex-wrap justify-content-center align-items-start gap-2 w-100">
        {% for placement in ['start', 'end', 'top', 'bottom'] %}
            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-{{ placement }}" aria-controls="offcanvas-{{ placement }}">Toggle {{ placement }}</button>
            <twig:Offcanvas id="offcanvas-{{ placement }}" placement="{{ placement }}">
                <twig:Offcanvas:Header>
                    <twig:Offcanvas:Title>Offcanvas {{ placement }}</twig:Offcanvas:Title>
                </twig:Offcanvas:Header>
                <twig:Offcanvas:Body>
                    <p>Offcanvas content from the {{ placement }} edge.</p>
                </twig:Offcanvas:Body>
            </twig:Offcanvas>
        {% endfor %}
    </div>
</div>
```

## API Reference

### `<twig:Offcanvas>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | The unique identifier targeted by offcanvas controls. |
| `placement` | `'start'\|'end'\|'top'\|'bottom'` | `'start'` | The viewport edge from which the panel appears. |
| `responsive` | `'sm'\|'md'\|'lg'\|'xl'\|'xxl'\|null` | `null` | The breakpoint at which the panel becomes regular content. |
| `backdrop` | `boolean\|'static'` | `true` | Whether clicking the backdrop dismisses the panel. |
| `scroll` | `boolean` | `false` | Whether the page body remains scrollable while the panel is open. |
| `keyboard` | `boolean` | `true` | Whether pressing Escape dismisses the panel. |
| `shown` | `boolean` | `false` | Whether to display the panel statically. |
| `theme` | `'light'\|'dark'\|null` | `null` | The component-specific Bootstrap color mode. |

| Block | Description |
|:------|:------------|
| `content` | The offcanvas structure, typically `Offcanvas:Header` and `Offcanvas:Body`. |
### `<twig:Offcanvas:Body>`

| Block | Description |
|:------|:------------|
| `content` | The main content of the offcanvas. |
### `<twig:Offcanvas:Header>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `closable` | `boolean` | `true` | Whether to render a dismiss button. |
| `closeLabel` | `string` | - | The accessible label of the dismiss button. |

| Block | Description |
|:------|:------------|
| `content` | The offcanvas heading, typically an `Offcanvas:Title` component. |
### `<twig:Offcanvas:Title>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'h5'` | The heading element to render. |

| Block | Description |
|:------|:------------|
| `content` | The offcanvas title. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/pagination.md">
# Pagination

Indicate that related content is split across multiple pages with accessible pagination links.

```twig
<twig:Pagination ariaLabel="Article pages">
    <twig:Pagination:Item label="Previous" disabled />
    <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:Item href="?page=2" label="Next" />
</twig:Pagination>
```

## Installation

```shell
php bin/console ux:install pagination --kit bootstrap
```
## Usage

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

## Accessibility

Give each pagination landmark a descriptive `ariaLabel`, especially when a page contains more than one pagination control.

The active item exposes `aria-current="page"`. Disabled items render as non-interactive `span` elements instead of links.

## Examples

### Overview

Use connected page links to navigate through a series of related pages.

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

### Working with icons

When replacing previous and next labels with symbols, provide an accessible label and hide the symbol from assistive technologies.

```twig
<twig:Pagination ariaLabel="Page navigation example">
    <twig:Pagination:Item href="#" ariaLabel="Previous"><span aria-hidden="true">&laquo;</span></twig:Pagination:Item>
    <twig:Pagination:Item href="#" label="1" />
    <twig:Pagination:Item href="#" label="2" />
    <twig:Pagination:Item href="#" label="3" />
    <twig:Pagination:Item href="#" ariaLabel="Next"><span aria-hidden="true">&raquo;</span></twig:Pagination:Item>
</twig:Pagination>
```

### Active

Mark the page currently being viewed as active. It can remain a link or render as a non-interactive 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>
```

### Disabled

Disable unavailable navigation items without leaving an unusable link in the keyboard tab order.

```twig
<twig:Pagination ariaLabel="Article pages">
    <twig:Pagination:Item label="Previous" disabled />
    <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>
```

### Sizing

Use Bootstrap's large and small pagination sizes.

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

### Alignment

Align the pagination links with Bootstrap flexbox utilities through the `align` prop.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Pagination align="center" ariaLabel="Centered page navigation example">
        <twig:Pagination:Item label="Previous" disabled />
        <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>

    <twig:Pagination align="end" ariaLabel="End-aligned page navigation example">
        <twig:Pagination:Item label="Previous" disabled />
        <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>
</div>
```

## API Reference

### `<twig:Pagination>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'sm'\|'lg'\|null` | `null` | The pagination control size. |
| `align` | `'start'\|'center'\|'end'\|null` | `null` | The horizontal alignment of the pagination links. |
| `ariaLabel` | `string` | `'Pagination'` | The accessible name of the navigation landmark. |

| Block | Description |
|:------|:------------|
| `content` | The pagination items, typically `Pagination:Item` components. |
### `<twig:Pagination:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `active` | `boolean` | `false` | Whether the item represents the current page. |
| `disabled` | `boolean` | `false` | Whether the item is unavailable for interaction. |
| `href` | `string\|null` | `null` | The destination of the page link. |
| `label` | `string` | `''` | The fallback item label when no content block is provided. |
| `ariaLabel` | `string\|null` | `null` | The accessible label for the page link. |

| Block | Description |
|:------|:------------|
| `content` | The page link content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/placeholder.md">
# Placeholder

Uses loading placeholders to indicate that content may still be loading.

```twig
<div class="card" style="width: 18rem;" aria-busy="true">
    <svg class="card-img-top text-secondary bg-body-secondary" width="100%" height="140" role="img" aria-label="Loading image placeholder">
        <rect width="100%" height="100%" fill="currentColor" />
    </svg>
    <div class="card-body">
        <twig:Placeholder:Animation animation="glow" tag="h5" class="card-title">
            <twig:Placeholder class="col-6" />
        </twig:Placeholder:Animation>
        <twig:Placeholder:Animation animation="glow" tag="p" class="card-text">
            <twig:Placeholder class="col-7" />
            <twig:Placeholder class="col-4" />
            <twig:Placeholder class="col-4" />
            <twig:Placeholder class="col-6" />
            <twig:Placeholder class="col-8" />
        </twig:Placeholder:Animation>
        <twig:Placeholder tag="a" class="btn btn-primary disabled col-6" aria-disabled="true" />
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install placeholder --kit bootstrap
```
## Usage

```twig
<twig:Placeholder class="col-6" />
```

## Accessibility

Placeholders are decorative and hidden from assistive technologies. Mark the loading region with `aria-busy="true"`, then announce meaningful content changes when loading completes.

The application remains responsible for replacing placeholders and informing users when the updated content is available.

## Examples

Match a placeholder card's proportions to the content it temporarily replaces.

```twig
<div class="row g-3">
    <div class="col-md-6">
        <div class="card h-100">
            <svg class="card-img-top text-secondary bg-body-secondary" width="100%" height="140" role="img" aria-label="Example image placeholder">
                <rect width="100%" height="100%" fill="currentColor" />
            </svg>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card h-100" aria-hidden="true">
            <svg class="card-img-top text-secondary bg-body-secondary" width="100%" height="140">
                <rect width="100%" height="100%" fill="currentColor" />
            </svg>
            <div class="card-body">
                <twig:Placeholder:Animation animation="glow" tag="h5" class="card-title">
                    <twig:Placeholder class="col-6" />
                </twig:Placeholder:Animation>
                <twig:Placeholder:Animation animation="glow" tag="p" class="card-text">
                    <twig:Placeholder class="col-7" />
                    <twig:Placeholder class="col-4" />
                    <twig:Placeholder class="col-4" />
                    <twig:Placeholder class="col-6" />
                    <twig:Placeholder class="col-8" />
                </twig:Placeholder:Animation>
                <twig:Placeholder tag="a" class="btn btn-primary disabled col-6" aria-disabled="true" />
            </div>
        </div>
    </div>
</div>
```

### How it works

Use placeholders as text replacements or modifiers on existing components.

```twig
<p aria-hidden="true">
    <twig:Placeholder class="col-6" />
</p>

<twig:Placeholder tag="a" class="btn btn-primary disabled col-4" aria-disabled="true" />
```

### Width

Set widths with grid columns, width utilities, or inline styles.

```twig
<div class="w-100 d-flex flex-column gap-2">
    <twig:Placeholder class="col-6" />
    <twig:Placeholder class="w-75" />
    <twig:Placeholder style="width: 25%;" />
</div>
```

### Color

Use the inherited text color or Bootstrap background utilities.

```twig
<div class="w-100 d-flex flex-column gap-2">
    <twig:Placeholder class="col-12" />
    <twig:Placeholder class="col-12 bg-primary" />
    <twig:Placeholder class="col-12 bg-secondary" />
    <twig:Placeholder class="col-12 bg-success" />
    <twig:Placeholder class="col-12 bg-danger" />
    <twig:Placeholder class="col-12 bg-warning" />
    <twig:Placeholder class="col-12 bg-info" />
    <twig:Placeholder class="col-12 bg-light" />
    <twig:Placeholder class="col-12 bg-dark" />
</div>
```

### Sizing

Adjust placeholder height with large, small, and extra-small variants.

```twig
<div class="w-100 d-flex flex-column gap-2">
    <twig:Placeholder size="lg" class="col-12" />
    <twig:Placeholder class="col-12" />
    <twig:Placeholder size="sm" class="col-12" />
    <twig:Placeholder size="xs" class="col-12" />
</div>
```

### Animation

Use glow or wave animation to reinforce that content is actively loading.

```twig
<div class="w-100 d-flex flex-column gap-3">
    <twig:Placeholder:Animation animation="glow" tag="p" class="mb-0">
        <twig:Placeholder class="col-12" />
    </twig:Placeholder:Animation>

    <twig:Placeholder:Animation animation="wave" tag="p" class="mb-0">
        <twig:Placeholder class="col-12" />
    </twig:Placeholder:Animation>
</div>
```

## API Reference

### `<twig:Placeholder>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'span'\|'a'\|'div'\|'p'\|'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'span'` | The HTML element used for the placeholder. |
| `size` | `'lg'\|'sm'\|'xs'\|null` | `null` | The Bootstrap placeholder size. |
### `<twig:Placeholder:Animation>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `tag` | `'span'\|'a'\|'div'\|'p'\|'h1'\|'h2'\|'h3'\|'h4'\|'h5'\|'h6'` | `'div'` | The HTML element used for the animation wrapper. |
| `animation` | `'glow'\|'wave'` | `'glow'` | The Bootstrap placeholder animation. |

| Block | Description |
|:------|:------------|
| `content` | The placeholders animated by this wrapper. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/popover.md">
# Popover

Display contextual Bootstrap content beside a trigger element.

```twig
<div class="d-flex w-100">
    <twig:Popover title="Bootstrap popover" content="This content appears beside the trigger.">
        <button type="button" class="btn btn-primary" {{ html_attr(popover_trigger_attrs) }}>
            Toggle popover
        </button>
    </twig:Popover>
</div>
```

## Installation

```shell
php bin/console ux:install popover --kit bootstrap
```
## Usage

```twig
<twig:Popover title="Popover title" content="Helpful contextual information.">
    <button type="button" class="btn btn-secondary" {{ html_attr(popover_trigger_attrs) }}>
        Show popover
    </button>
</twig:Popover>
```

Bootstrap popovers are opt-in. Initialize them after Bootstrap is loaded:

```js
import { Popover } from 'bootstrap';

document.querySelectorAll('[data-bs-toggle="popover"]').forEach((element) => {
    Popover.getOrCreateInstance(element);
});
```

The component follows an as-child pattern: render `popover_trigger_attrs` with Twig's `html_attr()` function on the actual interactive element so Bootstrap receives the data attributes without an extra wrapper.

## Accessibility

Use a button for popovers opened by click. For a dismiss-on-next-click popover, use the `focus` trigger on an element that can receive keyboard focus. Never rely on `hover` alone because keyboard and touch users cannot reliably reach that content.

Keep popovers short and supplementary. Their generated markup is not a modal dialog and does not trap focus. Disabled controls cannot receive focus, so attach the popover to a focusable wrapper and keep the disabled control inside it.

When `html` is enabled, Bootstrap sanitizes allowed markup by default. Do not disable sanitization for untrusted content.

## Examples

### Enable popovers

Initialize every `data-bs-toggle="popover"` trigger before expecting it to open.

```twig
<div class="d-flex w-100">
    <twig:Popover content="Popover components are opt-in and must be initialized in JavaScript.">
        <button type="button" class="btn btn-secondary" {{ html_attr(popover_trigger_attrs) }}>
            Popover trigger
        </button>
    </twig:Popover>
</div>
```

### Live demo

Combine a heading and body content in a conventional click-triggered popover.

```twig
<div class="d-flex w-100">
    <twig:Popover
        title="Popover title"
        content="And here's some amazing content. It's very engaging. Right?"
    >
        <button type="button" class="btn btn-lg btn-danger" {{ html_attr(popover_trigger_attrs) }}>
            Click to toggle popover
        </button>
    </twig:Popover>
</div>
```

### Four directions

Prefer top, right, bottom, or left placement while allowing Popper to adjust when space is constrained.

```twig
<div class="d-flex flex-wrap justify-content-center align-items-center gap-2 p-5" style="min-height: 184px">
    {% for placement in ['left', 'top', 'bottom', 'right'] %}
        <twig:Popover
            title="Popover {{ placement }}"
            content="On the {{ placement }} side."
            :placement="placement"
        >
            <button type="button" class="btn btn-secondary text-capitalize" {{ html_attr(popover_trigger_attrs) }}>
                {{ placement }}
            </button>
        </twig:Popover>
    {% endfor %}
</div>
```

### Custom container

Append the generated popover to a specific container when the surrounding layout requires it.

```twig
<div id="popover-container" class="border rounded p-5 text-center w-100">
    <twig:Popover
        title="Contained popover"
        content="Bootstrap appends this popover inside the selected container."
        container="#popover-container"
    >
        <button type="button" class="btn btn-secondary" {{ html_attr(popover_trigger_attrs) }}>
            Use custom container
        </button>
    </twig:Popover>
</div>
```

### Custom popovers

Attach a custom class to the generated popover and customize Bootstrap's CSS variables in your stylesheet.

```twig
<div class="d-flex w-100">
    <twig:Popover
        title="Custom popover"
        content="Use the generated class to customize Bootstrap CSS variables."
        customClass="custom-popover"
    >
        <button type="button" class="btn btn-secondary" {{ html_attr(popover_trigger_attrs) }}>
            Custom popover
        </button>
    </twig:Popover>
</div>
```

### Dismiss on next click

Use the `focus` trigger so moving focus away closes the popover.

```twig
<div class="d-flex w-100">
    <twig:Popover
        title="Dismissible popover"
        content="Move focus to another element to dismiss this popover."
        trigger="focus"
    >
        <a class="btn btn-lg btn-danger" href="#" role="button" tabindex="0" {{ html_attr(popover_trigger_attrs) }}>
            Dismissible popover
        </a>
    </twig:Popover>
</div>
```

### Disabled elements

Place a disabled control inside a focusable wrapper that owns the popover attributes.

```twig
<div class="d-flex w-100">
    <twig:Popover
        content="Disabled controls cannot receive focus, so the wrapper owns the popover."
        trigger="hover focus"
    >
        <span class="d-inline-block" tabindex="0" {{ html_attr(popover_trigger_attrs) }}>
            <button class="btn btn-primary" type="button" disabled>Disabled button</button>
        </span>
    </twig:Popover>
</div>
```

## API Reference

### `<twig:Popover>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `title` | `string\|null` | `null` | The optional heading displayed in the popover. |
| `content` | `string` | `''` | The popover body content. |
| `placement` | `'top'\|'right'\|'bottom'\|'left'\|'auto'` | `'right'` | The preferred placement relative to the trigger. |
| `trigger` | `string` | `'click'` | The Bootstrap interaction or space-separated interactions that open and close the popover. |
| `html` | `boolean` | `false` | Whether the popover body may contain sanitized HTML. |
| `container` | `string\|null` | `null` | The optional selector of the element that receives the generated popover. |
| `customClass` | `string\|null` | `null` | The optional class added to the generated popover. |

| Block | Description |
|:------|:------------|
| `content` | The trigger element, which must render `popover_trigger_attrs` with `html_attr()`. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/progress.md">
# Progress

Display task progress with accessible labels, stacked bars, contextual colors, and animation.

```twig
<div class="vstack gap-3" style="width: min(100%, 32rem);">
    <twig:Progress value="25" ariaLabel="Project setup" label="25%" />
    <twig:Progress value="50" ariaLabel="Content migration" color="success" striped label="50%" />
    <twig:Progress value="75" ariaLabel="Deployment" color="info" striped animated label="75%" />
</div>
```

## Installation

```shell
php bin/console ux:install progress --kit bootstrap
```
## Usage

```twig
<twig:Progress value="25" ariaLabel="File upload progress" label="25%" />
```

## Accessibility

Give every progress indicator a concise accessible name with `ariaLabel`. Keep `value`, `min`, and `max` synchronized with the task's real state.

Do not rely on color alone to communicate status. Long labels can cross both the filled and unfilled backgrounds, so prefer a separate visible label when contrast cannot be guaranteed.

## Examples

### How it works

Set the current value to update both the visual width and the progressbar accessibility attributes.

```twig
<div class="vstack gap-2">
    {% for value in [0, 25, 50, 75, 100] %}
        <twig:Progress :value="value" ariaLabel="Basic example" />
    {% endfor %}
</div>
```

### Width

Use Bootstrap width utilities when the visual width should be controlled by a class.

```twig
<div class="w-100">
    <twig:Progress value="75" ariaLabel="Width utility example" barClass="w-75" :barWidth="false" />
</div>
```

### Height

Set a custom height on the progress container.

```twig
<div class="vstack gap-3">
    <twig:Progress value="25" ariaLabel="Example 1px high" height="1px" />
    <twig:Progress value="25" ariaLabel="Example 20px high" height="20px" />
</div>
```

### Labels

Display short text inside the bar, with care for overflow and contrast when labels are long.

```twig
<div class="vstack gap-3">
    <twig:Progress value="25" ariaLabel="Example with label" label="25%" />
    <twig:Progress
        value="10"
        ariaLabel="Example with long label"
        label="Long label text for the progress bar"
        barClass="overflow-visible text-dark"
    />
</div>
```

### Backgrounds

Apply contextual background colors, with matching text-background helpers for labeled bars.

```twig
<div class="vstack gap-3">
    <twig:Progress value="25" ariaLabel="Success example" color="success" />
    <twig:Progress value="50" ariaLabel="Info example" color="info" />
    <twig:Progress value="75" ariaLabel="Warning example" color="warning" />
    <twig:Progress value="100" ariaLabel="Danger example" color="danger" />

    <twig:Progress value="25" ariaLabel="Labeled success example" barClass="text-bg-success" label="25%" />
    <twig:Progress value="50" ariaLabel="Labeled info example" barClass="text-bg-info" label="50%" />
    <twig:Progress value="75" ariaLabel="Labeled warning example" barClass="text-bg-warning" label="75%" />
    <twig:Progress value="100" ariaLabel="Labeled danger example" barClass="text-bg-danger" label="100%" />
</div>
```

### Multiple bars

Wrap stacked progress segments in Bootstrap's `progress-stacked` container.

```twig
<div class="progress-stacked">
    <twig:Progress value="15" ariaLabel="Segment one" stacked />
    <twig:Progress value="30" ariaLabel="Segment two" color="success" stacked />
    <twig:Progress value="20" ariaLabel="Segment three" color="info" stacked />
</div>
```

### Striped

Add striped styling to default and contextual progress bars.

```twig
<div class="vstack gap-3">
    <twig:Progress value="10" ariaLabel="Default striped example" striped />
    <twig:Progress value="25" ariaLabel="Success striped example" color="success" striped />
    <twig:Progress value="50" ariaLabel="Info striped example" color="info" striped />
    <twig:Progress value="75" ariaLabel="Warning striped example" color="warning" striped />
    <twig:Progress value="100" ariaLabel="Danger striped example" color="danger" striped />
</div>
```

### Animated stripes

Animate a striped bar to emphasize an actively changing task.

```twig
<div class="w-100">
    <twig:Progress value="75" ariaLabel="Animated striped example" striped animated />
</div>
```

## API Reference

### `<twig:Progress>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `number` | `0` | The current progress value. |
| `min` | `number` | `0` | The minimum progress value. |
| `max` | `number` | `100` | The maximum progress value. |
| `ariaLabel` | `string` | `'Progress'` | The accessible name of the progress indicator. |
| `label` | `string` | `''` | The fallback text displayed inside the bar. |
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'\|null` | `null` | The Bootstrap background color. |
| `striped` | `boolean` | `false` | Whether to display striped styling. |
| `animated` | `boolean` | `false` | Whether to animate striped styling. |
| `height` | `string\|null` | `null` | The custom height of the progress container. |
| `barWidth` | `string\|false\|null` | `null` | The CSS width of the visual bar, or false to omit it. |
| `barClass` | `string` | `''` | The additional classes applied to the visual bar. |
| `stacked` | `boolean` | `false` | Whether this progress indicator is a segment within a stacked progress bar. |

| Block | Description |
|:------|:------------|
| `content` | The text or custom content displayed inside the visual bar. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/scrollspy.md">
# Scrollspy

Update Bootstrap navigation links as a scrollable region moves between sections.

```twig
<div class="w-100">
    <nav id="demo-scrollspy-nav" class="navbar bg-body-tertiary px-3 mb-3 rounded">
        <span class="navbar-brand">Scrollspy</span>
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link" href="#demo-item-1">First</a></li>
            <li class="nav-item"><a class="nav-link" href="#demo-item-2">Second</a></li>
            <li class="nav-item"><a class="nav-link" href="#demo-item-3">Third</a></li>
        </ul>
    </nav>

    <twig:Scrollspy target="#demo-scrollspy-nav" height="260px" class="border rounded p-3">
        {% for number in 1..3 %}
            <h4 id="demo-item-{{ number }}">Section {{ number }}</h4>
            <p>Scroll this region to update the active navigation item.</p>
            <p class="mb-5">The observed content stays inside its own scrollable container.</p>
        {% endfor %}
    </twig:Scrollspy>
</div>
```

## Installation

```shell
php bin/console ux:install scrollspy --kit bootstrap
```
## Usage

```twig
<div>
    <nav id="usage-scrollspy-nav" class="nav nav-pills mb-3">
        <a class="nav-link" href="#usage-first">First</a>
        <a class="nav-link" href="#usage-second">Second</a>
    </nav>

    <twig:Scrollspy target="#usage-scrollspy-nav" class="border rounded p-3">
        <h4 id="usage-first">First section</h4>
        <p>Scrollspy activates the navigation link for the section currently in view.</p>
        <div style="min-height: 150px"></div>
        <h4 id="usage-second">Second section</h4>
        <p>Every link must point to a matching section identifier.</p>
        <div style="min-height: 150px"></div>
    </twig:Scrollspy>
</div>
```

The `target` prop must select the navigation element, and every navigation link must point to the ID of a section inside the scrollable component. Bootstrap initializes Scrollspy through its data API.

## Accessibility

The component adds `tabindex="0"` so a scrollable region without focusable children remains keyboard-accessible. Use meaningful link labels, unique section IDs, and a logical heading hierarchy inside the observed content.

An active navigation style is a visual enhancement, not a substitute for headings or document structure. When smooth scrolling is enabled, Bootstrap respects `prefers-reduced-motion` through CSS.

## Examples

### Navbar

Track sections from links inside a Bootstrap navbar.

```twig
<div class="w-100">
    <nav id="navbar-scrollspy" class="navbar bg-body-tertiary px-3 mb-3 rounded">
        <span class="navbar-brand">Navbar</span>
        <ul class="nav nav-pills">
            <li class="nav-item"><a class="nav-link" href="#navbar-first">First</a></li>
            <li class="nav-item"><a class="nav-link" href="#navbar-second">Second</a></li>
            <li class="nav-item"><a class="nav-link" href="#navbar-third">Third</a></li>
        </ul>
    </nav>

    <twig:Scrollspy target="#navbar-scrollspy" class="border rounded p-3">
        {% for id, title in {first: 'First heading', second: 'Second heading', third: 'Third heading'} %}
            <h4 id="navbar-{{ id }}">{{ title }}</h4>
            <p>Representative content for {{ title|lower }}. Keep scrolling to activate the next link.</p>
            <div style="min-height: 130px"></div>
        {% endfor %}
    </twig:Scrollspy>
</div>
```

### Nested nav

Activate both parent and nested navigation links for hierarchical content.

```twig
<div class="row">
    <div class="col-4">
        <nav id="nested-scrollspy" class="h-100 flex-column align-items-stretch pe-3 border-end">
            <nav class="nav nav-pills flex-column">
                <a class="nav-link" href="#nested-item-1">Item 1</a>
                <nav class="nav nav-pills flex-column ms-3">
                    <a class="nav-link my-1" href="#nested-item-1-1">Item 1-1</a>
                    <a class="nav-link my-1" href="#nested-item-1-2">Item 1-2</a>
                </nav>
                <a class="nav-link" href="#nested-item-2">Item 2</a>
            </nav>
        </nav>
    </div>
    <div class="col-8">
        <twig:Scrollspy target="#nested-scrollspy" height="260px" smoothScroll class="p-2">
            {% for id in ['1', '1-1', '1-2', '2'] %}
                <h4 id="nested-item-{{ id }}">Item {{ id }}</h4>
                <p>Nested navigation activates parent and child links as their sections enter view.</p>
                <div style="min-height: 120px"></div>
            {% endfor %}
        </twig:Scrollspy>
    </div>
</div>
```

### List group

Use a list group as the navigation target.

```twig
<div class="row">
    <div class="col-4">
        <div id="list-scrollspy" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
        </div>
    </div>
    <div class="col-8">
        <twig:Scrollspy target="#list-scrollspy" height="240px" class="p-2">
            {% for number in 1..3 %}
                <h4 id="list-item-{{ number }}">Item {{ number }}</h4>
                <p>List group links work as Scrollspy navigation controls.</p>
                <div style="min-height: 125px"></div>
            {% endfor %}
        </twig:Scrollspy>
    </div>
</div>
```

### Simple anchors

Track sections with lightweight anchor navigation and optional smooth scrolling.

```twig
<div class="w-100">
    <nav id="simple-scrollspy" class="hstack gap-3 mb-3">
        <a class="p-2 link-offset-2 link-underline link-underline-opacity-0" href="#simple-first">First</a>
        <a class="p-2 link-offset-2 link-underline link-underline-opacity-0" href="#simple-second">Second</a>
        <a class="p-2 link-offset-2 link-underline link-underline-opacity-0" href="#simple-third">Third</a>
    </nav>

    <twig:Scrollspy target="#simple-scrollspy" smoothScroll height="240px" class="border rounded p-3">
        {% for id, title in {first: 'First section', second: 'Second section', third: 'Third section'} %}
            <h4 id="simple-{{ id }}">{{ title }}</h4>
            <p>Simple links receive the active class when this section becomes current.</p>
            <div style="min-height: 130px"></div>
        {% endfor %}
    </twig:Scrollspy>
</div>
```

## API Reference

### `<twig:Scrollspy>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `target` | `string` | - | The CSS selector of the navigation element controlled by Scrollspy. |
| `height` | `string` | `'200px'` | The height of the scrollable region. |
| `smoothScroll` | `boolean` | `false` | Whether link activation scrolls smoothly to its target section. |
| `rootMargin` | `string\|null` | `null` | The optional Intersection Observer root margin. |
| `threshold` | `string\|null` | `null` | The optional comma-separated Intersection Observer thresholds. |

| Block | Description |
|:------|:------------|
| `content` | The sections observed by Scrollspy. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/spinner.md">
# Spinner

Indicate the loading state of a component or page with Bootstrap spinners.

```twig
<div class="d-flex align-items-center gap-3">
    <twig:Spinner color="primary" label="Loading..." />
    <twig:Spinner type="grow" color="secondary" label="Loading..." />
</div>
```

## Installation

```shell
php bin/console ux:install spinner --kit bootstrap
```
## Usage

```twig
<twig:Spinner label="Loading search results..." />
```

## Accessibility

Standalone spinners use `role="status"` and include a visually hidden loading message. Customize `label` so the announced status describes what is loading.

When visible text already announces the status, set `decorative` to hide the spinner itself from assistive technologies.

## Examples

### Border spinner

Use the border animation for a lightweight loading indicator.

```twig
<twig:Spinner label="Loading..." />
```

### Colors

The spinner inherits `currentColor`; use Bootstrap contextual text colors to customize it.

```twig
<div class="d-flex flex-wrap gap-3">
    <twig:Spinner color="primary" label="Loading..." />
    <twig:Spinner color="secondary" label="Loading..." />
    <twig:Spinner color="success" label="Loading..." />
    <twig:Spinner color="danger" label="Loading..." />
    <twig:Spinner color="warning" label="Loading..." />
    <twig:Spinner color="info" label="Loading..." />
    <twig:Spinner color="light" label="Loading..." />
    <twig:Spinner color="dark" label="Loading..." />
</div>
```

### Growing spinner

Switch to the growing animation while keeping the same contextual color options.

```twig
<div class="d-flex flex-wrap gap-3">
    <twig:Spinner type="grow" label="Loading..." />
    <twig:Spinner type="grow" color="primary" label="Loading..." />
    <twig:Spinner type="grow" color="secondary" label="Loading..." />
    <twig:Spinner type="grow" color="success" label="Loading..." />
    <twig:Spinner type="grow" color="danger" label="Loading..." />
    <twig:Spinner type="grow" color="warning" label="Loading..." />
    <twig:Spinner type="grow" color="info" label="Loading..." />
    <twig:Spinner type="grow" color="light" label="Loading..." />
    <twig:Spinner type="grow" color="dark" label="Loading..." />
</div>
```

### Margin

Use Bootstrap spacing utilities to add space around a spinner.

```twig
<twig:Spinner class="m-5" label="Loading..." />
```

### Flex placement

Use flexbox utilities to center a spinner or place it after a visible loading status.

```twig
<div class="d-flex flex-column gap-4">
    <div class="d-flex justify-content-center">
        <twig:Spinner label="Loading..." />
    </div>

    <div class="d-flex align-items-center">
        <strong role="status">Loading...</strong>
        <twig:Spinner class="ms-auto" decorative />
    </div>
</div>
```

### Floats

Use float utilities when a spinner needs to follow the edge of its container.

```twig
<div class="clearfix">
    <twig:Spinner class="float-end" label="Loading..." />
</div>
```

### Text align

Because the component is inline-flex, text alignment utilities can position it within a block.

```twig
<div class="text-center">
    <twig:Spinner label="Loading..." />
</div>
```

### Size

Use the compact Bootstrap size or set custom dimensions with CSS.

```twig
<div class="d-flex align-items-center gap-3">
    <twig:Spinner small label="Loading..." />
    <twig:Spinner type="grow" small label="Loading..." />
    <twig:Spinner style="width: 3rem; height: 3rem" label="Loading..." />
    <twig:Spinner type="grow" style="width: 3rem; height: 3rem" label="Loading..." />
</div>
```

### Buttons

Place a decorative spinner inside a disabled button and provide the loading status as button text or visually hidden text.

```twig
<div class="d-flex flex-wrap gap-2">
    <button class="btn btn-primary" type="button" disabled>
        <twig:Spinner small decorative />
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <twig:Spinner small decorative />
        <span>Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <twig:Spinner type="grow" small decorative />
        <span class="visually-hidden">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <twig:Spinner type="grow" small decorative />
        <span>Loading...</span>
    </button>
</div>
```

## API Reference

### `<twig:Spinner>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `type` | `'border'\|'grow'` | `'border'` | The spinner animation style. |
| `color` | `'primary'\|'secondary'\|'success'\|'danger'\|'warning'\|'info'\|'light'\|'dark'\|null` | `null` | The Bootstrap contextual text color. |
| `small` | `boolean` | `false` | Whether to use Bootstrap's compact spinner size. |
| `role` | `string\|null` | `'status'` | The ARIA role used for an announced loading status. |
| `label` | `string` | `'Loading...'` | The visually hidden loading message. |
| `decorative` | `boolean` | `false` | Whether to hide the spinner from assistive technologies. |

| Block | Description |
|:------|:------------|
| `content` | The accessible loading message or custom inner content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/toast.md">
# Toast

Show lightweight Bootstrap notifications with optional headers and dismissal controls.

```twig
<div class="d-flex justify-content-center p-4">
    <twig:Toast :autohide="false">
        <twig:Toast:Header timestamp="11 mins ago">
            <span class="rounded me-2 bg-primary" style="width: 20px; height: 20px"></span>
            <strong class="me-auto">Bootstrap</strong>
        </twig:Toast:Header>
        <twig:Toast:Body>
            Hello, world! This is a toast message.
        </twig:Toast:Body>
    </twig:Toast>
</div>
```

## Installation

```shell
php bin/console ux:install toast --kit bootstrap
```
## Usage

```twig
<twig:Toast :autohide="false">
    <twig:Toast:Header title="Bootstrap" timestamp="just now" />
    <twig:Toast:Body>
        Your changes have been saved.
    </twig:Toast:Body>
</twig:Toast>
```

Bootstrap toasts are opt-in. Create an instance before showing a hidden toast:

```js
import { Toast } from 'bootstrap';

const trigger = document.querySelector('#live-toast-trigger');
const element = document.querySelector('#live-toast');
const toast = Toast.getOrCreateInstance(element);

trigger.addEventListener('click', () => toast.show());
```

A toast rendered with `show` is immediately visible and does not need JavaScript until it must hide, dismiss, or be shown again.

## Accessibility

Keep the live region in the DOM before injecting or updating a toast. Use the defaults `role="status"` and `live="polite"` for ordinary notifications; reserve `role="alert"` and `live="assertive"` for urgent interruptions.

Choose a delay long enough to read the message. Set `autohide` to `false` when a toast contains interactive controls and always provide an explicit close action in that case. Avoid placing important actions inside an autohiding toast because focus may be lost when it disappears.

## Examples

### Basic

Compose a standard toast from a header and body.

```twig
<twig:Toast :autohide="false">
    <twig:Toast:Header timestamp="11 mins ago">
        <span class="rounded me-2 bg-primary" style="width: 20px; height: 20px"></span>
        <strong class="me-auto">Bootstrap</strong>
    </twig:Toast:Header>
    <twig:Toast:Body>
        Hello, world! This is a toast message.
    </twig:Toast:Body>
</twig:Toast>
```

### Live example

Start hidden and show the toast from application JavaScript.

```twig
<button type="button" class="btn btn-primary mb-3" id="live-toast-trigger">
    Show live toast
</button>

<twig:Toast id="live-toast" :show="false">
    <twig:Toast:Header title="Bootstrap" timestamp="just now" />
    <twig:Toast:Body>
        See? Just like this.
    </twig:Toast:Body>
</twig:Toast>
```

### Translucent

Place the default translucent toast over colored content.

```twig
<div class="p-4 rounded bg-primary bg-gradient">
    <twig:Toast :autohide="false">
        <twig:Toast:Header title="Bootstrap" timestamp="11 mins ago" />
        <twig:Toast:Body>
            Toasts are slightly translucent to blend with what is behind them.
        </twig:Toast:Body>
    </twig:Toast>
</div>
```

### Stacking

Stack multiple notifications inside a Bootstrap toast container.

```twig
<div class="toast-container position-static">
    <twig:Toast :autohide="false">
        <twig:Toast:Header title="Bootstrap" timestamp="just now" />
        <twig:Toast:Body>
            First toast in the stack.
        </twig:Toast:Body>
    </twig:Toast>

    <twig:Toast :autohide="false">
        <twig:Toast:Header title="Bootstrap" timestamp="2 seconds ago" />
        <twig:Toast:Body>
            Second toast, automatically spaced by the container.
        </twig:Toast:Body>
    </twig:Toast>
</div>
```

### Custom content

Omit the header and compose body content, actions, and dismissal controls directly.

```twig
<div class="d-flex flex-column gap-3">
    <twig:Toast :autohide="false" class="align-items-center">
        <div class="d-flex">
            <twig:Toast:Body>
                Hello, world! This is a toast message.
            </twig:Toast:Body>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </twig:Toast>

    <twig:Toast :autohide="false">
        <twig:Toast:Body>
            Hello, world! This is a toast message.
            <div class="mt-2 pt-2 border-top">
                <button type="button" class="btn btn-primary btn-sm">Take action</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
            </div>
        </twig:Toast:Body>
    </twig:Toast>
</div>
```

### Color schemes

Combine contextual background and foreground utilities for stronger visual emphasis.

```twig
<div class="d-flex flex-column gap-3">
    {% for color in ['primary', 'success', 'danger'] %}
        <twig:Toast :autohide="false" class="text-bg-{{ color }} border-0">
            <div class="d-flex">
                <twig:Toast:Body>
                    A {{ color }} toast with matching contextual color.
                </twig:Toast:Body>
                <button type="button" class="btn-close me-2 m-auto" data-bs-theme="dark" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </twig:Toast>
    {% endfor %}
</div>
```

### Placement

Position a toast container with Bootstrap's positioning utilities.

```twig
<div class="position-relative w-100 bg-body-tertiary border rounded" style="height: 320px">
    <div class="toast-container position-absolute top-0 end-0 p-3">
        <twig:Toast :autohide="false">
            <twig:Toast:Header title="Bootstrap" timestamp="just now" />
            <twig:Toast:Body>
                Position the container with Bootstrap utilities.
            </twig:Toast:Body>
        </twig:Toast>
    </div>
</div>
```

## API Reference

### `<twig:Toast>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `show` | `boolean` | `true` | Whether the toast is visible on initial render. |
| `autohide` | `boolean` | `true` | Whether Bootstrap hides the toast automatically. |
| `delay` | `int\|null` | `null` | The delay in milliseconds before an autohiding toast closes. |
| `animation` | `boolean` | `true` | Whether Bootstrap animates the toast. |
| `role` | `'status'\|'alert'` | `'status'` | The accessibility role that describes the notification urgency. |
| `live` | `'polite'\|'assertive'` | `'polite'` | The live region politeness level. |

| Block | Description |
|:------|:------------|
| `content` | The toast structure, typically `Toast:Header` and `Toast:Body`. |
### `<twig:Toast:Body>`

| Block | Description |
|:------|:------------|
| `content` | The notification message and optional actions. |
### `<twig:Toast:Header>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `title` | `string` | `''` | The notification title. |
| `timestamp` | `string\|null` | `null` | The optional relative or absolute notification time. |
| `imageSrc` | `string\|null` | `null` | The optional image displayed before the title. |
| `imageAlt` | `string` | `''` | The alternative text for the header image. |
| `closeButton` | `boolean` | `true` | Whether to render a Bootstrap dismiss button. |
| `closeLabel` | `string` | `'Close'` | The accessible label of the dismiss button. |

| Block | Description |
|:------|:------------|
| `content` | The header title or custom header content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/bootstrap/components/tooltip.md">
# Tooltip

Add Bootstrap tooltips to focusable controls with configurable content and placement.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Tooltip title="Tooltip on left" placement="left">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Left</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on top" placement="top">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Top</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on bottom" placement="bottom">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Bottom</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on right" placement="right">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Right</button>
    </twig:Tooltip>
</div>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

## Installation

```shell
php bin/console ux:install tooltip --kit bootstrap
```
## Usage

```twig
<twig:Tooltip title="Save your changes">
    <button type="button" class="btn btn-primary" {{ html_attr(tooltip_trigger_attrs) }}>Save</button>
</twig:Tooltip>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

## Accessibility

Apply `tooltip_trigger_attrs` to a natively focusable, interactive element such as a button or link so the tooltip works with both pointer and keyboard input. Do not configure hover as the only trigger.

Disabled controls cannot receive focus or pointer events. Put the tooltip attributes on a focusable wrapper as shown below. Bootstrap sanitizes HTML tooltip content by default, but plain text remains preferable for user-provided content.

## Examples

### Enable tooltips

Bootstrap tooltips are opt-in and must be initialized explicitly after Bootstrap's JavaScript is loaded.

```twig
<twig:Tooltip title="This tooltip is initialized explicitly">
    <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Hover or focus me</button>
</twig:Tooltip>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

### Tooltips on links

Apply the trigger attributes directly to inline links so they remain keyboard accessible.

```twig
<p class="text-body-secondary mb-0">
    Placeholder text to demonstrate
    <twig:Tooltip title="Default tooltip"><a href="#" {{ html_attr(tooltip_trigger_attrs) }}>inline links</a></twig:Tooltip>
    with tooltips. Content placed here mimics how
    <twig:Tooltip title="Another tooltip"><a href="#" {{ html_attr(tooltip_trigger_attrs) }}>real text</a></twig:Tooltip>
    flows around them. You can use
    <twig:Tooltip title="Another one here too"><a href="#" {{ html_attr(tooltip_trigger_attrs) }}>these tooltips on links</a></twig:Tooltip>
    in your own interface.
</p>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

### Custom tooltips

Use a custom class and Bootstrap CSS variables to change a generated tooltip's appearance.

```twig
<style>
    .bootstrap-custom-tooltip {
        --bs-tooltip-bg: var(--bs-primary);
        --bs-tooltip-color: var(--bs-white);
    }
</style>

<twig:Tooltip title="This top tooltip is themed via CSS variables." customClass="bootstrap-custom-tooltip">
    <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Custom tooltip</button>
</twig:Tooltip>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

### Directions

Choose a preferred placement or enable Bootstrap's sanitized HTML content.

```twig
<div class="d-flex flex-wrap gap-2">
    <twig:Tooltip title="Tooltip on top" placement="top">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Tooltip on top</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on right" placement="right">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Tooltip on right</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on bottom" placement="bottom">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Tooltip on bottom</button>
    </twig:Tooltip>
    <twig:Tooltip title="Tooltip on left" placement="left">
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Tooltip on left</button>
    </twig:Tooltip>
    <twig:Tooltip title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" html>
        <button type="button" class="btn btn-secondary" {{ html_attr(tooltip_trigger_attrs) }}>Tooltip with HTML</button>
    </twig:Tooltip>
</div>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

### Disabled elements

Put the trigger on a focusable wrapper when the described control is disabled.

```twig
<twig:Tooltip title="Disabled tooltip">
    <span class="d-inline-block" tabindex="0" {{ html_attr(tooltip_trigger_attrs) }}>
        <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </span>
</twig:Tooltip>

<script type="module">
    import { Tooltip } from 'bootstrap';

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => Tooltip.getOrCreateInstance(element));
</script>
```

## API Reference

### `<twig:Tooltip>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `title` | `string` | - | The tooltip content stored by Bootstrap. |
| `placement` | `'auto'\|'top'\|'right'\|'bottom'\|'left'` | `'top'` | The preferred tooltip placement. |
| `html` | `boolean` | `false` | Whether the tooltip title contains sanitized HTML. |
| `customClass` | `string\|null` | `null` | The custom class applied to the generated tooltip. |

| Block | Description |
|:------|:------------|
| `content` | The focusable trigger rendering `tooltip_trigger_attrs` with `html_attr()`. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/common/components/clipboard.md">
# Clipboard

A Stimulus behavior that copies text to the clipboard — either a value you give it or the content of an element — with optional copied feedback.

```twig
<div data-controller="clipboard" class="flex items-center gap-3">
    <code data-clipboard-target="source" class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">composer require symfony/ux-toolkit</code>
    <span class="relative">
        <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy</button>
        <span data-clipboard-target="success" class="absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-sm font-medium text-violet-600 dark:text-violet-400">Copied!</span>
    </span>
</div>
```

## Installation

```shell
php bin/console ux:install clipboard --kit common
```
## Usage

Add `data-controller="clipboard"`, mark the element to copy from with a `source` target, then trigger `clipboard#copy` from a button:

```twig
<div data-controller="clipboard">
    <code data-clipboard-target="source">Text to copy</code>
    <button type="button" data-action="clipboard#copy">Copy</button>
</div>
```

To copy a fixed string instead of an element, set a `source` value (`data-clipboard-source-value`) — see [Copy using a Value](#content-copy-using-a-value).

> [!NOTE]
> Every successful copy also dispatches a `clipboard:copied` event, with the copied text available as `event.detail.text`. Listen for it to drive your own feedback.

## Examples

### Copy a Form Element's Value

Form controls — inputs, textareas, selects — are copied from their `value`:

```twig
<div data-controller="clipboard" class="flex items-center gap-3">
    <input type="text" data-clipboard-target="source" value="hello@example.com" readonly class="rounded-md border border-violet-200 bg-violet-50 px-3 py-2 text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy email</button>
</div>
```

### Copy an Element's Text

For non-form elements, the `source` target's text content is copied:

```twig
<div data-controller="clipboard" class="flex items-center gap-3">
    <p data-clipboard-target="source" class="flex-1 text-sm text-violet-900 dark:text-violet-100">The quick brown fox jumps over the lazy dog.</p>
    <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy text</button>
</div>
```

### Copy Code

A classic: a code block with its own copy button. Point the `source` target at the `<pre>` — its text content is copied verbatim, indentation and newlines included:

```twig
<div data-controller="clipboard" class="relative w-full max-w-sm">
    <pre data-clipboard-target="source" class="overflow-x-auto rounded-md bg-violet-950 p-4 font-mono text-xs leading-relaxed text-violet-100"><code>$response = new JsonResponse([
    'status' => 'ok',
]);</code></pre>
    <button type="button" data-action="clipboard#copy" class="absolute right-2 top-2 rounded bg-violet-700 px-2 py-1 text-xs font-medium text-violet-100 hover:bg-violet-600">
        <span data-clipboard-target="idle">Copy</span>
        <span data-clipboard-target="success" hidden>Copied!</span>
    </button>
</div>
```

### Copy using a Value

Set a `source` value to copy a fixed string, independent of what's shown on screen. Here the field displays a masked key while the button copies the real one:

```twig
<div data-controller="clipboard" data-clipboard-source-value="a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6" class="flex items-center gap-3">
    <input type="text" value="xxxxxxxxxxxxxxxxxxxx" readonly class="rounded-md border border-violet-200 bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy API Key</button>
</div>
```

### Copied Feedback

Add a `success` target to reveal a confirmation after a successful copy. It's hidden again after `successDuration` milliseconds (defaults to `2000`):

```twig
<div data-controller="clipboard" data-clipboard-success-duration-value="1500" class="flex items-center gap-3">
    <code data-clipboard-target="source" class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">symfony serve -d</code>
    <span class="relative">
        <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy</button>
        <span data-clipboard-target="success" class="absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-sm font-medium text-violet-600 dark:text-violet-400">Copied to clipboard!</span>
    </span>
</div>
```

### Swap the Button Label

Put both an `idle` and a `success` label inside the button: the `idle` one is hidden while the `success` one shows, swapping "Copy" for "Copied!" on click.

```twig
<div data-controller="clipboard" class="flex items-center gap-3">
    <code data-clipboard-target="source" class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">git clone git@github.com:symfony/ux.git</code>
    <button type="button" data-action="clipboard#copy" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">
        <span data-clipboard-target="idle">Copy</span>
        <span data-clipboard-target="success" hidden>Copied!</span>
    </button>
</div>
```

### Animate the Feedback

The `success` target is toggled from `display: none` to visible on copy, and showing a hidden element restarts its CSS animations — so an animated `success` target replays its effect on every click. Give it a burst `@keyframes` and match `successDuration` to the animation's length:

```twig
<style>
@keyframes clipboard-burst {
    from { transform: scale(.75); opacity: .75; }
    to { transform: scale(2) rotate(20deg); opacity: 0; }
}
</style>
<div data-controller="clipboard" data-clipboard-success-duration-value="450" class="flex items-center gap-3">
    <code data-clipboard-target="source" class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">php bin/console cache:clear</code>
    <button type="button" data-action="clipboard#copy" class="relative rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">
        Copy
        <span data-clipboard-target="success" class="pointer-events-none absolute inset-0 rounded-full border-2 border-dotted border-violet-400" style="animation: clipboard-burst 450ms linear forwards"></span>
    </button>
</div>
```

### Feedback via a CSS Class

Prefer to drive feedback purely from CSS? Instead of `success`/`idle` targets, set a `success` class with `data-clipboard-success-class`. The controller adds it to its element for `successDuration`, so you can restyle anything beneath it — including the trigger itself:

> [!TIP]
> Pass multiple space-separated classes if you like (`data-clipboard-success-class="ring pulse"`) — they're all applied for the duration.

```twig
<style>.clipboard-copied .clipboard-btn { background-color: #16a34a; }</style>
<div data-controller="clipboard" data-clipboard-success-class="clipboard-copied" class="flex items-center gap-3">
    <code data-clipboard-target="source" class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">php bin/console about</code>
    <button type="button" data-action="clipboard#copy" class="clipboard-btn rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy</button>
</div>
```

### Feedback with a Tooltip

Pair with the [`tooltip`](../tooltip) recipe for a floating confirmation. With both controllers on the button, copying dispatches `clipboard:copied` right there, opening a manual, self-hiding tooltip above it — no `success` target or class needed:

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[120px] items-center justify-center">
    <div class="flex items-center gap-3">
        <code class="rounded-md bg-violet-50 px-3 py-2 font-mono text-sm text-violet-900 dark:bg-violet-950 dark:text-violet-100">php bin/console debug:router</code>
        <button type="button" data-controller="clipboard tooltip" data-clipboard-source-value="php bin/console debug:router" data-action="clipboard#copy clipboard:copied->tooltip#show" data-tooltip-content-value="Copied!" data-tooltip-trigger-value="manual" data-tooltip-auto-hide-value="2000" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-violet-500 active:scale-95 active:bg-violet-700">Copy</button>
    </div>
</div>
```

## API Reference

### `data-controller="clipboard"`

| Value | Type | Default | Description |
|:------|:-----|:--------|:------------|
| `data-clipboard-source-value` | `String` | - | Text to copy to the clipboard; when set, it takes precedence over the `source` target. |
| `data-clipboard-success-duration-value` | `Number` | `2000` | How long, in milliseconds, the success feedback stays active after a copy. Defaults to 2000. |

| Target | Description |
|:-------|:------------|
| `source` | Element to copy from when no `source` value is set: its form value (input, textarea, select) or, failing that, its text content. |
| `success` | Element revealed briefly after a successful copy, then hidden again. Hidden on connect. |
| `idle` | Element hidden while the `success` target is showing, then revealed again; pair it with `success` inside the button to swap the label. |

| Class | Description |
|:------|:------------|
| `data-clipboard-success-class` | Class(es) added to the controller element for the same window, as a CSS-only alternative to the `success`/`idle` targets. |

| Action | Description |
|:-------|:------------|
| `copy` | Copies the source to the clipboard, then dispatches a `clipboard:copied` event and flashes the success feedback. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/common/components/closeable.md">
# Closeable

A Stimulus behavior that removes its element from the page when dismissed, with optional delayed and automatic closing and an animated countdown bar.

```twig
<div data-controller="closeable" class="flex items-start gap-3 rounded-md border border-violet-200 bg-violet-50 p-4 text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <div class="flex-1">
        <p class="font-medium">Heads up!</p>
        <p class="text-violet-700 dark:text-violet-300">This message can be dismissed.</p>
    </div>
    <button type="button" data-action="click->closeable#close" aria-label="Dismiss" class="text-violet-500 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-200">
        <span aria-hidden="true" class="text-lg leading-none">&times;</span>
    </button>
</div>
```

## Installation

```shell
php bin/console ux:install closeable --kit common
```
## Usage

Add `data-controller="closeable"` to the element you want to remove, then trigger `closeable#close` from a child element:

```twig
<div data-controller="closeable">
    <button type="button" data-action="click->closeable#close">Dismiss</button>
</div>
```

## Examples

### Delayed Close

Set a `data-closeable-delay-param` (in milliseconds) on the close action to defer the removal. Add a `timerbar` target to visualize the countdown.

```twig
<div data-controller="closeable" class="relative flex items-start gap-3 overflow-hidden rounded-md border border-violet-200 bg-violet-50 p-4 text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <div class="flex-1">
        <p class="font-medium">Saved!</p>
        <p class="text-violet-700 dark:text-violet-300">Dismiss to close after a short delay.</p>
    </div>
    <button type="button" data-action="click->closeable#close" data-closeable-delay-param="3000" aria-label="Dismiss" class="text-violet-500 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-200">
        <span aria-hidden="true" class="text-lg leading-none">&times;</span>
    </button>
    <div data-closeable-target="timerbar" class="absolute bottom-0 left-0 h-1 w-full bg-violet-500 transition-[width] ease-linear dark:bg-violet-400"></div>
</div>
```

### Auto Close

Set `data-closeable-auto-close-value` (in milliseconds) to remove the element automatically once it connects. The `timerbar` target animates down over the same duration.

```twig
<div data-controller="closeable" data-closeable-auto-close-value="5000" class="relative flex items-start gap-3 overflow-hidden rounded-md border border-violet-200 bg-violet-50 p-4 text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <div class="flex-1">
        <p class="font-medium">Copied to clipboard</p>
        <p class="text-violet-700 dark:text-violet-300">This message closes on its own.</p>
    </div>
    <button type="button" data-action="click->closeable#close" aria-label="Dismiss" class="text-violet-500 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-200">
        <span aria-hidden="true" class="text-lg leading-none">&times;</span>
    </button>
    <div data-closeable-target="timerbar" class="absolute bottom-0 left-0 h-1 w-full bg-violet-500 transition-[width] ease-linear dark:bg-violet-400"></div>
</div>
```

### Cancel Auto Close

Call `closeable#cancel` to stop a pending close. Here, hovering the message cancels the automatic close so the user has time to read it.

```twig
<div data-controller="closeable" data-closeable-auto-close-value="5000" data-action="mouseenter->closeable#cancel" class="relative flex items-start gap-3 overflow-hidden rounded-md border border-violet-200 bg-violet-50 p-4 text-sm text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100">
    <div class="flex-1">
        <p class="font-medium">Hover to keep me</p>
        <p class="text-violet-700 dark:text-violet-300">Move your pointer over this message to cancel the automatic close.</p>
    </div>
    <button type="button" data-action="click->closeable#close" aria-label="Dismiss" class="text-violet-500 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-200">
        <span aria-hidden="true" class="text-lg leading-none">&times;</span>
    </button>
    <div data-closeable-target="timerbar" class="absolute bottom-0 left-0 h-1 w-full bg-violet-500 transition-[width] ease-linear dark:bg-violet-400"></div>
</div>
```

## API Reference

### `data-controller="closeable"`

| Value | Type | Default | Description |
|:------|:-----|:--------|:------------|
| `data-closeable-auto-close-value` | `Number` | - | Delay in milliseconds after which the element removes itself once connected. |

| Target | Description |
|:-------|:------------|
| `timerbar` | Element whose width animates down to 0 over the close delay to visualize the countdown. It is hidden until a delayed or automatic close starts. |

| Action | Description |
|:-------|:------------|
| `close` | Removes the element. Accepts a `data-closeable-delay-param` (milliseconds) to defer the removal. |
| `cancel` | Cancels a pending delayed or automatic close. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/common/components/logout-link.md">
# Logout Link

A link that logs the current user out through a secure POST form.

```twig
<twig:LogoutLink class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
    Logout
</twig:LogoutLink>
```

## Installation

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

```twig
<twig:LogoutLink>
    Logout
</twig:LogoutLink>
```

> [!WARNING]
> `LogoutLink` logs the user out through a **POST** request protected by a CSRF token (token id `logout`). For it to work, your firewall's logout must **require `POST`** and have **CSRF protection enabled** — otherwise logging out will be rejected.

Restrict the logout route to `POST` so it can't be triggered by a plain link or prefetch:

```php
#[Route('/logout', name: 'app_logout', methods: ['POST'])]
public function logout(): never
{
    throw new \LogicException('This method is intercepted by the logout key on your firewall.');
}
```

Point the firewall's logout at that route (`app_logout`) and enable CSRF protection (this validates the `logout` token the component sends):

```yaml
# config/packages/security.yaml
security:
    firewalls:
        main:
            logout:
                path: app_logout
                enable_csrf: true
```

## Examples

### Specific Firewall

Set the `firewall` prop to log out from a specific firewall instead of the current one.

```twig
<twig:LogoutLink firewall="main" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
    Logout from the main firewall
</twig:LogoutLink>
```

## API Reference

### `<twig:LogoutLink>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `firewall` | `string\|null` | `null` | The firewall name to log out from; when null, the current firewall is used. |

| Block | Description |
|:------|:------------|
| `content` | The link label. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/common/components/post-link.md">
# Post Link

A link submitted as a form, with optional HTTP method spoofing, CSRF protection, and a confirmation prompt.

```twig
<twig:PostLink href="/link/newsletter/subscribe" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
    Subscribe
</twig:PostLink>
```

## Installation

```shell
php bin/console ux:install post-link --kit common
```
## Usage

```twig
<twig:PostLink href="/posts/42/publish">
    Publish
</twig:PostLink>
```

## Examples

### Custom Method

Set the `method` prop to submit the form with a spoofed HTTP method. A hidden `_method` field is added so Symfony can route the request to the matching controller.

> [!WARNING]
> Method spoofing only works when HTTP method override is enabled in your Symfony app. Set `framework.http_method_override: true` in `config/packages/framework.yaml`.

```twig
<twig:PostLink href="/link/posts/42" method="DELETE" class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">
    Delete post
</twig:PostLink>
```

### With Confirmation

Pass a `confirm` message to prompt the user with a native confirmation dialog before the form is submitted.

```twig
<twig:PostLink href="/link/posts/42/delete" confirm="Are you sure you want to delete this post?" class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">
    Delete post
</twig:PostLink>
```

### With CSRF Protection

Set `csrfTokenId` to add a hidden CSRF token field, protecting the form against cross-site request forgery.

```twig
<twig:PostLink href="/link/posts/42/delete" csrfTokenId="delete-post" class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500">
    Delete post
</twig:PostLink>
```

## API Reference

### `<twig:PostLink>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `href` | `string` | - | The URL the form submits to. |
| `csrfTokenId` | `string\|null` | `null` | The CSRF token ID used to generate the hidden token field; when null, no token is added. |
| `method` | `string` | `'POST'` | The HTTP method used to submit the form; when not `POST`, a hidden `_method` field is added for method spoofing. |
| `confirm` | `string\|null` | `null` | A confirmation message shown before submitting; when null, no confirmation is required. |

| Block | Description |
|:------|:------------|
| `content` | The button label. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/common/components/tooltip.md">
# Tooltip

A Stimulus behavior that shows a tooltip from a `content` value — or straight from an element's native `title`. Powered by [Floating UI](https://floating-ui.com/): the tooltip is rendered outside the trigger (appended to `<body>`), so it's never clipped by an `overflow` ancestor, and it flips and shifts to stay in view. Put it right on the trigger — it opens on hover and keyboard focus by default — and style the injected `.tooltip` once, globally.

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[140px] items-center justify-center">
    <button type="button" data-controller="tooltip" title="Thanks for hovering!" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
        Hover me
    </button>
</div>
```

## Installation

```shell
php bin/console ux:install tooltip --kit common
```
## Usage

Style every tooltip once, in your global stylesheet — Floating UI sets the position and the arrow's offsets, so you only own the look:

```css
.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    border-radius: 0.25rem;
    background: #1f2937;
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 50;
}
.tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}
```

Then put the controller on the trigger with a `content` value — hover and focus are wired for you:

```twig
<button type="button" data-controller="tooltip" data-tooltip-content-value="Tooltip content">
    Hover me
</button>
```

Set `placement` to hint a side (`top` by default, `bottom`, `left`, or `right`) — Floating UI flips and shifts from there to keep it on screen. Set `trigger` to `click` to toggle on click, or `manual` to drive `show`/`hide` yourself (for example from another controller's event). The controller injects the `.tooltip` into `<body>` and points the trigger's `aria-describedby` at it.

As a shortcut — the form shown at the top — drop the controller onto an element that already has a `title` and skip the `content` value: the controller adopts the title text and removes the attribute so the browser's native tooltip is suppressed.

## Examples

### Placement

Set `placement` to `top` (default), `bottom`, `left`, or `right`. It's a _preference_ — Floating UI flips to the opposite side and shifts along the axis whenever the trigger is too close to an edge:

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[200px] items-center justify-center gap-12 px-16">
    <button type="button" data-controller="tooltip" data-tooltip-content-value="Top" data-tooltip-placement-value="top" class="rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500">Top</button>
    <button type="button" data-controller="tooltip" data-tooltip-content-value="Bottom" data-tooltip-placement-value="bottom" class="rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500">Bottom</button>
    <button type="button" data-controller="tooltip" data-tooltip-content-value="Left" data-tooltip-placement-value="left" class="rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500">Left</button>
    <button type="button" data-controller="tooltip" data-tooltip-content-value="Right" data-tooltip-placement-value="right" class="rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500">Right</button>
</div>
```

### Click to Toggle

Set `trigger` to `click` for a tooltip that stays open until the next click:

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[120px] items-center justify-center">
    <button type="button" data-controller="tooltip" data-tooltip-content-value="Click again to close" data-tooltip-placement-value="bottom" data-tooltip-trigger-value="click" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
        Click me
    </button>
</div>
```

### Auto-hide

Set `autoHide` (milliseconds) so a shown tooltip dismisses itself — handy when it's opened programmatically rather than by a hover you can leave:

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[120px] items-center justify-center">
    <button type="button" data-controller="tooltip" data-tooltip-content-value="I'll disappear shortly…" data-tooltip-placement-value="bottom" data-tooltip-trigger-value="click" data-tooltip-auto-hide-value="2000" class="rounded-md bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500">
        Show for 2s
    </button>
</div>
```

### Manual Control

With `trigger` set to `manual`, nothing is wired automatically — you drive `show`, `hide`, and `toggle` yourself, from your own actions or another controller's event. The tooltip anchors to the controller's element:

```twig
<style>
    .tooltip { position: absolute; top: 0; left: 0; width: max-content; border-radius: .25rem; background: #4c1d95; color: #fff; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; pointer-events: none; z-index: 50; }
    .tooltip-arrow { position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
</style>
<div class="flex min-h-[120px] items-center justify-center">
    <div data-controller="tooltip" data-tooltip-content-value="Toggled by hand" data-tooltip-trigger-value="manual" class="inline-flex gap-2">
        <button type="button" data-action="tooltip#show" class="rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500">Show</button>
        <button type="button" data-action="tooltip#hide" class="rounded-md bg-violet-100 px-3 py-2 text-sm font-medium text-violet-900 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-100 dark:hover:bg-violet-800">Hide</button>
    </div>
</div>
```

## API Reference

### `data-controller="tooltip"`

| Value | Type | Default | Description |
|:------|:-----|:--------|:------------|
| `data-tooltip-content-value` | `String` | - | The text shown inside the tooltip; falls back to the element's `title` when omitted. Any `title` is removed regardless, so the browser's native tooltip never competes with this one. |
| `data-tooltip-placement-value` | `String` | `'top'` | Preferred side of the trigger: `top` (default), `bottom`, `left` or `right`. Flips and shifts to stay in view. |
| `data-tooltip-trigger-value` | `String` | `'hover'` | How the tooltip opens: `hover` (on hover and keyboard focus, the default), `click` (toggle on click), or `manual` (you drive `show`/`hide` yourself). Defaults to `hover`. |
| `data-tooltip-auto-hide-value` | `Number` | - | Delay in milliseconds after which a shown tooltip hides itself; when 0, it stays until `hide`. Defaults to 0. |

| Action | Description |
|:-------|:------------|
| `show` | Shows the tooltip, scheduling an automatic hide when `autoHide` is set. |
| `hide` | Hides the tooltip. |
| `toggle` | Shows the tooltip when hidden, hides it when shown. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/alert.md">
# Alert

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success">
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark">
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

## Installation

```shell
php bin/console ux:install alert --kit flowbite-4
```
## Usage

```twig
<twig:Alert
    variant="brand | danger | success | warning | dark"
    border=" none | bordered | accent"
>
    <twig:block name="icon">
        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
    </twig:block>
    <twig:Alert:Title>Info alert!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="sm">Enable</twig:Button>
    </twig:Alert:Action>
</twig:Alert>
```

## Examples

### Alerts with icon

You can also include a descriptive icon to complement the message inside the alert component with the following example.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

### Borders

Use this example to add a border accent to the alert component instead of just a plain background.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" border="bordered">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

### With List

Use this example to show a list and a description inside an alert component.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert variant="success">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <li>At least 10 characters (and up to 100 characters)</li>
                <li>At least one lowercase character</li>
                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
            </ul>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>

    <twig:Alert variant="warning">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <li>At least 10 characters (and up to 100 characters)</li>
                <li>At least one lowercase character</li>
                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
            </ul>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>

    <twig:Alert variant="danger">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Title>Ensure that these requirements are met:</twig:Alert:Title>
        <twig:Alert:Description>
            <ul class="my-2 list-disc list-outside space-y-1 ps-2.5">
                <li>At least 10 characters (and up to 100 characters)</li>
                <li>At least one lowercase character</li>
                <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
            </ul>
        </twig:Alert:Description>
        <twig:Alert:Action>
            <a href="#">See recommendation here</a>
        </twig:Alert:Action>
    </twig:Alert>
</div>
```

### Dismissing

**Requires Flowbite JS**<br>
Use the following alert elements that are also dismissible.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple info alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple danger alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple success alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple warning alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" dismissible>
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p>A simple dark alert with an <a href="#" class="font-medium">example link</a>. Give it a click if you like.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

### Action

Use `Alert:Action` to add a button or other action element to the alert.

```twig
<twig:Alert class="max-w-xl">
    <twig:block name="icon">
        <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
    </twig:block>
    <twig:Alert:Title>This is an info alert</twig:Alert:Title>
    <twig:Alert:Description>
        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="sm">
            <twig:ux:icon name="flowbite:eye-outline" class="size-3.5 me-1.5" aria-hidden="true" />
            View more
        </twig:Button>
    </twig:Alert:Action>
</twig:Alert>
```

### Border Accent

Use this example to add a border accent on top of the alert component for further visual distinction.

```twig
<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Info alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="danger" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="success" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Success alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="warning" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>

    <twig:Alert variant="dark" border="accent" class="rounded-none">
        <twig:block name="icon">
            <twig:ux:icon name="flowbite:info-circle-outline" class="shrink-0" aria-hidden="true" />
        </twig:block>
        <twig:Alert:Description>
            <p><span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.</p>
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

## API Reference

### `<twig:Alert>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'brand'\|'danger'\|'success'\|'warning'\|'dark'` | `'brand'` | The visual style variant. |
| `border` | `'none'\|'bordered'\|'accent'` | `'none'` | The visual border style. |
| `dismissible` | `boolean` | `false` | Whether the alert can be dismissible. |

| Block | Description |
|:------|:------------|
| `content` | The alert content, typically includes `Alert:Title` and `Alert:Description`. |
| `icon` | The alert icon, typically includes `twig:ux:icon`. |
### `<twig:Alert:Action>`

| Block | Description |
|:------|:------------|
| `content` | The action element, typically a button or link. |
### `<twig:Alert:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text of the alert. |
### `<twig:Alert:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the alert. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/avatar.md">
# Avatar

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

```twig
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>
```

## Installation

```shell
php bin/console ux:install avatar --kit flowbite-4
```
## Usage

```twig
<twig:Avatar
    size="xs | sm | md | lg | xl | 2xl"
    shape="circle | rounded"
    border="none | bordered"
>
    <twig:Avatar:Image src="https://example.com/avatar.jpg" alt="User avatar" />
    <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
</twig:Avatar>
```

## Examples

### Bordered

Apply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS.

```twig
<div class="flex items-center justify-center gap-4">
    <twig:Avatar border="bordered">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar border="bordered" shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>
```

### Placeholder

This example can be used to show an icon placeholder or the initials of the user’s first and last name as a placeholder when no profile picture is available.

```twig
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Fallback />
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>
```

### Dot indicator

Use the `Indicator` component relative to the avatar component as an indicator for the user (eg. online or offline status).

```twig
<div class="flex items-center justify-center gap-6">
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute top-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Offline user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -top-1 -right-1 border-2 border-buffer" variant="danger"/>
    </div>
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute bottom-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -bottom-1 -right-1 border-2 border-buffer" variant="success"/>
    </div>
</div>
```

### Stacked

Use `Avatar:Group` if you want to stack a group of users by overlapping the avatar components.

```twig
<div class="flex flex-col items-center gap-6">
    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-4.jpg" alt="" />
            <twig:Avatar:Fallback>RL</twig:Avatar:Fallback>
        </twig:Avatar>
    </twig:Avatar:Group>

    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar:GroupCount as="a" href="#">+99</twig:Avatar:GroupCount>
    </twig:Avatar:Group>
</div>
```

### Avatar with text

This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date

```twig
<div class="flex items-center justify-center gap-2.5">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Jese Leos" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <div class="font-medium text-heading">
        <div>Jese Leos</div>
        <div class="text-sm font-normal text-body">Joined in August 2014</div>
    </div>
</div>
```

### User dropdown

Use this example if you want to show a dropdown menu when clicking on the avatar component.

```twig
<twig:Dropdown id="user-dropdown" placement="bottom-start">
    <twig:Dropdown:Trigger>
        <twig:Avatar class="cursor-pointer" {{ ...dropdown_trigger_attrs }}>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
    </twig:Dropdown:Trigger>

    <twig:Dropdown:Content>
        <twig:Dropdown:Header>
            <div class="font-medium">Bonnie Green</div>
            <div class="truncate">name@flowbite.com</div>
        </twig:Dropdown:Header>
        <twig:Dropdown:Group>
            <twig:Dropdown:Item>Dashboard</twig:Dropdown:Item>
            <twig:Dropdown:Item>Settings</twig:Dropdown:Item>
            <twig:Dropdown:Item>Earnings</twig:Dropdown:Item>
            <twig:Dropdown:Item class="text-fg-danger">Sign out</twig:Dropdown:Item>
        </twig:Dropdown:Group>
    </twig:Dropdown:Content>
</twig:Dropdown>
```

### Sizes

Use the `size` prop to change the avatar dimensions.

```twig
<div class="flex items-center justify-center gap-4">
    <twig:Avatar shape="rounded" size="xs">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="sm">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="md">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Medium" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="lg">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="2xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Big" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>
```

## API Reference

### `<twig:Avatar>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'` | `'md'` | The avatar size. |
| `shape` | `'circle'\|'rounded'` | `'circle'` | The avatar shape. |
| `border` | `'none'\|'bordered'` | `'none'` | Whether to show a ring border. |

| Block | Description |
|:------|:------------|
| `content` | The avatar content, typically `Avatar:Image` and `Avatar:Fallback`. |
### `<twig:Avatar:Fallback>`

| Block | Description |
|:------|:------------|
| `content` | The fallback content displayed when no image is available, typically initials or a placeholder icon. |
### `<twig:Avatar:Group>`

| Block | Description |
|:------|:------------|
| `content` | The grouped avatars, typically multiple `Avatar` components. |
### `<twig:Avatar:GroupCount>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `as` | `string` | `'div'` | The avatar group tag. |

| Block | Description |
|:------|:------------|
| `content` | The count indicator, e.g. "+99". |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/badge.md">
# Badge

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

```twig
<div class="flex justify-center gap-4">
    <twig:Badge variant="brand">Brand</twig:Badge>
    <twig:Badge variant="alternative">Alternative</twig:Badge>
    <twig:Badge variant="gray">Gray</twig:Badge>
    <twig:Badge variant="danger">Danger</twig:Badge>
    <twig:Badge variant="success">Success</twig:Badge>
    <twig:Badge variant="warning">Warning</twig:Badge>
</div>
```

## Installation

```shell
php bin/console ux:install badge --kit flowbite-4
```
## Usage

```twig
<twig:Badge
    variant="brand | alternative | gray | danger | success | warning"
    size="default | lg"
    shape="rounded | pill"
    border="none | bordered"
>
    Badge
</twig:Badge>
```

## Examples

### Bordered badges

This example can be used to add a border accent to the badge component.

```twig
<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" border="bordered">Brand</twig:Badge>
    <twig:Badge variant="alternative" border="bordered">Alternative</twig:Badge>
    <twig:Badge variant="gray" border="bordered">Gray</twig:Badge>
    <twig:Badge variant="danger" border="bordered">Danger</twig:Badge>
    <twig:Badge variant="success" border="bordered">Success</twig:Badge>
    <twig:Badge variant="warning" border="bordered">Warning</twig:Badge>
</div>
```

### Large badges

```twig
<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" size="lg">Brand</twig:Badge>
    <twig:Badge variant="alternative" size="lg">Alternative</twig:Badge>
    <twig:Badge variant="gray" size="lg">Gray</twig:Badge>
    <twig:Badge variant="danger" size="lg">Danger</twig:Badge>
    <twig:Badge variant="success" size="lg">Success</twig:Badge>
    <twig:Badge variant="warning" size="lg">Warning</twig:Badge>
</div>
```

### Pill badges

Use this example to make the corners even more rounded like pills for the badge component.

```twig
<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" shape="pill">Brand</twig:Badge>
    <twig:Badge variant="alternative" shape="pill">Alternative</twig:Badge>
    <twig:Badge variant="gray" shape="pill">Gray</twig:Badge>
    <twig:Badge variant="danger" shape="pill">Danger</twig:Badge>
    <twig:Badge variant="success" shape="pill">Success</twig:Badge>
    <twig:Badge variant="warning" shape="pill">Warning</twig:Badge>
</div>
```

### Badges as link

You can also use badges as anchor elements to link to another page.

```twig
<div class="flex justify-center gap-4">
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="brand" border="bordered">Brand</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="alternative" border="bordered">Alternative</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="gray" border="bordered">Gray</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="danger" border="bordered">Danger</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="success" border="bordered">Success</twig:Badge>
    <twig:Badge as="a" href="https://ux.symfony.com/" target="_blank" variant="warning" border="bordered">Warning</twig:Badge>
</div>
```

### Badges with icon

You can also use [SVG icons](https://ux.symfony.com/icons) inside the badge elements.

```twig
<div class="flex justify-center gap-4">
    <twig:Badge variant="brand" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="alternative" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="gray" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="danger" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="success" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
    <twig:Badge variant="warning" border="bordered"><twig:ux:icon name="flowbite:clock-outline" class="h-3 w-3 me-1" aria-hidden="true"/> 2 min ago</twig:Badge>
</div>
```

## API Reference

### `<twig:Badge>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'brand'\|'alternative'\|'gray'\|'danger'\|'success'\|'warning'` | `'brand'` | The visual style variant. |
| `size` | `'default'\|'lg'` | `'default'` | The badge size. |
| `shape` | `'rounded'\|'pill'` | `'rounded'` | The badge shape. |
| `border` | `'none'\|'bordered'` | `'none'` | The badge border. |
| `as` | `'div'` | `'div'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The badge label or content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/button-group.md">
# Button Group

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

```twig
<twig:ButtonGroup>
    <twig:Button variant="tertiary" size="sm">Profile</twig:Button>
    <twig:Button variant="tertiary" size="sm">Settings</twig:Button>
    <twig:Button variant="tertiary" size="sm">Messages</twig:Button>
</twig:ButtonGroup>
```

## Installation

```shell
php bin/console ux:install button-group --kit flowbite-4
```
## Usage

```twig
<twig:ButtonGroup>
    <twig:Button variant="tertiary">One</twig:Button>
    <twig:Button variant="tertiary">Two</twig:Button>
</twig:ButtonGroup>
```

## Accessibility

- The `ButtonGroup` component has the `role` attribute set to `group`.
- Use `Tab` to navigate between the buttons in the group.

## Examples

### Orientation

```twig
<twig:ButtonGroup orientation="vertical" class="w-56">
    <twig:Button variant="tertiary">Profile</twig:Button>
    <twig:Button variant="tertiary">Settings</twig:Button>
    <twig:Button variant="tertiary">Messages</twig:Button>
</twig:ButtonGroup>
```

### Size

```twig
<div class="flex flex-col items-start gap-8">
    <twig:ButtonGroup>
        <twig:Button variant="tertiary" size="sm">Small</twig:Button>
        <twig:Button variant="tertiary" size="sm">Button</twig:Button>
        <twig:Button variant="tertiary" size="sm">Group</twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="tertiary">Default</twig:Button>
        <twig:Button variant="tertiary">Button</twig:Button>
        <twig:Button variant="tertiary">Group</twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="tertiary" size="lg">Large</twig:Button>
        <twig:Button variant="tertiary" size="lg">Button</twig:Button>
        <twig:Button variant="tertiary" size="lg">Group</twig:Button>
    </twig:ButtonGroup>
</div>
```

## API Reference

### `<twig:ButtonGroup>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The layout direction of the button group. |

| Block | Description |
|:------|:------------|
| `content` | The grouped buttons and/or separators. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/button.md">
# Button

Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

```twig
<div class="space-x-2 space-y-2">
    <twig:Button>Default</twig:Button>
    <twig:Button variant="secondary">Secondary</twig:Button>
    <twig:Button variant="tertiary">Tertiary</twig:Button>
    <twig:Button variant="success">Success</twig:Button>
    <twig:Button variant="danger">Danger</twig:Button>
    <twig:Button variant="warning">Warning</twig:Button>
    <twig:Button variant="dark">Dark</twig:Button>
    <twig:Button variant="ghost">Ghost</twig:Button>
</div>
```

## Installation

```shell
php bin/console ux:install button --kit flowbite-4
```
## Usage

```twig
<twig:Button
    variant="brand | secondary | tertiary | success | danger | warning | dark | ghost | outline | outline-brand | outline-success | outline-danger | outline-warning"
    size="default | xs | sm | lg | xl | icon | icon-xs | icon-sm"
    shape="rounded | pill"
>
    Button
</twig:Button>
```

## Examples

### Button pills

The button pills can be used as an alternative style by using fully rounded edges.

```twig
<div class="space-x-2 space-y-2">
    <twig:Button shape="pill">Default</twig:Button>
    <twig:Button shape="pill" variant="secondary">Secondary</twig:Button>
    <twig:Button shape="pill" variant="tertiary">Tertiary</twig:Button>
    <twig:Button shape="pill" variant="success">Success</twig:Button>
    <twig:Button shape="pill" variant="danger">Danger</twig:Button>
    <twig:Button shape="pill" variant="warning">Warning</twig:Button>
    <twig:Button shape="pill" variant="dark">Dark</twig:Button>
    <twig:Button shape="pill" variant="ghost">Ghost</twig:Button>
</div>
```

### Outline buttons

Use the following button styles to show the colors only for the border of the element.

```twig
<div class="space-x-2 space-y-2">
    <twig:Button variant="outline">Outline</twig:Button>
    <twig:Button variant="outline-brand">Brand</twig:Button>
    <twig:Button variant="outline-success">Success</twig:Button>
    <twig:Button variant="outline-danger">Danger</twig:Button>
    <twig:Button variant="outline-warning">Warning</twig:Button>
</div>
```

### Button sizes

Use these examples if you want to use smaller or larger buttons.

```twig
<div class="space-x-2 space-y-2">
    <twig:Button size="xs">Extra small</twig:Button>
    <twig:Button size="sm">Small</twig:Button>
    <twig:Button size="default">Base</twig:Button>
    <twig:Button size="lg">Large</twig:Button>
    <twig:Button size="xl">Extra large</twig:Button>
</div>
```

### Button with icon

Use the following examples to add a [SVG icons](https://ux.symfony.com/icons) inside the button either on the left or right side.

```twig
<div class="flex items-center space-x-2">
    <twig:Button>
        <twig:ux:icon name="flowbite:cart-outline" class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true"/>
        Buy now
    </twig:Button>

    <twig:Button>
        Choose plan
        <twig:ux:icon name="flowbite:arrow-right-outline"  class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
    </twig:Button>
</div>
```

### Icon buttons

Sometimes you need a button to indicate an action using only an icon.

```twig
<div class="space-x-2 space-y-2">
    <twig:Button size="icon-xs">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-sm">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-xs" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-sm" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>
</div>
```

### Loader button

Use the following [spinner components](https://ux.symfony.com/toolkit/kits/flowbite-4/components/spinner) from Flowbite to indicate a loader animation inside buttons:

```twig
<div class="space-x-2 space-y-2">
    <twig:Button>
        <twig:Spinner class="me-2" />
        Loading...
    </twig:Button>
</div>
```

## API Reference

### `<twig:Button>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'brand'\|'secondary'\|'tertiary'\|'success'\|'danger'\|'warning'\|'dark'\|'ghost'\|'outline'\|'outline-brand'\|'outline-success'\|'outline-danger'\|'outline-warning'` | `'brand'` | The visual style variant. |
| `size` | `'default'\|'xs'\|'sm'\|'lg'\|'xl'\|'icon'\|'icon-xs'\|'icon-sm'` | `'default'` | The button size. |
| `shape` | `'rounded'\|'pill'` | `'rounded'` | The badge shape. |
| `as` | `'button'` | `'button'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The button label and/or icon. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/card.md">
# Card

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

```twig
<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>
</twig:Card>
```

## Installation

```shell
php bin/console ux:install card --kit flowbite-4
```
## Usage

```twig
<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Card Title</twig:Card:Title>
    </twig:Card:Header>
    <twig:Card:Content>
        <p>Card Content</p>
    </twig:Card:Content>
    <twig:Card:Footer>
        <p>Card Footer</p>
    </twig:Card:Footer>
</twig:Card>
```

## Examples

### Card with button

Use the following example of a card element if you also want to have an action button.

```twig
<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button as="a" href="#">
            Read more
            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>
```

### Card with image

Use this alternative styled card with an image for features, blog posts, and more.

```twig
<twig:Card class="max-w-sm">
    <twig:Card:Header>
        <a href="#">
            <img
                class="rounded-base"
                src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
                alt="Bukchon Hanok Village by Y K" />
        </a>
    </twig:Card:Header>

    <twig:Card:Content>
        <twig:Badge border="bordered" class="mb-2">
            <twig:ux:icon name="flowbite:fire-outline" class="w-3 h-3 me-1" aria-hidden="true"/>
            Trending
        </twig:Badge>
        <a href="#">
            <twig:Card:Title class="mb-2" as="h5">Streamlining your design process today.</twig:Card:Title>
        </a>
        <p>In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.</p>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button variant="secondary" as="a" href="#">
            Read more
            <twig:ux:icon name="flowbite:arrow-right-outline" class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>
```

### Card with form inputs

Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users.

```twig
<twig:Card class="w-full max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title as="h5">Sign in to our platform</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content>
        <div class="mb-4">
            <twig:Label for="email" class="mb-2.5">Your email</twig:Label>
            <twig:Input type="email" id="email" placeholder="example@company.com" required />
        </div>

        <div>
            <twig:Label for="password" class="mb-2.5">Your password</twig:Label>
            <twig:Input type="password" id="password" placeholder="•••••••••" required />
        </div>

        <div class="flex items-start mt-6">
            <div class="flex items-center">
                <twig:Checkbox id="checkbox-remember" value="" />
                <twig:Label for="checkbox-remember" class="ms-2">Remember me</twig:Label>
            </div>
            <a href="#" class="ms-auto text-sm font-medium text-fg-brand hover:underline">Lost Password?</a>
        </div>
    </twig:Card:Content>

    <twig:Card:Footer>
        <twig:Button type="submit" class="w-full mb-3">
            Login to your account
        </twig:Button>

        <div class="text-sm font-medium text-body">Not registered? <a href="#" class="text-fg-brand hover:underline">Create account</a></div>
    </twig:Card:Footer>
</twig:Card>
```

## API Reference

### `<twig:Card>`

| Block | Description |
|:------|:------------|
| `content` | The card content, typically includes `Card:Content` with `Card:Header`, and/or `Card:Footer`. |
### `<twig:Card:Content>`

| Block | Description |
|:------|:------------|
| `content` | The main content area of the card. |
### `<twig:Card:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains actions or additional information. |
### `<twig:Card:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Card:Title`. |
### `<twig:Card:Title>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `as` | `string` | `'span'` | The HTML tag used to render the title. |

| Block | Description |
|:------|:------------|
| `content` | The title text of the card. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/checkbox.md">
# Checkbox

The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.

```twig
<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Checkbox id="default"/>
        <twig:Label for="default" class="select-none ms-2 font-medium">Default checkbox</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Checkbox id="checked" checked/>
        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install checkbox --kit flowbite-4
```
## Usage

```twig
<twig:Checkbox />
```

## Examples

### Disabled

This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.

```twig
<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Checkbox id="default" disabled/>
        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default checkbox</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Checkbox id="checked" checked disabled/>
        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
    </div>
</div>
```

### Bordered

This example can be used to create a checkbox component with a bordered style, a description text and an icon.

```twig
<div class="grid gap-6 md:grid-cols-2">

    <div class="flex items-center mb-4">
        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
            </div>
            <twig:Checkbox id="default" class="mt-4 me-4"/>
        </twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
            </div>
            <twig:Checkbox id="checked" class="mt-4 me-4" checked/>
        </twig:Label>
    </div>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/dropdown.md">
# Dropdown

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

```twig
<div style="min-height: 304px">
    <twig:Dropdown id="demo" open>
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

## Installation

```shell
php bin/console ux:install dropdown --kit flowbite-4
```
## Usage

```twig
<twig:Dropdown
    id="string"
    open="true | false"
    placement="right | left | top | bottom | right-start | right-end | left-start | left-end | top-start | top-end | bottom-start | bottom-end"
    triggerType="click | hover"
    delay="300"
    offsetDistance="10"
>
    <twig:Dropdown:Trigger>
        <twig:Button {{ ...dropdown_trigger_attrs }}>
            Dropdown
            <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
        </twig:Button>
    </twig:Dropdown:Trigger>

    <twig:Dropdown:Content>
        <twig:Dropdown:Header>
            <span class="block text-sm text-heading font-medium">Bonnie Green</span>
            <span class="block text-sm truncate">name@flowbite.com</span>
        </twig:Dropdown:Header>
        <twig:Dropdown:Group>
            <twig:Dropdown:Item as="a" href="#">Link item</twig:Dropdown:Item>
            <twig:Dropdown:Item as="button">Button item</twig:Dropdown:Item>
            <twig:Dropdown:Sub
                id="string"
                placement="right | left | top | bottom | right-start | right-end | left-start | left-end | top-start | top-end | bottom-start | bottom-end"
                triggerType="click | hover"
                delay="300"
                offsetDistance="10"
            >
                <twig:Dropdown:SubTrigger>
                    Sub menu
                </twig:Dropdown:SubTrigger>

                <twig:Dropdown:Content>
                    <twig:Dropdown:Group>
                        <twig:Dropdown:Item href="#">Sub item</twig:Dropdown:Item>
                        <twig:Dropdown:Item href="#">Sub item</twig:Dropdown:Item>
                    </twig:Dropdown:Group>
                </twig:Dropdown:Content>
            </twig:Dropdown:Sub>
        </twig:Dropdown:Group>
    </twig:Dropdown:Content>
</twig:Dropdown>
```

## Examples

### Dropdown hover

Use the `̀triggerType="{hover|click}"` prop options to set whether the dropdown should be shown when hovering or clicking on the trigger element (ie. button).

There’s a 300ms default delay when showing or hiding the dropdown due to UI/UX reasons and how it may affect the interaction with other components on the page. Generally, we recommend using the `click` method.

```twig
<div style="min-height: 304px">
    <twig:Dropdown id="hover" triggerType="hover">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

#### Delay duration

You can use the `delay={milliseconds}` prop options to set the delay on when to show or hide the dropdown menu when using hover. You may want to use this depending on how the users interact with your interface.
In this example we add 500 milliseconds instead of the default 300.

```twig
<div style="min-height: 304px">
    <twig:Dropdown id="delay" triggerType="hover" delay="500">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

### Dropdown divider

You can use multiple `Dropdown:Group`, the `Dropdown:Content` add a divider between the groups.

```twig
<div style="min-height: 504px">
    <twig:Dropdown id="divider">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Separated link</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

### With header

Use this example to show extra information outside of the list of menu items inside the dropdown.

```twig
<div style="min-height: 504px">
    <twig:Dropdown id="header">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Header class="flex items-center space-x-1.5">
                <twig:Avatar>
                    <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bonnie image" />
                    <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
                </twig:Avatar>
                <div class="text-sm">
                    <div class="font-medium text-heading">Bonnie Green</div>
                    <div class="truncate text-body">name@flowbite.com</div>
                </div>
                <twig:Badge border="bordered">PRO</twig:Badge>
            </twig:Dropdown:Header>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:user-outline" class="size-4 me-2" aria-hidden="true" />
                    Dashboard
                </twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:adjustments-horizontal-outline" class="size-4 me-2" aria-hidden="true" />
                    Settings
                </twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:lock-outline" class="size-4 me-2" aria-hidden="true" />
                    Privacy
                </twig:Dropdown:Item>
            </twig:Dropdown:Group>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item class="text-fg-danger" href="#">
                    <twig:ux:icon name="flowbite:arrow-left-to-bracket-outline" class="size-4 me-2" aria-hidden="true" />
                    Sign out
                </twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

### Multi-level dropdown

Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.

```twig
<div style="min-height: 504px">
    <twig:Dropdown id="demo" open>
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Sub id="level1">
                    <twig:Dropdown:SubTrigger>
                        Settings
                    </twig:Dropdown:SubTrigger>

                    <twig:Dropdown:Content>
                        <twig:Dropdown:Group>
                            <twig:Dropdown:Item href="#">Submenu item</twig:Dropdown:Item>
                            <twig:Dropdown:Item href="#">Submenu item</twig:Dropdown:Item>
                        </twig:Dropdown:Group>
                    </twig:Dropdown:Content>
                </twig:Dropdown:Sub>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

### With icon

Use the menu icon trigger element on components such as cards as an alternative element to the button.

```twig
<div style="min-height: 304px">
    <div class="flex justify-center space-x-4 rtl:space-x-reverse">
        <twig:Dropdown id="icon-vt">
            <twig:Dropdown:Trigger>
                <twig:Button variant="ghost" size="icon" {{ ...dropdown_trigger_attrs }}>
                    <twig:ux:icon name="flowbite:dots-vertical-outline" class="size-6" aria-hidden="true"/>
                </twig:Button>
            </twig:Dropdown:Trigger>

            <twig:Dropdown:Content>
                <twig:Dropdown:Group>
                    <twig:Dropdown:Item href="#">
                        Dashboard
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Settings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Earnings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Sign out
                    </twig:Dropdown:Item>
                </twig:Dropdown:Group>
            </twig:Dropdown:Content>
        </twig:Dropdown>

        <twig:Dropdown id="icon-hz">
            <twig:Dropdown:Trigger>
                <twig:Button variant="ghost" size="icon" {{ ...dropdown_trigger_attrs }}>
                    <twig:ux:icon name="flowbite:dots-horizontal-outline" class="size-6" aria-hidden="true"/>
                </twig:Button>
            </twig:Dropdown:Trigger>

            <twig:Dropdown:Content>
                <twig:Dropdown:Group>
                    <twig:Dropdown:Item href="#">
                        Dashboard
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Settings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Earnings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Sign out
                    </twig:Dropdown:Item>
                </twig:Dropdown:Group>
            </twig:Dropdown:Content>
        </twig:Dropdown>
    </div>
</div>
```

### Placement

You can also use the `placement={top|right|bottom|left}` prop options to choose the placement of the dropdown menu.
By default the positioning is set to the bottom side of the button.

```twig
<div class="flex flex-wrap items-center gap-4" style="min-height: 304px">
    <twig:Dropdown id="placement-top" placement="top">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown top
                <twig:ux:icon name="flowbite:chevron-up-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-right" placement="right">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown right
                <twig:ux:icon name="flowbite:chevron-right-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-bottom" placement="bottom">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown bottom
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-left" placement="left">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                <twig:ux:icon name="flowbite:chevron-left-outline" class="size-6" aria-hidden="true" />
                Dropdown left
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>
```

## API Reference

### `<twig:Dropdown>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier for generating internal IDs. |
| `open` | `boolean` | `false` | Whether the dropdown is open on initial render. |
| `placement` | `'bottom'\|'top'\|'left'\|'right'\|'left-start'\|'left-end'\|'right-start'\|'right-end'\|'bottom-start'\|'bottom-end'\|'top-start'\|'top-end'` | `'bottom'` | The dropdown placement relative to the trigger. |
| `triggerType` | `'click'\|'hover'` | `'click'` | The dropdown trigger type. |
| `delay` | `int` | `300` | The dropdown delay. |
| `offsetDistance` | `int` | `10` | The dropdown content offset. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown structure (Dropdown:Trigger and Dropdown:Content). |
### `<twig:Dropdown:Content>`

| Block | Description |
|:------|:------------|
| `content` | The dropdown menu content, typically includes `Dropdown:Group`, `Dropdown:Header`. |
### `<twig:Dropdown:Group>`

| Block | Description |
|:------|:------------|
| `content` | The list of `Dropdown:Item` elements. |
### `<twig:Dropdown:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header content (e.g., user name, email). |
### `<twig:Dropdown:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `as` | `string` | `'a'` | The item tag. |

| Block | Description |
|:------|:------------|
| `content` | The item label. |
### `<twig:Dropdown:Sub>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier for generating internal IDs. |
| `placement` | `'bottom'\|'top'\|'left'\|'right'\|'left-start'\|'left-end'\|'right-start'\|'right-end'\|'bottom-start'\|'bottom-end'\|'top-start'\|'top-end'` | `'right-start'` | The dropdown placement relative to the trigger. |
| `triggerType` | `'click'\|'hover'` | `'click'` | The dropdown trigger type. |
| `delay` | `int` | `300` | The dropdown delay. |
| `offsetDistance` | `int` | `10` | The dropdown content offset. |

| Block | Description |
|:------|:------------|
| `content` | The dropdown structure (Dropdown:SubTrigger and Dropdown:Content). |
### `<twig:Dropdown:SubTrigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger label that toggles the sub dropdown when clicked. |
### `<twig:Dropdown:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger element (e.g., a `Button`) that toggles the dropdown when clicked. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/indicator.md">
# Indicator

Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS

```twig
<div class="flex justify-center gap-4">
    <twig:Indicator variant="brand" />
    <twig:Indicator variant="gray" />
    <twig:Indicator variant="danger" />
    <twig:Indicator variant="success" />
    <twig:Indicator variant="warning" />
</div>
```

## Installation

```shell
php bin/console ux:install indicator --kit flowbite-4
```
## Usage

```twig
<twig:Indicator
    variant="brand | gray | danger | success | warning"
>
    Value
</twig:Indicator>
```

## Examples

### Count indicator

This example can be used to show a number count inside the indicator and position it relative to a button component.

```twig
<twig:Button class="relative">
    <twig:ux:icon name="flowbite:inbox-full-outline" class="size-4 me-1.5 -ms-0.5" aria-hidden="true" />
    <span class="sr-only">Notifications</span>
    Messages
    <twig:Indicator variant="danger" size="lg" class="absolute -top-2 -end-2 border-2 border-buffer">8</twig:Indicator>
</twig:Button>
```

## API Reference

### `<twig:Indicator>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'brand'\|'gray'\|'danger'\|'success'\|'warning'` | `'brand'` | The visual style variant. |
| `size` | `'default'\|'lg'` | `'default'` | The badge size. |

| Block | Description |
|:------|:------------|
| `content` | The value. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/input.md">
# Input

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

```twig
<form>
    <div class="grid gap-6 mb-6 md:grid-cols-2">
        <div>
            <twig:Label for="first_name">First name</twig:Label>
            <twig:Input id="first_name" type="text" placeholder="John" required />
        </div>
        <div>
            <twig:Label for="last_name">Last name</twig:Label>
            <twig:Input id="last_name" type="text" placeholder="Doe" required />
        </div>
        <div>
            <twig:Label for="company">Company</twig:Label>
            <twig:Input id="company" type="text" placeholder="Flowbite" required />
        </div>
        <div>
            <twig:Label for="phone">Phone number</twig:Label>
            <twig:Input id="phone" type="tel" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required />
        </div>
        <div>
            <twig:Label for="website">Website URL</twig:Label>
            <twig:Input id="website" type="url" placeholder="flowbite.com" required />
        </div>
        <div>
            <twig:Label for="visitors">Unique visitors (per month)</twig:Label>
            <twig:Input id="visitors" type="number" required />
        </div>
    </div>
    <div class="mb-6">
        <twig:Label for="email">Email address</twig:Label>
        <twig:Input type="email" id="email" placeholder="john.doe@company.com" required />
    </div>
    <div class="mb-6">
        <twig:Label for="password">Password</twig:Label>
        <twig:Input type="password" id="password" placeholder="•••••••••" required />
    </div>
    <div class="mb-6">
        <twig:Label for="confirm_password">Confirm password</twig:Label>
        <twig:Input type="password" id="confirm_password" placeholder="•••••••••" required />
    </div>
    <twig:Button type="submit">Submit</twig:Button>
</form>
```

## Installation

```shell
php bin/console ux:install input --kit flowbite-4
```
## Usage

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

## Examples

### Disabled

Get started with this example if you want to apply the disabled state to an input field.

```twig
<div class="space-y-6">
    <twig:Input type="text" value="Disabled input" disabled class="max-w-sm" />
    <twig:Input type="text" value="Disabled readonly input" disabled readonly class="max-w-sm" />
</div>
```

### Invalid

Use the following example to apply validation styles for error messages.

```twig
<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Label for="text" variant="invalid">Your name</twig:Label>
    <twig:Input type="text" id="text" aria-invalid="true" placeholder="Error input" />
    <p class="text-sm text-fg-danger-strong"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
</div>
```

### File

Get started with a simple file input component to let users upload one 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>
```

### With Button

```twig
<div class="relative inline-flex">
    <twig:Input type="text" id="text" placeholder="Search..." class="rounded-e-none" />
    <twig:Button type="button" size="sm" class="rounded-s-0">
        <twig:ux:icon name="tabler:search" class="size-4 me-1" aria-hidden="true" />
        Search
    </twig:Button>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/kbd.md">
# Kbd

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

```twig
<div>
    <twig:Kbd>Shift</twig:Kbd>
    <twig:Kbd>Ctrl</twig:Kbd>
    <twig:Kbd>Tab</twig:Kbd>
    <twig:Kbd>Caps Lock</twig:Kbd>
    <twig:Kbd>Esc</twig:Kbd>
    <twig:Kbd>Spacebar</twig:Kbd>
    <twig:Kbd>Enter</twig:Kbd>
</div>
```

## Installation

```shell
php bin/console ux:install kbd --kit flowbite-4
```
## Usage

```twig
<twig:Kbd>Ctrl</twig:Kbd>
```

## Examples

### Arrow keys

Use this example to show arrow keys inside the KBD styled element.

```twig
<div>
    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-up-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key up</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-down-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key down</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-left-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key left</span>
    </twig:Kbd>

    <twig:Kbd>
        <twig:ux:icon name="flowbite:caret-right-solid" class="h-3 w-3" aria-hidden="true" />
        <span class="sr-only">Arrow key right</span>
    </twig:Kbd>
</div>
```

## API Reference

### `<twig:Kbd>`

| Block | Description |
|:------|:------------|
| `content` | The keyboard key text (e.g., "Ctrl", "⌘", "Enter"). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/label.md">
# Label

A text element that identifies form controls and other content.

```twig
<div>
    <twig:Label for="text">Company</twig:Label>
    <twig:Input id="text" type="text" />
</div>
```

## Installation

```shell
php bin/console ux:install label --kit flowbite-4
```
## Usage

```twig
<twig:Label for="email">Your email address</twig:Label>
```

## API Reference

### `<twig:Label>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'invalid'` | `'default'` | The visual style variant. |

| Block | Description |
|:------|:------------|
| `content` | The label text for a form control. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/modal.md">
# Modal

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

```twig
<div style="min-height: 304px">
    <twig:Modal id="delete_account">
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content>
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="leading-relaxed text-body">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>
```

## Installation

```shell
php bin/console ux:install modal --kit flowbite-4
```
## Usage

```twig
<twig:Modal id="delete_account">
    <twig:Modal:Trigger>
        <twig:Button {{ ...modal_trigger_attrs }}>Open</twig:Button>
    </twig:Modal:Trigger>
    <twig:Modal:Content>
        <twig:Modal:Header>
            <twig:Modal:Title>Are you absolutely sure?</twig:Modal:Title>
        </twig:Modal:Header>
    </twig:Modal:Content>
</twig:Modal>
```

## Examples

### Static modal

Use the prop `backdrop="static"` to prevent the modal from closing when clicking outside of it. This can be used with situations where you want to force the user to choose an option such as a cookie notice or when taking a survey.

```twig
<div style="min-height: 304px">
    <twig:Modal id="delete_account">
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content class="max-w-[600px]" backdrop="static">
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat, velit sit amet interdum auctor, ligula lorem posuere urna, ut lobortis odio odio et leo. Nam scelerisque vel sem vel pulvinar.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>
```

### Pop-up modal

You can use this modal example to show a pop-up decision dialog to your users especially when deleting an item and making sure if the user really wants to do that by double confirming.

```twig
<div style="min-height: 304px">
    <twig:Modal id="share_link">
        <twig:Modal:Trigger>
            <twig:Button variant="outline-danger" {{ ...modal_trigger_attrs }}>Delete</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content class="sm:max-w-md" :showCloseButton="false">

            <twig:Modal:Body class="text-center">
                <twig:ux:icon name="flowbite:exclamation-circle-outline" class="mx-auto size-12 text-fg-disabled" aria-hidden="true" />
                <twig:Modal:Title>Are you sure you want to delete this product from your account?</twig:Modal:Title>
                <div class="flex items-center space-x-4 justify-center">
                    <twig:Button variant="danger">
                        Yes, I'm sure
                    </twig:Button>

                    <twig:Modal:Close>
                        <twig:Button variant="outline" {{ ...modal_close_attrs }}>
                            No, cancel
                        </twig:Button>
                    </twig:Modal:Close>
                </div>
            </twig:Modal:Body>

        </twig:Modal:Content>
    </twig:Modal>
</div>
```

### Opened by default

```twig
<div style="min-height: 304px">
    <twig:Modal id="delete_account" open>
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content>
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="leading-relaxed text-body">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>
```

## API Reference

### `<twig:Modal>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `open` | `boolean` | `false` | Whether the modal is open on initial render. |
| `id` | `string` | - | Unique identifier used to generate internal Modal IDs. |

| Block | Description |
|:------|:------------|
| `content` | The modal structure, typically includes `Modal:Trigger` and `Modal:Content`. |
### `<twig:Modal:Body>`

| Block | Description |
|:------|:------------|
| `content` | The main content area of the moda. |
### `<twig:Modal:Close>`

| Block | Description |
|:------|:------------|
| `content` | The close trigger element (e.g., a `Button`) that closes the modal when clicked. |
### `<twig:Modal:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `showCloseButton` | `boolean` | `true` | Whether to display the close button in the top-right corner. |
| `backdrop` | `'dynamic'\|'static'` | `'dynamic'` | To prevent the modal from closing when clicking outside. |

| Block | Description |
|:------|:------------|
| `content` | The modal content, typically includes `Modal:Header` and optionally `Modal:Footer`. |
### `<twig:Modal:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains action buttons. |
### `<twig:Modal:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Modal:Title` and `Modal:Description`. |
### `<twig:Modal:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the modal. |
### `<twig:Modal:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger element (e.g., a `Button`) that opens the modal when clicked. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/pagination.md">
# Pagination

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

## Installation

```shell
php bin/console ux:install pagination --kit flowbite-4
```
## Usage

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

## Examples

### As icon

The following pagination component example shows how you can use [SVG icons](https://ux.symfony.com/icons) instead of text to show the previous and next pages.

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous asIcon href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next asIcon href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

## API Reference

### `<twig:Pagination>`

| Block | Description |
|:------|:------------|
| `content` | The pagination structure, typically a `Pagination:Content`. |
### `<twig:Pagination:Content>`

| Block | Description |
|:------|:------------|
| `content` | The pagination items, typically multiple `Pagination:Item` components. |
### `<twig:Pagination:Item>`

| Block | Description |
|:------|:------------|
| `content` | The pagination item content, typically a `Pagination:Link`. |
### `<twig:Pagination:Link>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `active` | `boolean` | `false` | Whether this is the current page. |

| Block | Description |
|:------|:------------|
| `content` | The page number or navigation icon. |
### `<twig:Pagination:Next>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `asIcon` | `boolean` | `false` | Whether to render only the chevron icon instead of the text label. |
### `<twig:Pagination:Previous>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `asIcon` | `boolean` | `false` | Whether to render only the chevron icon instead of the text label. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/radio.md">
# Radio

The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.

```twig
<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Radio id="default" value="" name="radio-default"/>
        <twig:Label for="default" class="select-none ms-2 font-medium">Default radio</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Radio id="checked" value="" name="radio-default" checked/>
        <twig:Label for="checked" class="select-none ms-2 font-medium">Checked state</twig:Label>
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install radio --kit flowbite-4
```
## Usage

```twig
<twig:Radio />
```

## Examples

### Disabled

This example can be used for the disabled state of the radio component by applying the disabled attribute to the input element.

```twig
<div class="flex flex-col gap-3">
    <div class="flex items-center mb-4">
        <twig:Radio id="default" value="" name="radio-disabled" disabled/>
        <twig:Label for="default" class="select-none ms-2 font-medium text-fg-disabled">Default radio</twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Radio id="checked" value="" name="radio-disabled" checked disabled/>
        <twig:Label for="checked" class="select-none ms-2 font-medium text-fg-disabled">Checked state</twig:Label>
    </div>
</div>
```

### Bordered

This example can be used to create a radio component with a bordered style, a description text and an icon.

```twig
<div class="grid gap-6 md:grid-cols-2">

    <div class="flex items-center mb-4">
        <twig:Label for="default" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:server-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">16GB unified memory</p>
                <p class="select-none text-sm text-body">Seamlessly handle multitasking, large apps.</p>
            </div>
            <twig:Radio id="default" value="default" class="mt-4 me-4" name="radio-bordered"/>
        </twig:Label>
    </div>

    <div class="flex items-center mb-4">
        <twig:Label for="checked" class="flex justify-between space-x-2.5 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
            <div class="p-4">
                <twig:ux:icon name="flowbite:database-outline" class="w-7 h-7 text-body mb-1.5" aria-hidden="true" />
                <p class="select-none w-full text-sm font-medium text-heading">1TB SSD storage</p>
                <p class="select-none text-sm text-body">Get ultra-fast storage with 1TB of SSD space</p>
            </div>
            <twig:Radio id="checked" value="checked" class="mt-4 me-4" name="radio-bordered" checked/>
        </twig:Label>
    </div>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/select.md">
# Select

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants

```twig
<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries">
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>
```

## Installation

```shell
php bin/console ux:install select --kit flowbite-4
```
## Usage

```twig
<twig:Select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>
```

## Examples

### Multiple

Apply the `multiple` attribute to the select component to allow users to select one or more options.

```twig
<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries" multiple>
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>
```

### Disabled state

Apply the `disabled` attribute to the select component to prevent users from interacting with it.

```twig
<form class="w-full max-w-sm">
    <twig:Label for="countries" class="mb-2.5">Select an option</twig:Label>
    <twig:Select id="countries" disabled>
        <option selected>Choose a country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
        <option value="FR">France</option>
        <option value="DE">Germany</option>
    </twig:Select>
</form>
```

## API Reference

### `<twig:Select>`

| Block | Description |
|:------|:------------|
| `content` | The select options (`<option>` elements). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/skeleton.md">
# Skeleton

Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.

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

## Installation

```shell
php bin/console ux:install skeleton --kit flowbite-4
```
## Usage

```twig
<twig:Skeleton class="h-[20px] w-[100px]" />
```

## Examples

### Card placeholder

Use this example to show a placeholder when loading content inside a card.

```twig
<twig:Card class="animate-pulse" role="status">
    <twig:Card:Header>
        <twig:Skeleton class="flex items-center justify-center h-48 max-w-sm" shape="rounded" role="status">
            <twig:ux:icon name="flowbite:image-outline" class="w-11 h-11 text-fg-disabled" aria-hidden="true" />
            <span class="sr-only">Loading...</span>
        </twig:Skeleton>
    </twig:Card:Header>

    <twig:Card:Content>
        <twig:Skeleton class="h-2.5 w-48 mb-4" />

        <div class="space-y-2.5">
            <twig:Skeleton class="h-2" />
            <twig:Skeleton class="h-2" />
            <twig:Skeleton class="h-2" />
        </div>

        <div class="flex items-center mt-4">
            <twig:ux:icon name="flowbite:user-circle-outline" class="w-8 h-8 text-fg-disabled me-3" aria-hidden="true" />
            <div>
                <twig:Skeleton class="h-2.5 w-32 mb-2" />
                <twig:Skeleton class="w-48 h-2" />
            </div>
        </div>
        <span class="sr-only">Loading...</span>
    </twig:Card:Content>
</twig:Card>
```

## API Reference

### `<twig:Skeleton>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `shape` | `'rounded'\|'pill'` | `'pill'` | The badge shape. |

| Block | Description |
|:------|:------------|
| `content` | The content rendered inside the skeleton placeholder. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/spinner.md">
# Spinner

An indicator that can be used to show a loading state.

```twig
<twig:Spinner class="size-10" />
```

## Installation

```shell
php bin/console ux:install spinner --kit flowbite-4
```
## Usage

```twig
<twig:Button disabled>
    <twig:Spinner /> Please wait
</twig:Button>
```

## Examples

### Size

Change the size of the spinner component using the `h-{*}` and `w-{*}` or `size-{*}` utility classes from Tailwind CSS:

```twig
<div class="flex items-center gap-6">
    <twig:Spinner />
    <twig:Spinner class="size-6" />
    <twig:Spinner class="size-8" />
</div>
```

### Color

You can change the colors of the spinner element using the fill and color utility classes from Tailwind CSS:<br>
use `text-{*}` to change the main colors

```twig
<div class="flex items-center gap-6">
    <twig:Spinner class="text-brand size-8" />
    <twig:Spinner class="text-danger size-8" />
    <twig:Spinner class="text-success size-8" />
    <twig:Spinner class="text-warning size-8" />
</div>
```

### Alignment

Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:

```twig
<div class="w-full">
    <div class="text-left rtl:text-right">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="text-center">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="text-right rtl:text-left">
        <div role="status">
            <twig:Spinner class="size-8 inline" />
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>
```

### Spinner with card

Use this animated loading indicator when content inside of a card is still loading.

```twig
<twig:Card class="max-w-sm relative">
    <twig:Card:Header class="opacity-20">
        <twig:Card:Title as="h5">Noteworthy technology acquisitions 2021</twig:Card:Title>
    </twig:Card:Header>

    <twig:Card:Content class="opacity-20">
        <p>Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.</p>
    </twig:Card:Content>

    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
        <twig:Spinner class="size-8 text-brand"/>
        <span class="sr-only">Loading...</span>
    </div>
</twig:Card>
```

### Progress spinner

Use this animated spinner component inside a list of steppers elements.

```twig
<div>
    <h2 class="mb-4 text-lg font-medium text-heading">Converting your image:</h2>
    <ul class="max-w-md space-y-3 text-body list-inside">
        <li class="flex items-center">
            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
            Upload your file to our website
        </li>
        <li class="flex items-center">
            <twig:ux:icon name="flowbite:check-circle-outline" class="size-5 text-fg-success shrink-0 me-2" />
            Choose your file format
        </li>
        <li class="flex items-center">
            <div role="status">
                <twig:Spinner class="size-4 text-brand me-2"/>
                <span class="sr-only">Loading...</span>
            </div>
            Preparing your file
        </li>
    </ul>
</div>
```

### Buttons

The spinner component can also be used inside elements such as buttons when submitting form data:

```twig
<div>
    <twig:Button variant="tertiary">
        <twig:Spinner class="me-2 text-brand" />
        Loading...
    </twig:Button>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/table.md">
# Table

Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells

```twig
{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
    <twig:Table>
        <twig:Table:Caption>
            Our products
            <p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
        </twig:Table:Caption>
        <twig:Table:Header class="border-t">
            <twig:Table:Row>
                <twig:Table:Head>Product name</twig:Table:Head>
                <twig:Table:Head>Color</twig:Table:Head>
                <twig:Table:Head>Category</twig:Table:Head>
                <twig:Table:Head>Price</twig:Table:Head>
                <twig:Table:Head>Stock</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body>
            {% for product in products %}
                <twig:Table:Row>
                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
                </twig:Table:Row>
            {% endfor %}
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
                <twig:Table:Cell>$5997</twig:Table:Cell>
                <twig:Table:Cell>775</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>
```

## Installation

```shell
php bin/console ux:install table --kit flowbite-4
```
## Usage

```twig
<twig:Table>
    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head>Invoice</twig:Table:Head>
            <twig:Table:Head>Status</twig:Table:Head>
            <twig:Table:Head>Method</twig:Table:Head>
            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        <twig:Table:Row>
            <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
            <twig:Table:Cell>Paid</twig:Table:Cell>
            <twig:Table:Cell>Credit Card</twig:Table:Cell>
            <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Body>
</twig:Table>
```

## Examples

### Highlight striped

Use this example to increase the readability of the data sets by alternating the background color of every second table row.

```twig
{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<div class="w-full relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
    <twig:Table>
        <twig:Table:Header>
            <twig:Table:Row>
                <twig:Table:Head>Product name</twig:Table:Head>
                <twig:Table:Head>Color</twig:Table:Head>
                <twig:Table:Head>Category</twig:Table:Head>
                <twig:Table:Head>Price</twig:Table:Head>
                <twig:Table:Head>Stock</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body highlight="striped">
            {% for product in products %}
                <twig:Table:Row>
                    <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                    <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                    <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
                </twig:Table:Row>
            {% endfor %}
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
                <twig:Table:Cell>$5997</twig:Table:Cell>
                <twig:Table:Cell>775</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>
```

### Without border

Use this example of a table component without any border between the table cells.

```twig
{%- set products = [
    {name: 'Apple MacBook Pro 17"', color: 'Silver', category: 'Laptop', price: '$2999', stock: 231},
    {name: 'Microsoft Surface Pro', color: 'White', category: 'Laptop PC', price: '$1999', stock: 423},
    {name: 'Magic Mouse 2', color: 'Black', category: 'Accessories', price: '$99', stock: 121},
] -%}
<twig:Table borderless>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head>Product name</twig:Table:Head>
            <twig:Table:Head>Color</twig:Table:Head>
            <twig:Table:Head>Category</twig:Table:Head>
            <twig:Table:Head>Price</twig:Table:Head>
            <twig:Table:Head>Stock</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        {% for product in products %}
            <twig:Table:Row>
                <twig:Table:Head scope="row" class="font-medium text-heading whitespace-nowrap">{{ product.name }}</twig:Table:Head>
                <twig:Table:Cell>{{ product.color }}</twig:Table:Cell>
                <twig:Table:Cell>{{ product.category }}</twig:Table:Cell>
                <twig:Table:Cell>{{ product.price }}</twig:Table:Cell>
                <twig:Table:Cell>{{ product.stock }}</twig:Table:Cell>
            </twig:Table:Row>
        {% endfor %}
    </twig:Table:Body>
    <twig:Table:Footer>
        <twig:Table:Row>
            <twig:Table:Head scope="row" class="text-base" colspan="3">Total</twig:Table:Head>
            <twig:Table:Cell>$5997</twig:Table:Cell>
            <twig:Table:Cell>775</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Footer>
</twig:Table>
```

## API Reference

### `<twig:Table>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `borderless` | `boolean` | `false` | Whether to hide the table borders. |

| Block | Description |
|:------|:------------|
| `content` | The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer`. |
### `<twig:Table:Body>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `highlight` | `'none'\|'hover'\|'striped'` | `'hover'` | The visual row style highlight. |

| Block | Description |
|:------|:------------|
| `content` | The table body rows, typically `Table:Row` components. |
### `<twig:Table:Caption>`

| Block | Description |
|:------|:------------|
| `content` | The table caption text. |
### `<twig:Table:Cell>`

| Block | Description |
|:------|:------------|
| `content` | The cell content. |
### `<twig:Table:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The table footer rows, typically `Table:Row` components. |
### `<twig:Table:Head>`

| Block | Description |
|:------|:------------|
| `content` | The header cell content. |
### `<twig:Table:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header row(s), typically a `Table:Row` with `Table:Head` cells. |
### `<twig:Table:Row>`

| Block | Description |
|:------|:------------|
| `content` | The row cells, typically `Table:Cell` or `Table:Head` components. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/tabs.md">
# Tabs

Use the following default tabs component example to show a list of links that the user can navigate from on your website.

```twig
<twig:Tabs defaultValue="profile" class="max-w-xl w-full">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
    </twig:Tabs:List>
    <twig:Tabs:Content value="profile">
        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="dashboard">
        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="settings">
        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="contact">
        <div class="p-4 bg-neutral-secondary text-medium text-body rounded-base w-full">
            <p class="text-sm text-body">This is some placeholder content the <strong class="font-medium text-heading">Contact tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </twig:Tabs:Content>
</twig:Tabs>
```

## Installation

```shell
php bin/console ux:install tabs --kit flowbite-4
```
## Usage

```twig
<twig:Tabs defaultValue="account" class="w-[400px]">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
    </twig:Tabs:List>
    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
</twig:Tabs>
```

## Examples

### Tabs with underline

Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

```twig
<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
    <twig:Tabs:List variant="line">
        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Tabs with icons

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.

```twig
<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
    <twig:Tabs:List variant="line">
        <twig:Tabs:Trigger value="profile">
            <twig:ux:icon name="flowbite:user-circle-outline" class="size-4 me-2" aria-hidden="true"/>
            Profile
        </twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="dashboard">
            <twig:ux:icon name="flowbite:grid-outline" class="size-4 me-2" aria-hidden="true"/>
            Dashboard
        </twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">
            <twig:ux:icon name="flowbite:adjustments-vertical-outline" class="size-4 me-2" aria-hidden="true"/>
            Settings
        </twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="contacts">
            <twig:ux:icon name="flowbite:user-headset-outline" class="size-4 me-2" aria-hidden="true"/>
            Contacts
        </twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="disabled" disabled>
            Disabled
        </twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Pills tabs

If you want to use pills as a style for the tabs component you can do so by using this example.

```twig
<twig:Tabs defaultValue="dashboard" class="max-w-[800px] w-full">
    <twig:Tabs:List variant="pill">
        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="contacts">Contacts</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Vertical

Use this example to show a vertically aligned set of tabs on the left side of the page.

```twig
<twig:Tabs defaultValue="profile" orientation="vertical" class="max-w-xl w-full">
    <twig:Tabs:List variant="pill">
        <twig:Tabs:Trigger value="profile">Profile</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="dashboard">Dashboard</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="contact">Contact</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="disabled" disabled>Disabled</twig:Tabs:Trigger>
    </twig:Tabs:List>
    <twig:Tabs:Content value="profile">
        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
            <h3 class="text-lg font-semibold text-heading mb-4">Profile Tab</h3>
            <p class="mb-2">This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.</p>
            <p>The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="dashboard">
        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
            <h3 class="text-lg font-semibold text-heading mb-4">Dashboard Tab</h3>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="settings">
        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
            <h3 class="text-lg font-semibold text-heading mb-4">Settings Tab</h3>
        </div>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="contact">
        <div class="p-6 bg-neutral-secondary text-medium text-body rounded-base w-full h-full">
            <h3 class="text-lg font-semibold text-heading mb-4">Contact Tab</h3>
        </div>
    </twig:Tabs:Content>
</twig:Tabs>
```

## API Reference

### `<twig:Tabs>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `defaultValue` | `string` | `''` | Define the open Tabs at initial rendering. |
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | Define the visual orientation. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `string` | - | Unique suffix identifier for generating Tabs internal IDs. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:List>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'line'` | `'default'` | The visual style variant. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:Trigger>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `string` | - | Unique suffix identifier for generating Tabs internal IDs. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/textarea.md">
# Textarea

The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.

```twig
<form class="w-full">
    <twig:Label for="message" class="mb-2.5">Your message</twig:Label>
    <twig:Textarea id="message" rows="4" placeholder="Write your thoughts here..." />
</form>
```

## Installation

```shell
php bin/console ux:install textarea --kit flowbite-4
```
## Usage

```twig
<twig:Textarea />
```

## Examples

### Comment Box

Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

```twig
<form class="w-full">
    <div class="w-full mb-4 border border-default-medium rounded-base bg-neutral-secondary-medium shadow-xs">
        <div class="px-4 py-2 bg-neutral-secondary-medium rounded-t-base">
            <label for="comment" class="sr-only">Your comment</label>
            <twig:Textarea id="comment" rows="4" class="px-0 border-0 shadow-none focus:ring-0" placeholder="Write a comment..." required />
        </div>
        <div class="flex items-center px-3 py-2 border-t border-default-medium">
            <twig:Button type="submit" size="sm">Post comment</twig:Button>
            <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                    <twig:ux:icon name="flowbite:face-grin-outline" class="size-5" aria-hidden="true" />
                    <span class="sr-only">Add emoji</span>
                </twig:Button>
                <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                    <twig:ux:icon name="flowbite:paper-clip-outline" class="size-5" aria-hidden="true" />
                    <span class="sr-only">Attach file</span>
                </twig:Button>
                <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                    <twig:ux:icon name="flowbite:map-pin-alt-outline" class="size-5" aria-hidden="true" />
                    <span class="sr-only">Set location</span>
                </twig:Button>
                <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                    <twig:ux:icon name="flowbite:file-image-outline" class="size-5" aria-hidden="true" />
                    <span class="sr-only">Upload image</span>
                </twig:Button>
            </div>
        </div>
    </div>
</form>
```

### WYSIWYG Editor

Use this example to add action buttons alongside a textarea for rich text editing capabilities.

```twig
<form class="w-full">
    <div class="w-full mb-4 border border-default-medium rounded-base bg-neutral-secondary-medium shadow-xs">
        <div class="flex items-center justify-between px-3 py-2 border-b border-default-medium">
            <div class="flex flex-wrap items-center divide-default-medium sm:divide-x sm:rtl:divide-x-reverse">
                <div class="flex items-center space-x-1 rtl:space-x-reverse sm:pe-4">
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:paper-clip-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Attach file</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:map-pin-alt-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Embed map</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:file-image-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Upload image</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:file-code-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Format code</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:face-grin-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Add emoji</span>
                    </twig:Button>
                </div>
                <div class="flex flex-wrap items-center space-x-1 rtl:space-x-reverse sm:ps-4">
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:ordered-list-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Add list</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:adjustments-vertical-outline" class="size-5"
                                      aria-hidden="true"/>
                        <span class="sr-only">Settings</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:calendar-edit-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Timeline</span>
                    </twig:Button>
                    <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                        <twig:ux:icon name="flowbite:download-outline" class="size-5" aria-hidden="true"/>
                        <span class="sr-only">Download</span>
                    </twig:Button>
                </div>
            </div>
            <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
                <twig:ux:icon name="flowbite:expand-outline" class="size-5" aria-hidden="true"/>
                <span class="sr-only">Full screen</span>
            </twig:Button>
        </div>
        <div class="px-4 py-2 bg-neutral-secondary-medium rounded-b-base">
            <label for="editor" class="sr-only">Publish post</label>
            <twig:Textarea id="editor" rows="8" class="px-0 border-0 shadow-none focus:ring-0"
                           placeholder="Write an article..." required/>
        </div>
    </div>
    <twig:Button type="submit">Publish post</twig:Button>
</form>
```

### Chatroom Input

If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.

```twig
<form class="w-full">
    <label for="chat" class="sr-only">Your message</label>
    <div class="flex items-center px-3 py-2 rounded-base bg-neutral-secondary-soft">
        <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
            <twig:ux:icon name="flowbite:paper-clip-outline" class="size-5" aria-hidden="true" />
            <span class="sr-only">Attach file</span>
        </twig:Button>
        <twig:Button type="button" size="icon-sm" variant="ghost" class="shrink-0 text-body cursor-pointer hover:bg-neutral-tertiary-medium hover:text-heading">
            <twig:ux:icon name="flowbite:file-image-outline" class="size-5" aria-hidden="true" />
            <span class="sr-only">Upload image</span>
        </twig:Button>
        <twig:Textarea id="chat" rows="1" class="mx-4 bg-neutral-primary-medium py-2.5 px-3" placeholder="Your message..." />
        <twig:Button type="button" size="icon" variant="ghost" class="shrink-0 text-fg-brand rounded-full cursor-pointer hover:bg-brand-softer">
            <twig:ux:icon name="flowbite:paper-plane-outline" class="size-6 rotate-90 rtl:-rotate-90" aria-hidden="true" />
            <span class="sr-only">Send message</span>
        </twig:Button>
    </div>
</form>
```

## API Reference

### `<twig:Textarea>`

| Block | Description |
|:------|:------------|
| `content` | The initial textarea value. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/flowbite-4/components/toggle.md">
# Toggle

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors

```twig
<twig:Toggle id="checked" value="" checked>
    Toggle me
</twig:Toggle>
```

## Installation

```shell
php bin/console ux:install toggle --kit flowbite-4
```
## Usage

```twig
<twig:Toggle>
    Label
</twig:Toggle>
```

## Examples

### Disabled

Apply the disabled attribute to disallow the users from making any further selections.

```twig
<div class="flex flex-col gap-3">
    <twig:Toggle id="checked" value="" disabled>
        Toggle me
    </twig:Toggle>

    <twig:Toggle id="checked" value="" checked disabled>
        Toggle me
    </twig:Toggle>
</div>
```

## API Reference

### `<twig:Toggle>`

| Block | Description |
|:------|:------------|
| `content` | The toggle label text. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/accordion.md">
# Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

```twig
<twig:Accordion id="accordion-demo" defaultValue="{{ ['shipping'] }}" class="max-w-lg">
    <twig:Accordion:Item value="shipping">
        <twig:Accordion:Trigger>What are your shipping options?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            We offer standard (5-7 days), express (2-3 days), and overnight
            shipping. Free shipping on international orders.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
    <twig:Accordion:Item value="returns">
        <twig:Accordion:Trigger>What is your return policy?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            Returns accepted within 30 days. Items must be unused and in original
            packaging. Refunds processed within 5-7 business days.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
    <twig:Accordion:Item value="support">
        <twig:Accordion:Trigger>How can I contact customer support?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            Reach us via email, live chat, or phone. We respond within 24 hours
            during business days.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
</twig:Accordion>
```

## Installation

```shell
php bin/console ux:install accordion --kit shadcn
```
## Usage

```twig
<twig:Accordion id="accordion-usage" defaultValue="{{ ['item-1'] }}">
    <twig:Accordion:Item value="item-1">
        <twig:Accordion:Trigger>Is it accessible?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            Yes. It adheres to the WAI-ARIA design pattern.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
</twig:Accordion>
```

## Examples

### Basic

A basic accordion that shows one item at a time. The first item is open by default.

```twig
{% set items = [
    {
        value: 'item-1',
        trigger: 'How do I reset my password?',
        content:
        "Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.",
    },
    {
        value: 'item-2',
        trigger: 'Can I change my subscription plan?',
        content:
        'Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.',
    },
    {
        value: 'item-3',
        trigger: 'What payment methods do you accept?',
        content:
        'We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.',
    },
] %}

<twig:Accordion id="accordion-basic" defaultValue="{{ ['item-1'] }}" class="max-w-lg">
    {% for item in items %}
        <twig:Accordion:Item value="{{ item.value }}">
            <twig:Accordion:Trigger>{{ item.trigger }}</twig:Accordion:Trigger>
            <twig:Accordion:Content>{{ item.content }}</twig:Accordion:Content>
        </twig:Accordion:Item>
    {% endfor %}
</twig:Accordion>
```

### Multiple

Use the `multiple` prop to allow multiple items to be open at the same time.

```twig
{% set items = [
    {
        value: 'notifications',
        trigger: 'Notification Settings',
        content:
        'Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.',
    },
    {
        value: 'privacy',
        trigger: 'Privacy & Security',
        content:
        'Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.',
    },
    {
        value: 'billing',
        trigger: 'Billing & Subscription',
        content:
        'View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.',
    },
] %}

<twig:Accordion id="accordion-multiple" multiple class="max-w-lg" defaultValue="{{ ['notifications'] }}">
    {% for item in items %}
        <twig:Accordion:Item value="{{ item.value }}">
            <twig:Accordion:Trigger>{{ item.trigger }}</twig:Accordion:Trigger>
            <twig:Accordion:Content>{{ item.content }}</twig:Accordion:Content>
        </twig:Accordion:Item>
    {% endfor %}
</twig:Accordion>
```

### Disabled

Use the `disabled` prop on `Accordion:Item` to disable individual items.

```twig
<twig:Accordion id="accordion-disabled" class="max-w-lg">
    <twig:Accordion:Item value="item-1">
        <twig:Accordion:Trigger>Can I access my account history?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            Yes, you can view your complete account history including all
            transactions, plan changes, and support tickets in the Account History
            section of your dashboard.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
    <twig:Accordion:Item value="item-2" disabled>
        <twig:Accordion:Trigger>Premium feature information</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            This section contains information about premium features. Upgrade your
            plan to access this content.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
    <twig:Accordion:Item value="item-3">
        <twig:Accordion:Trigger>How do I update my email address?</twig:Accordion:Trigger>
        <twig:Accordion:Content>
            You can update your email address in your account settings.
            You&apos;ll receive a verification email at your new address to
            confirm the change.
        </twig:Accordion:Content>
    </twig:Accordion:Item>
</twig:Accordion>
```

### Borders

Add `border` to the `Accordion` and `border-b last:border-b-0` to the `Accordion:Item` to add borders to the items.

```twig
{% set items = [
    {
        value: 'billing',
        trigger: 'How does billing work?',
        content:
        'We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.',
    },
    {
        value: 'security',
        trigger: 'Is my data secure?',
        content:
        'Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.',
    },
    {
        value: 'integration',
        trigger: 'What integrations do you support?',
        content:
        'We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.',
    },
] %}

<twig:Accordion
    id="accordion-borders"
    class="max-w-lg rounded-lg border"
    defaultValue="{{ ['billing'] }}"
>
    {% for item in items %}
        <twig:Accordion:Item
            value="{{ item.value }}"
            class="border-b px-4 last:border-b-0"
        >
            <twig:Accordion:Trigger>{{ item.trigger }}</twig:Accordion:Trigger>
            <twig:Accordion:Content>{{ item.content }}</twig:Accordion:Content>
        </twig:Accordion:Item>
    {% endfor %}
</twig:Accordion>
```

### Card

Wrap the `Accordion` in a `Card` component.

```twig
<twig:Card class="w-full max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title>Subscription &amp; Billing</twig:Card:Title>
        <twig:Card:Description>
            Common questions about your account, plans, payments and cancellations.
        </twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        <twig:Accordion id="accordion-card" defaultValue="{{ ['plans'] }}">
            <twig:Accordion:Item value="plans">
                <twig:Accordion:Trigger>What subscription plans do you offer?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="billing">
                <twig:Accordion:Trigger>How does billing work?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="cancel">
                <twig:Accordion:Trigger>How do I cancel my subscription?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
        </twig:Accordion>
    </twig:Card:Content>
</twig:Card>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    <div dir="rtl">
        <twig:Accordion id="accordion-rtl-ar" defaultValue="{{ ['item-1'] }}" class="max-w-md">
            <twig:Accordion:Item value="item-1">
                <twig:Accordion:Trigger>كيف يمكنني إعادة تعيين كلمة المرور؟</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="item-2">
                <twig:Accordion:Trigger>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    نعم، يمكنك ترقية أو تخفيض خطتك في أي وقت من إعدادات حسابك. ستظهر التغييرات في دورة الفوترة التالية.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="item-3">
                <twig:Accordion:Trigger>ما هي طرق الدفع التي تقبلونها؟</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    نقبل جميع بطاقات الائتمان الرئيسية و PayPal والتحويلات المصرفية. تتم معالجة جميع المدفوعات بأمان من خلال شركاء الدفع لدينا.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
        </twig:Accordion>
    </div>
    <div dir="rtl">
        <twig:Accordion id="accordion-rtl-he" defaultValue="{{ ['item-1'] }}" class="max-w-md">
            <twig:Accordion:Item value="item-1">
                <twig:Accordion:Trigger>איך אני משנה את הסיסמה שלי?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    לחץ על 'שכחתי סיסמה' בעמוד ההתחברות, הזן את כתובת האימייל שלך, ונשלח לך קישור לשינוי הסיסמה. הקישור יסתיים תוך 24 שעות.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="item-2">
                <twig:Accordion:Trigger>האם אני יכול לשנות את תוכנית המנוי שלי?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    כן, אתה יכול לשדרג או להוריד את התוכנית שלך בכל עת מההגדרות של החשבון שלך. השינויים יבואו לידי ביטוי במחזור החיוב הבא.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
            <twig:Accordion:Item value="item-3">
                <twig:Accordion:Trigger>אילו אמצעי תשלום אתם מקבלים?</twig:Accordion:Trigger>
                <twig:Accordion:Content>
                    אנו מקבלים כרטיסי אשראי, PayPal והעברות בנקאיות.
                </twig:Accordion:Content>
            </twig:Accordion:Item>
        </twig:Accordion>
    </div>
</div>
```

## API Reference

### `<twig:Accordion>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier for the Accordion. |
| `multiple` | `boolean` | `false` | Whether multiple items can be opened at once. |
| `defaultValue` | `string\|array<string>\|null` | `null` | Value(s) of the item(s) to open by default. |
| `orientation` | `'vertical'\|'horizontal'` | `'vertical'` | The visual orientation, controls whether keyboard navigation uses up/down or left/right arrow keys. |

| Block | Description |
|:------|:------------|
| `content` | The accordion items, typically multiple `Accordion:Item` components. |
### `<twig:Accordion:Content>`

| Block | Description |
|:------|:------------|
| `content` | The collapsible content of the accordion item. |
### `<twig:Accordion:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `string` | - | Unique value for this accordion item. |
| `open` | `boolean` | `false` | Whether the item is open by default. |
| `disabled` | `boolean` | `false` | Whether the item is disabled. |

| Block | Description |
|:------|:------------|
| `content` | The item content, typically an `Accordion:Trigger` and `Accordion:Content`. |
### `<twig:Accordion:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The clickable trigger label that toggles the accordion item. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/alert-dialog.md">
# Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

```twig
<div style="min-height: 204px">
    <twig:AlertDialog id="delete_account">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This action cannot be undone. This will permanently delete your
                    account from our servers.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

## Installation

```shell
php bin/console ux:install alert-dialog --kit shadcn
```
## Usage

```twig
<twig:AlertDialog id="delete_account">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>
```

## Examples

### Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

```twig
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-basic">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This action cannot be undone. This will permanently delete your
                    account and remove your data from our servers.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

### Small

Use the `size="sm"` prop to make the alert dialog smaller.

```twig
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-small">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Do you want to allow the USB accessory to connect to this device?
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

### Media

Use the `AlertDialog:Media` component to add a media element such as an icon or image to the alert dialog.

```twig
<div style="min-height: 204px">
    <twig:AlertDialog id="alert-dialog-media">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Share Project</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content>
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media>
                    <twig:ux:icon name="lucide:circle-fading-plus" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Share this project?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Anyone with the link will be able to view and edit this project.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Share</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

### Small with Media

Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialog:Media` component to add a media element such as an icon or image to the alert dialog.

```twig
<div style="min-height: 254px">
    <twig:AlertDialog id="alert-dialog-small-with-media">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media>
                    <twig:ux:icon name="lucide:bluetooth" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    Do you want to allow the USB accessory to connect to this device?
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

### Destructive

Use the `AlertDialog:Action` component to add a destructive action button to the alert dialog.

```twig
<div style="min-height: 254px">
    <twig:AlertDialog id="alert-dialog-destructive">
        <twig:AlertDialog:Trigger>
            <twig:Button variant="destructive" {{ ...alert_dialog_trigger_attrs }}>Delete Chat</twig:Button>
        </twig:AlertDialog:Trigger>
        <twig:AlertDialog:Content size="sm">
            <twig:AlertDialog:Header>
                <twig:AlertDialog:Media class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                    <twig:ux:icon name="lucide:trash-2" />
                </twig:AlertDialog:Media>
                <twig:AlertDialog:Title>Delete chat?</twig:AlertDialog:Title>
                <twig:AlertDialog:Description>
                    This will permanently delete this chat conversation. View
                    <a href="#">Settings</a> delete any memories saved during this chat.
                </twig:AlertDialog:Description>
            </twig:AlertDialog:Header>
            <twig:AlertDialog:Footer>
                <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
                <twig:AlertDialog:Action variant="destructive">Delete</twig:AlertDialog:Action>
            </twig:AlertDialog:Footer>
        </twig:AlertDialog:Content>
    </twig:AlertDialog>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div style="min-height: 254px">
    <div class="flex flex-col gap-8">
        <div dir="rtl" class="flex gap-4">
            <twig:AlertDialog id="rtl-ar-default">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Title>هل أنت متأكد تمامًا؟</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائيًا من خوادمنا.
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>إلغاء</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>متابعة</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
            <twig:AlertDialog id="rtl-ar-sm">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار (صغير)</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content size="sm" dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Media>
                            <twig:ux:icon name="lucide:bluetooth" />
                        </twig:AlertDialog:Media>
                        <twig:AlertDialog:Title>السماح للملحق بالاتصال؟</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>عدم السماح</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>السماح</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
        </div>
        <div dir="rtl" class="flex gap-4">
            <twig:AlertDialog id="rtl-he-default">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Title>האם אתה בטוח לחלוטין?</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            לא ניתן לבטל. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>ביטול</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>המשך</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
            <twig:AlertDialog id="rtl-he-sm">
                <twig:AlertDialog:Trigger>
                    <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג (קטן)</twig:Button>
                </twig:AlertDialog:Trigger>
                <twig:AlertDialog:Content size="sm" dir="rtl">
                    <twig:AlertDialog:Header>
                        <twig:AlertDialog:Media>
                            <twig:ux:icon name="lucide:bluetooth" />
                        </twig:AlertDialog:Media>
                        <twig:AlertDialog:Title>לחבר התקן?</twig:AlertDialog:Title>
                        <twig:AlertDialog:Description>
                            חבר התקן USB למכשיר זה?
                        </twig:AlertDialog:Description>
                    </twig:AlertDialog:Header>
                    <twig:AlertDialog:Footer>
                        <twig:AlertDialog:Cancel>דחה</twig:AlertDialog:Cancel>
                        <twig:AlertDialog:Action>אשר</twig:AlertDialog:Action>
                    </twig:AlertDialog:Footer>
                </twig:AlertDialog:Content>
            </twig:AlertDialog>
        </div>
    </div>
</div>
```

## API Reference

### `<twig:AlertDialog>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier used to generate internal AlertDialog IDs. |
| `open` | `boolean` | `false` | Whether the dialog is open on initial render. |

| Block | Description |
|:------|:------------|
| `content` | The dialog structure, typically includes `AlertDialog:Trigger` and `AlertDialog:Content`. |
### `<twig:AlertDialog:Action>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'` | `'default'` | The button style variant. |
| `size` | `'default'\|'sm'\|'lg'\|'xs'\|'icon'` | `'default'` | The button size. |

| Block | Description |
|:------|:------------|
| `content` | The action button label. |
### `<twig:AlertDialog:Cancel>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'` | `'outline'` | The button style variant. |
| `size` | `'default'\|'sm'\|'lg'\|'xs'\|'icon'` | `'default'` | The button size. |

| Block | Description |
|:------|:------------|
| `content` | The cancel button label. |
### `<twig:AlertDialog:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'default'\|'sm'` | `'default'` | The size of the dialog. |

| Block | Description |
|:------|:------------|
| `content` | The dialog content, typically includes `AlertDialog:Header` and `AlertDialog:Footer`. |
### `<twig:AlertDialog:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text explaining the alert dialog purpose. |
### `<twig:AlertDialog:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains `AlertDialog:Cancel` and `AlertDialog:Action` buttons. |
### `<twig:AlertDialog:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `AlertDialog:Title` and `AlertDialog:Description`. |
### `<twig:AlertDialog:Media>`

| Block | Description |
|:------|:------------|
| `content` | The media element (icon or image) to display in the alert dialog header. |
### `<twig:AlertDialog:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the alert dialog. |
### `<twig:AlertDialog:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger element (e.g., a `Button`) that opens the dialog when clicked. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/alert.md">
# Alert

Displays a callout for user attention.

```twig
<div class="grid w-full max-w-md items-start gap-4">
    <twig:Alert>
        <twig:ux:icon name="lucide:circle-check-big" />
        <twig:Alert:Title>Payment successful</twig:Alert:Title>
        <twig:Alert:Description>
            Your payment of $29.99 has been processed. A receipt has been sent to your email address.
        </twig:Alert:Description>
    </twig:Alert>
    <twig:Alert>
        <twig:ux:icon name="lucide:info" />
        <twig:Alert:Title>New feature available</twig:Alert:Title>
        <twig:Alert:Description>
            We've added dark mode support. You can enable it in your account settings.
        </twig:Alert:Description>
    </twig:Alert>
</div>
```

## Installation

```shell
php bin/console ux:install alert --kit shadcn
```
## Usage

```twig
<twig:Alert>
    <twig:ux:icon name="lucide:info" />
    <twig:Alert:Title>Heads up!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button variant="outline">Enable</twig:Button>
    </twig:Alert:Action>
</twig:Alert>
```

## Examples

### Basic

A basic alert with an icon, title and description.

```twig
<twig:Alert class="max-w-md">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:Alert:Title>Account updated successfully</twig:Alert:Title>
    <twig:Alert:Description>
        Your profile information has been saved. Changes will be reflected immediately.
    </twig:Alert:Description>
</twig:Alert>
```

### Destructive

Use `variant="destructive"` to create a destructive alert.

```twig
<twig:Alert variant="destructive" class="max-w-md">
    <twig:ux:icon name="lucide:circle-alert" />
    <twig:Alert:Title>Payment failed</twig:Alert:Title>
    <twig:Alert:Description>
        Your payment could not be processed. Please check your payment method and try again.
    </twig:Alert:Description>
</twig:Alert>
```

### Action

Use `Alert:Action` to add a button or other action element to the alert.

```twig
<twig:Alert class="max-w-md">
    <twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
    <twig:Alert:Description>
        Enable it under your profile settings to get started.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="xs" variant="default">
            Enable
        </twig:Button>
    </twig:Alert:Action>
</twig:Alert>
```

### Custom Colors

You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.

```twig
<twig:Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
    <twig:ux:icon name="lucide:triangle-alert" />
    <twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
    <twig:Alert:Description>
        Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
    </twig:Alert:Description>
</twig:Alert>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    <div dir="rtl">
        <div class="grid w-full max-w-md items-start gap-4">
            <twig:Alert>
                <twig:ux:icon name="lucide:circle-check-big" />
                <twig:Alert:Title>تم الدفع بنجاح</twig:Alert:Title>
                <twig:Alert:Description>
                    تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
                </twig:Alert:Description>
            </twig:Alert>
            <twig:Alert>
                <twig:ux:icon name="lucide:info" />
                <twig:Alert:Title>ميزة جديدة متاحة</twig:Alert:Title>
                <twig:Alert:Description>
                    لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.
                </twig:Alert:Description>
            </twig:Alert>
        </div>
    </div>
    <div dir="rtl">
        <div class="grid w-full max-w-md items-start gap-4">
            <twig:Alert>
                <twig:ux:icon name="lucide:circle-check-big" />
                <twig:Alert:Title>התשלום בוצע בהצלחה</twig:Alert:Title>
                <twig:Alert:Description>
                    התשלום שלך בסך 29.99 דולר עובד. קבלה נשלחה לכתובת האימייל שלך.
                </twig:Alert:Description>
            </twig:Alert>
            <twig:Alert>
                <twig:ux:icon name="lucide:info" />
                <twig:Alert:Title>תכונה חדשה זמינה</twig:Alert:Title>
                <twig:Alert:Description>
                    כעת יש תמיכה במצב כהה. ניתן לאשר זאת בהגדרות החשבון.
                </twig:Alert:Description>
            </twig:Alert>
        </div>
    </div>
</div>
```

## API Reference

### `<twig:Alert>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'destructive'` | `'default'` | The visual style variant. |

| Block | Description |
|:------|:------------|
| `content` | The alert content, typically includes `Alert:Title` and `Alert:Description`. |
### `<twig:Alert:Action>`

| Block | Description |
|:------|:------------|
| `content` | The action element, typically a button or link positioned at the top-right. |
### `<twig:Alert:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text of the alert. |
### `<twig:Alert:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the alert. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/aspect-ratio.md">
# Aspect Ratio

Displays content within a desired ratio.

```twig
<div class="w-full max-w-sm">
    <twig:AspectRatio ratio="16 / 9" class="rounded-lg bg-muted">
        <img
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMCAwaDY0djY0SDB6IiBzdHlsZT0iZmlsbDp1cmwoI2EpIi8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNzcgNTggLTU4IDc3IDEgMTEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjRiNGI0O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojOGY4ZjhmO3N0b3Atb3BhY2l0eToxIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"
            alt="Photo"
            class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
    </twig:AspectRatio>
</div>
```

## Installation

```shell
php bin/console ux:install aspect-ratio --kit shadcn
```
## Usage

```twig
<twig:AspectRatio ratio="16 / 9">
    <img
        src="..."
        alt="Image"
        class="rounded-md object-cover"
    />
</twig:AspectRatio>
```

## Examples

### Square

A square aspect ratio component using the `ratio="1 / 1"` prop. This is useful for displaying images in a square format.

```twig
<div class="w-full max-w-[12rem]">
    <twig:AspectRatio ratio="1 / 1" class="rounded-lg bg-muted">
        <img
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMCAwaDY0djY0SDB6IiBzdHlsZT0iZmlsbDp1cmwoI2EpIi8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNzcgNTggLTU4IDc3IDEgMTEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjRiNGI0O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojOGY4ZjhmO3N0b3Atb3BhY2l0eToxIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"
            alt="Photo"
            class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
    </twig:AspectRatio>
</div>
```

### Portrait

A portrait aspect ratio component using the `ratio="9 / 16"` prop. This is useful for displaying images in a portrait format.

```twig
<div class="w-full max-w-[10rem]">
    <twig:AspectRatio ratio="9 / 16" class="rounded-lg bg-muted">
        <img
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMCAwaDY0djY0SDB6IiBzdHlsZT0iZmlsbDp1cmwoI2EpIi8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNzcgNTggLTU4IDc3IDEgMTEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjRiNGI0O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojOGY4ZjhmO3N0b3Atb3BhY2l0eToxIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"
            alt="Photo"
            class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
    </twig:AspectRatio>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex w-full flex-col items-center gap-4">
    <figure class="w-full max-w-sm" dir="rtl">
        <twig:AspectRatio ratio="16 / 9" class="rounded-lg bg-muted">
            <img
                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMCAwaDY0djY0SDB6IiBzdHlsZT0iZmlsbDp1cmwoI2EpIi8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNzcgNTggLTU4IDc3IDEgMTEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjRiNGI0O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojOGY4ZjhmO3N0b3Atb3BhY2l0eToxIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"
                alt="Photo"
                class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
            />
        </twig:AspectRatio>
        <figcaption class="mt-2 text-center text-sm text-muted-foreground">منظر طبيعي جميل</figcaption>
    </figure>
    <figure class="w-full max-w-sm" dir="rtl">
        <twig:AspectRatio ratio="16 / 9" class="rounded-lg bg-muted">
            <img
                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMCAwaDY0djY0SDB6IiBzdHlsZT0iZmlsbDp1cmwoI2EpIi8+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJhIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoNzcgNTggLTU4IDc3IDEgMTEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojYjRiNGI0O3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojOGY4ZjhmO3N0b3Atb3BhY2l0eToxIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+"
                alt="Photo"
                class="absolute inset-0 h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
            />
        </twig:AspectRatio>
        <figcaption class="mt-2 text-center text-sm text-muted-foreground">מראה נהדר</figcaption>
    </figure>
</div>
```

## API Reference

### `<twig:AspectRatio>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `ratio` | `string` | - | The aspect ratio (e.g., `16 / 9`, `4 / 3`, `1 / 1`). |

| Block | Description |
|:------|:------------|
| `content` | The content to display within the aspect ratio container. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/avatar.md">
# Avatar

An image element with a fallback for representing the user.

```twig
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
    <twig:Avatar>
        <twig:Avatar:Image
            src="https://github.com/shadcn.png"
            alt="@shadcn"
            class="grayscale"
        />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
        <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
    </twig:Avatar>
    <twig:Avatar:Group class="grayscale">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
            <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
    </twig:Avatar:Group>
</div>
```

## Installation

```shell
php bin/console ux:install avatar --kit shadcn
```
## Usage

```twig
<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/shadcn.png" />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
</twig:Avatar>
```

## Examples

### Basic

A basic avatar component with an image and a fallback.

```twig
<twig:Avatar>
    <twig:Avatar:Image
        src="https://github.com/shadcn.png"
        alt="@shadcn"
        class="grayscale"
    />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
</twig:Avatar>
```

### Badge

Use the `Avatar:Badge` component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

```twig
<twig:Avatar>
    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
</twig:Avatar>
```

### Badge with Icon

You can also use an icon inside `Avatar:Badge`.

```twig
<twig:Avatar class="grayscale">
    <twig:Avatar:Image src="https://github.com/pranathip.png" alt="@pranathip" />
    <twig:Avatar:Fallback>PP</twig:Avatar:Fallback>
    <twig:Avatar:Badge>
        <twig:ux:icon name="lucide:plus" />
    </twig:Avatar:Badge>
</twig:Avatar>
```

### Avatar Group

Use the `Avatar:Group` component to add a group of avatars.

```twig
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
</twig:Avatar:Group>
```

### Avatar Group Count

Use `Avatar:GroupCount` to add a count to the group.

```twig
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
</twig:Avatar:Group>
```

### Avatar Group with Icon

You can also use an icon inside `Avatar:GroupCount`.

```twig
<twig:Avatar:Group class="grayscale">
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar:GroupCount>
        <twig:ux:icon name="lucide:plus" />
    </twig:Avatar:GroupCount>
</twig:Avatar:Group>
```

### Sizes

Use the `size` prop to change the size of the avatar.

```twig
<div class="flex flex-wrap items-center gap-2 grayscale">
    <twig:Avatar size="sm">
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar size="lg">
        <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
        <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
    </twig:Avatar>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    <div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir="rtl">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
        </twig:Avatar>
        <twig:Avatar:Group class="grayscale">
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar:GroupCount>+٣</twig:Avatar:GroupCount>
        </twig:Avatar:Group>
    </div>
    <div class="flex flex-row flex-wrap items-center gap-6 md:gap-12" dir="rtl">
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
            <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
            <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            <twig:Avatar:Badge class="bg-green-600 dark:bg-green-800" />
        </twig:Avatar>
        <twig:Avatar:Group class="grayscale">
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
            <twig:Avatar:GroupCount>+3</twig:Avatar:GroupCount>
        </twig:Avatar:Group>
    </div>
</div>
```

## API Reference

### `<twig:Avatar>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'default'\|'sm'\|'lg'` | `'default'` | The avatar size. |

| Block | Description |
|:------|:------------|
| `content` | The avatar content, typically an image or `Avatar:Fallback`. |
### `<twig:Avatar:Badge>`

| Block | Description |
|:------|:------------|
| `content` | The badge content, typically an icon indicating status. |
### `<twig:Avatar:Fallback>`

| Block | Description |
|:------|:------------|
| `content` | The fallback content displayed when no image is available, typically initials. |
### `<twig:Avatar:Group>`

| Block | Description |
|:------|:------------|
| `content` | The grouped avatars, typically multiple `Avatar` components. |
### `<twig:Avatar:GroupCount>`

| Block | Description |
|:------|:------------|
| `content` | The count indicator showing number of additional avatars (e.g., "+3"). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/badge.md">
# Badge

Displays a badge or a component that looks like a badge.

```twig
<div class="flex w-full flex-wrap justify-center gap-2">
    <twig:Badge>Badge</twig:Badge>
    <twig:Badge variant="secondary">Secondary</twig:Badge>
    <twig:Badge variant="destructive">Destructive</twig:Badge>
    <twig:Badge variant="outline">Outline</twig:Badge>
</div>
```

## Installation

```shell
php bin/console ux:install badge --kit shadcn
```
## Usage

```twig
<twig:Badge variant="default | outline | secondary | destructive">
    Badge
</twig:Badge>
```

## Examples

### Variants

Use the `variant` prop to change the variant of the badge.

```twig
<div class="flex flex-wrap gap-2">
    <twig:Badge>Default</twig:Badge>
    <twig:Badge variant="secondary">Secondary</twig:Badge>
    <twig:Badge variant="destructive">Destructive</twig:Badge>
    <twig:Badge variant="outline">Outline</twig:Badge>
    <twig:Badge variant="ghost">Ghost</twig:Badge>
</div>
```

### With Icon

You can render an icon inside the badge. Use `data-icon="inline-start"` to render the icon on the left and `data-icon="inline-end"` to render the icon on the right.

```twig
<div class="flex flex-wrap gap-2">
    <twig:Badge variant="secondary">
        <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
        Verified
    </twig:Badge>
    <twig:Badge variant="outline">
        Bookmark
        <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
    </twig:Badge>
</div>
```

### With Spinner

You can render a spinner inside the badge. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner.

```twig
<div class="flex flex-wrap gap-2">
    <twig:Badge variant="destructive">
        <twig:Spinner data-icon="inline-start" />
        Deleting
    </twig:Badge>
    <twig:Badge variant="secondary">
        Generating
        <twig:Spinner data-icon="inline-end" />
    </twig:Badge>
</div>
```

### Link

Use the `as` prop to render a link as a badge.

```twig
<twig:Badge as="a" href="#link">
    Open Link
    <twig:ux:icon name="lucide:arrow-up-right" data-icon="inline-end" />
</twig:Badge>
```

### Custom Colors

You can customize the colors of a badge by adding custom classes such as `bg-green-50 dark:bg-green-800` to the `Badge` component.

```twig
<div class="flex flex-wrap gap-2">
    <twig:Badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</twig:Badge>
    <twig:Badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</twig:Badge>
    <twig:Badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</twig:Badge>
    <twig:Badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">Purple</twig:Badge>
    <twig:Badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</twig:Badge>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-6">
    <div class="flex w-full flex-wrap justify-center gap-2" dir="rtl">
        <twig:Badge>شارة</twig:Badge>
        <twig:Badge variant="secondary">ثانوي</twig:Badge>
        <twig:Badge variant="destructive">مدمر</twig:Badge>
        <twig:Badge variant="outline">مخطط</twig:Badge>
        <twig:Badge variant="secondary">
            <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
            متحقق
        </twig:Badge>
        <twig:Badge variant="outline">
            إشارة مرجعية
            <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
        </twig:Badge>
    </div>
    <div class="flex w-full flex-wrap justify-center gap-2" dir="rtl">
        <twig:Badge>תג</twig:Badge>
        <twig:Badge variant="secondary">משני</twig:Badge>
        <twig:Badge variant="destructive">הרסני</twig:Badge>
        <twig:Badge variant="outline">קווי מתאר</twig:Badge>
        <twig:Badge variant="secondary">
            <twig:ux:icon name="lucide:badge-check" data-icon="inline-start" />
            מאומת
        </twig:Badge>
        <twig:Badge variant="outline">
            סימנייה
            <twig:ux:icon name="lucide:bookmark" data-icon="inline-end" />
        </twig:Badge>
    </div>
</div>
```

## API Reference

### `<twig:Badge>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'` | `'default'` | The visual style variant. |
| `as` | `'span'` | `'span'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The badge label or content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/breadcrumb.md">
# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Ellipsis />
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

## Installation

```shell
php bin/console ux:install breadcrumb --kit shadcn
```
## Usage

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

## Examples

### Basic

A basic breadcrumb with a home link and a components link.

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

### Custom separator

Use a custom component as `children` for `Breadcrumb:Separator` to create a custom separator.

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator>
            <twig:ux:icon name="lucide:dot" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator>
            <twig:ux:icon name="lucide:dot" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

### Collapsed

We provide a `Breadcrumb:Ellipsis` component to show a collapsed state when the breadcrumb is too long.

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Ellipsis />
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

### Link component

To use a custom link component from your routing library, you can pass the `href` attribute to `Breadcrumb:Link`.

```twig
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href="#">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-6">
    <twig:Breadcrumb dir="rtl">
        <twig:Breadcrumb:List>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">الرئيسية</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">المكونات</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Page>مسار التنقل</twig:Breadcrumb:Page>
            </twig:Breadcrumb:Item>
        </twig:Breadcrumb:List>
    </twig:Breadcrumb>
    <twig:Breadcrumb dir="rtl">
        <twig:Breadcrumb:List>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">בית</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">רכיבים</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Page>ניווט</twig:Breadcrumb:Page>
            </twig:Breadcrumb:Item>
        </twig:Breadcrumb:List>
    </twig:Breadcrumb>
</div>
```

## API Reference

### `<twig:Breadcrumb>`

| Block | Description |
|:------|:------------|
| `content` | The breadcrumb structure, typically a `Breadcrumb:List`. |
### `<twig:Breadcrumb:Item>`

| Block | Description |
|:------|:------------|
| `content` | The breadcrumb item content, typically a `Breadcrumb:Link` or `Breadcrumb:Page`. |
### `<twig:Breadcrumb:Link>`

| Block | Description |
|:------|:------------|
| `content` | The clickable link text. |
### `<twig:Breadcrumb:List>`

| Block | Description |
|:------|:------------|
| `content` | The list of breadcrumb items, typically multiple `Breadcrumb:Item` components. |
### `<twig:Breadcrumb:Page>`

| Block | Description |
|:------|:------------|
| `content` | The current page text (non-clickable). |
### `<twig:Breadcrumb:Separator>`

| Block | Description |
|:------|:------------|
| `content` | The separator icon between breadcrumb items, defaults to a chevron. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/button-group.md">
# Button Group

A container that groups related buttons together with consistent styling.

```twig
<twig:ButtonGroup>
    <twig:ButtonGroup class="hidden sm:flex">
        <twig:Button variant="outline" size="icon" aria-label="Go back">
            <twig:ux:icon name="lucide:arrow-left" />
        </twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="outline">Archive</twig:Button>
        <twig:Button variant="outline">Report</twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="outline">
            <twig:ux:icon name="lucide:clock" />
            Snooze
        </twig:Button>
        <twig:Button variant="outline" size="icon" aria-label="More options">
            <twig:ux:icon name="lucide:more-horizontal" />
        </twig:Button>
    </twig:ButtonGroup>
</twig:ButtonGroup>
```

## Installation

```shell
php bin/console ux:install button-group --kit shadcn
```
## Usage

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

## Accessibility

- The `ButtonGroup` component has the `role` attribute set to `group`.
- Use `Tab` to navigate between the buttons in the group.
- Use `aria-label` or `aria-labelledby` to label the button group.

```twig
<twig:ButtonGroup aria-label="Button group">
    <twig:Button>Button 1</twig:Button>
    <twig:Button>Button 2</twig:Button>
</twig:ButtonGroup>
```

## Examples

### Orientation

Set the `orientation` prop to change the button group layout.

```twig
<twig:ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
    <twig:Button variant="outline" size="icon">
        <twig:ux:icon name="lucide:plus" />
    </twig:Button>
    <twig:Button variant="outline" size="icon">
        <twig:ux:icon name="lucide:minus" />
    </twig:Button>
</twig:ButtonGroup>
```

### Size

Control the size of buttons using the `size` prop on individual buttons.

```twig
<div class="flex flex-col items-start gap-8">
    <twig:ButtonGroup>
        <twig:Button variant="outline" size="sm">Small</twig:Button>
        <twig:Button variant="outline" size="sm">Button</twig:Button>
        <twig:Button variant="outline" size="sm">Group</twig:Button>
        <twig:Button variant="outline" size="icon-sm">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="outline">Default</twig:Button>
        <twig:Button variant="outline">Button</twig:Button>
        <twig:Button variant="outline">Group</twig:Button>
        <twig:Button variant="outline" size="icon">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="outline" size="lg">Large</twig:Button>
        <twig:Button variant="outline" size="lg">Button</twig:Button>
        <twig:Button variant="outline" size="lg">Group</twig:Button>
        <twig:Button variant="outline" size="icon-lg">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
    </twig:ButtonGroup>
</div>
```

### Nested

Nest `ButtonGroup` components to create button groups with spacing.

```twig
<twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:Button variant="outline" size="icon">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="Send a message..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:ux:icon name="lucide:audio-lines" />
            </twig:InputGroup:Addon>
        </twig:InputGroup>
    </twig:ButtonGroup>
</twig:ButtonGroup>
```

### Separator

The `ButtonGroup:Separator` component visually divides buttons within a group.

Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

```twig
<twig:ButtonGroup>
    <twig:Button variant="secondary" size="sm">Copy</twig:Button>
    <twig:ButtonGroup:Separator />
    <twig:Button variant="secondary" size="sm">Paste</twig:Button>
</twig:ButtonGroup>
```

### Split

Create a split button group by adding two buttons separated by a `ButtonGroup:Separator`.

```twig
<twig:ButtonGroup>
    <twig:Button variant="secondary">Button</twig:Button>
    <twig:ButtonGroup:Separator />
    <twig:Button size="icon" variant="secondary">
        <twig:ux:icon name="tabler:plus" />
    </twig:Button>
</twig:ButtonGroup>
```

### Input

Wrap an `Input` component with buttons.

```twig
<twig:ButtonGroup>
    <twig:Input placeholder="Search..." />
    <twig:Button variant="outline" aria-label="Search">
        <twig:ux:icon name="lucide:search" />
    </twig:Button>
</twig:ButtonGroup>
```

### Input Group

Wrap an `InputGroup` component to create complex input layouts.

```twig
<twig:ButtonGroup class="[--radius:9999rem]">
    <twig:ButtonGroup>
        <twig:Button variant="outline" size="icon">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
    </twig:ButtonGroup>
    <twig:ButtonGroup>
        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="Send a message..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:ux:icon name="lucide:audio-lines" />
            </twig:InputGroup:Addon>
        </twig:InputGroup>
    </twig:ButtonGroup>
</twig:ButtonGroup>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-6">
    <div dir="rtl">
        <twig:ButtonGroup>
            <twig:ButtonGroup class="hidden sm:flex">
                <twig:Button variant="outline" size="icon" aria-label="رجوع">
                    <twig:ux:icon name="lucide:arrow-right" />
                </twig:Button>
            </twig:ButtonGroup>
            <twig:ButtonGroup>
                <twig:Button variant="outline">أرشفة</twig:Button>
                <twig:Button variant="outline">تقرير</twig:Button>
            </twig:ButtonGroup>
            <twig:ButtonGroup>
                <twig:Button variant="outline">تأجيل</twig:Button>
                <twig:Button variant="outline" size="icon" aria-label="المزيد">
                    <twig:ux:icon name="lucide:more-horizontal" />
                </twig:Button>
            </twig:ButtonGroup>
        </twig:ButtonGroup>
    </div>
    <div dir="rtl">
        <twig:ButtonGroup>
            <twig:ButtonGroup class="hidden sm:flex">
                <twig:Button variant="outline" size="icon" aria-label="חזרה">
                    <twig:ux:icon name="lucide:arrow-right" />
                </twig:Button>
            </twig:ButtonGroup>
            <twig:ButtonGroup>
                <twig:Button variant="outline">ארכיון</twig:Button>
                <twig:Button variant="outline">דוח</twig:Button>
            </twig:ButtonGroup>
            <twig:ButtonGroup>
                <twig:Button variant="outline">דחה</twig:Button>
                <twig:Button variant="outline" size="icon" aria-label="עוד">
                    <twig:ux:icon name="lucide:more-horizontal" />
                </twig:Button>
            </twig:ButtonGroup>
        </twig:ButtonGroup>
    </div>
</div>
```

## API Reference

### `<twig:ButtonGroup>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The layout direction of the button group. |

| Block | Description |
|:------|:------------|
| `content` | The grouped buttons and/or separators. |
### `<twig:ButtonGroup:Separator>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'vertical'` | The separator orientation. |
### `<twig:ButtonGroup:Text>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `as` | `'div'` | `'div'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The text content displayed in the button group. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/button.md">
# Button

Displays a button or a component that looks like a button.

```twig
<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:Button variant="outline">Button</twig:Button>
    <twig:Button variant="outline" size="icon" aria-label="Submit">
        <twig:ux:icon name="lucide:arrow-up" />
    </twig:Button>
</div>
```

## Installation

```shell
php bin/console ux:install button --kit shadcn
```
## Usage

```twig
<twig:Button variant="outline">Button</twig:Button>
```

## Examples

### Size

Use the `size` prop to change the size of the button.

```twig
<div class="flex flex-col items-start gap-8 sm:flex-row">
    <div class="flex items-start gap-2">
        <twig:Button size="xs" variant="outline">Extra Small</twig:Button>
        <twig:Button size="icon-xs" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:Button size="sm" variant="outline">Small</twig:Button>
        <twig:Button size="icon-sm" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:Button variant="outline">Default</twig:Button>
        <twig:Button size="icon" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:Button size="lg" variant="outline">Large</twig:Button>
        <twig:Button size="icon-lg" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:Button>
    </div>
</div>
```

### Default

```twig
<twig:Button>Button</twig:Button>
```

### Outline

```twig
<twig:Button variant="outline">Outline</twig:Button>
```

### Secondary

```twig
<twig:Button variant="secondary">Secondary</twig:Button>
```

### Ghost

```twig
<twig:Button variant="ghost">Ghost</twig:Button>
```

### Destructive

```twig
<twig:Button variant="destructive">Destructive</twig:Button>
```

### Link

```twig
<twig:Button variant="link">Link</twig:Button>
```

### Icon

```twig
<twig:Button variant="outline" size="icon">
    <twig:ux:icon name="lucide:circle-fading-arrow-up" />
</twig:Button>
```

### With Icon

Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.

```twig
<twig:Button variant="outline" size="sm">
    <twig:ux:icon name="lucide:git-branch" /> New Branch
</twig:Button>
```

### Rounded

Use the `rounded-full` class to make the button rounded.

```twig
<div class="flex flex-col gap-8">
    <twig:Button variant="outline" size="icon" class="rounded-full">
        <twig:ux:icon name="lucide:arrow-up" />
    </twig:Button>
</div>
```

### Spinner

Render a `Spinner` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing.

```twig
<div class="flex gap-2">
    <twig:Button variant="outline" disabled>
        <twig:Spinner data-icon="inline-start" />
        Generating
    </twig:Button>
    <twig:Button variant="secondary" disabled>
        Downloading
        <twig:Spinner data-icon="inline-start" />
    </twig:Button>
</div>
```

### As Child

You can use the `as` prop on `Button` to make another element look like a button. Here's an example of a link that looks like a button.

```twig
<twig:Button as="a" href="/login">Login</twig:Button>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    <div class="flex flex-wrap items-center gap-2 md:flex-row" dir="rtl">
        <twig:Button variant="outline">زر</twig:Button>
        <twig:Button variant="destructive">حذف</twig:Button>
        <twig:Button variant="outline">
            إرسال
            <twig:ux:icon name="lucide:arrow-right" class="rtl:rotate-180" data-icon="inline-end" />
        </twig:Button>
        <twig:Button variant="outline" size="icon" aria-label="Add">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
        <twig:Button variant="secondary" disabled>
            <twig:Spinner data-icon="inline-start" />
            جاري التحميل
        </twig:Button>
    </div>
    <div class="flex flex-wrap items-center gap-2 md:flex-row" dir="rtl">
        <twig:Button variant="outline">לחצן</twig:Button>
        <twig:Button variant="destructive">מחק</twig:Button>
        <twig:Button variant="outline">
            שלח
            <twig:ux:icon name="lucide:arrow-right" class="rtl:rotate-180" data-icon="inline-end" />
        </twig:Button>
        <twig:Button variant="outline" size="icon" aria-label="Add">
            <twig:ux:icon name="lucide:plus" />
        </twig:Button>
        <twig:Button variant="secondary" disabled>
            <twig:Spinner data-icon="inline-start" />
            טוען
        </twig:Button>
    </div>
</div>
```

## API Reference

### `<twig:Button>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'` | `'default'` | The visual style variant. |
| `size` | `'default'\|'xs'\|'sm'\|'lg'\|'icon'\|'icon-xs'\|'icon-sm'\|'icon-lg'` | `'default'` | The button size. |
| `as` | `'button'` | `'button'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The button label and/or icon. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/card.md">
# Card

Displays a card with header, content, and footer.

```twig
<twig:Card class="w-full max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title>Login to your account</twig:Card:Title>
        <twig:Card:Description>
            Enter your email below to login to your account
        </twig:Card:Description>
        <twig:Card:Action>
            <twig:Button variant="link">Sign Up</twig:Button>
        </twig:Card:Action>
    </twig:Card:Header>
    <twig:Card:Content>
        <form>
            <div class="flex flex-col gap-6">
                <div class="grid gap-2">
                    <twig:Label for="email">Email</twig:Label>
                    <twig:Input
                        id="email"
                        type="email"
                        placeholder="m@example.com"
                        required
                    />
                </div>
                <div class="grid gap-2">
                    <div class="flex items-center">
                        <twig:Label for="password">Password</twig:Label>
                        <a
                            href="#"
                            class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                        >
                            Forgot your password?
                        </a>
                    </div>
                    <twig:Input id="password" type="password" required />
                </div>
            </div>
        </form>
    </twig:Card:Content>
    <twig:Card:Footer class="flex-col gap-2">
        <twig:Button type="submit" class="w-full">
            Login
        </twig:Button>
        <twig:Button variant="outline" class="w-full">
            Login with Google
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>
```

## Installation

```shell
php bin/console ux:install card --kit shadcn
```
## Usage

```twig
<twig:Card>
    <twig:Card:Header>
        <twig:Card:Title>Card Title</twig:Card:Title>
        <twig:Card:Description>Card Description</twig:Card:Description>
        <twig:Card:Action>Card Action</twig:Card:Action>
    </twig:Card:Header>
    <twig:Card:Content>
        <p>Card Content</p>
    </twig:Card:Content>
    <twig:Card:Footer>
        <p>Card Footer</p>
    </twig:Card:Footer>
</twig:Card>
```

## Examples

### Size

Use the `size="sm"` prop to set the size of the card to small. The small size variant uses smaller spacing.

```twig
<twig:Card size="sm" class="mx-auto w-full max-w-sm">
    <twig:Card:Header>
        <twig:Card:Title>Small Card</twig:Card:Title>
        <twig:Card:Description>
            This card uses the small size variant.
        </twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        <p>
            The card component supports a size prop that can be set to
            "sm" for a more compact appearance.
        </p>
    </twig:Card:Content>
    <twig:Card:Footer>
        <twig:Button variant="outline" size="sm" class="w-full">
            Action
        </twig:Button>
    </twig:Card:Footer>
</twig:Card>
```

### Image

Add an image before the card header to create a card with an image.

```twig
<twig:Card class="relative mx-auto w-full max-w-sm pt-0">
    <div class="absolute inset-0 z-30 aspect-video bg-black/35"></div>
    <img
        src="https://avatar.vercel.sh/shadcn1"
        alt="Event cover"
        class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
    />
    <twig:Card:Header>
        <twig:Card:Action>
            <twig:Badge variant="secondary">Featured</twig:Badge>
        </twig:Card:Action>
        <twig:Card:Title>Design systems meetup</twig:Card:Title>
        <twig:Card:Description>
            A practical talk on component APIs, accessibility, and shipping faster.
        </twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Footer>
        <twig:Button class="w-full">View Event</twig:Button>
    </twig:Card:Footer>
</twig:Card>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex w-full flex-col items-center gap-8">
    {# Arabic #}
    <twig:Card class="w-full max-w-sm" dir="rtl">
        <twig:Card:Header>
            <twig:Card:Title>تسجيل الدخول إلى حسابك</twig:Card:Title>
            <twig:Card:Description>
                أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
            </twig:Card:Description>
            <twig:Card:Action>
                <twig:Button variant="link">إنشاء حساب</twig:Button>
            </twig:Card:Action>
        </twig:Card:Header>
        <twig:Card:Content>
            <form>
                <div class="flex flex-col gap-6">
                    <div class="grid gap-2">
                        <twig:Label for="email-ar">البريد الإلكتروني</twig:Label>
                        <twig:Input id="email-ar" type="email" placeholder="m@example.com" required />
                    </div>
                    <div class="grid gap-2">
                        <div class="flex items-center">
                            <twig:Label for="password-ar">كلمة المرور</twig:Label>
                            <a href="#" class="ms-auto inline-block text-sm underline-offset-4 hover:underline">
                                نسيت كلمة المرور؟
                            </a>
                        </div>
                        <twig:Input id="password-ar" type="password" required />
                    </div>
                </div>
            </form>
        </twig:Card:Content>
        <twig:Card:Footer class="flex-col gap-2">
            <twig:Button type="submit" class="w-full">تسجيل الدخول</twig:Button>
            <twig:Button variant="outline" class="w-full">تسجيل الدخول باستخدام Google</twig:Button>
        </twig:Card:Footer>
    </twig:Card>

    {# Hebrew #}
    <twig:Card class="w-full max-w-sm" dir="rtl">
        <twig:Card:Header>
            <twig:Card:Title>התחברות לחשבון שלך</twig:Card:Title>
            <twig:Card:Description>
                הזן את כתובת האימייל שלך למטה כדי להתחבר לחשבון שלך
            </twig:Card:Description>
            <twig:Card:Action>
                <twig:Button variant="link">הרשמה</twig:Button>
            </twig:Card:Action>
        </twig:Card:Header>
        <twig:Card:Content>
            <form>
                <div class="flex flex-col gap-6">
                    <div class="grid gap-2">
                        <twig:Label for="email-he">כתובת אימייל</twig:Label>
                        <twig:Input id="email-he" type="email" placeholder="m@example.com" required />
                    </div>
                    <div class="grid gap-2">
                        <div class="flex items-center">
                            <twig:Label for="password-he">סיסמה</twig:Label>
                            <a href="#" class="ms-auto inline-block text-sm underline-offset-4 hover:underline">
                                שכחת את הסיסמה?
                            </a>
                        </div>
                        <twig:Input id="password-he" type="password" required />
                    </div>
                </div>
            </form>
        </twig:Card:Content>
        <twig:Card:Footer class="flex-col gap-2">
            <twig:Button type="submit" class="w-full">התחברות</twig:Button>
            <twig:Button variant="outline" class="w-full">התחברות עם Google</twig:Button>
        </twig:Card:Footer>
    </twig:Card>
</div>
```

## API Reference

### `<twig:Card>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'default'\|'sm'` | `'default'` | Size variant of the card. |

| Block | Description |
|:------|:------------|
| `content` | The card content, typically includes `Card:Header`, `Card:Content`, and/or `Card:Footer`. |
### `<twig:Card:Action>`

| Block | Description |
|:------|:------------|
| `content` | The action area placed in the top-right corner of the card header. |
### `<twig:Card:Content>`

| Block | Description |
|:------|:------------|
| `content` | The main content area of the card. |
### `<twig:Card:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text of the card. |
### `<twig:Card:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains actions or additional information. |
### `<twig:Card:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Card:Title`, `Card:Description`, and `Card:Action`. |
### `<twig:Card:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the card. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/checkbox.md">
# Checkbox

A control that allows the user to toggle between checked and not checked.

```twig
<twig:Field:Group class="max-w-sm">
    <twig:Field orientation="horizontal">
        <twig:Checkbox id="terms-checkbox" name="terms-checkbox" />
        <twig:Label for="terms-checkbox">Accept terms and conditions</twig:Label>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:Checkbox id="terms-checkbox-2" name="terms-checkbox-2" checked />
        <twig:Field:Content>
            <twig:Field:Label for="terms-checkbox-2">Accept terms and conditions</twig:Field:Label>
            <twig:Field:Description>By clicking this checkbox, you agree to the terms.</twig:Field:Description>
        </twig:Field:Content>
    </twig:Field>
    <twig:Field orientation="horizontal" data-disabled>
        <twig:Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
        <twig:Field:Label for="toggle-checkbox">Enable notifications</twig:Field:Label>
    </twig:Field>
    <twig:Field:Label>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
            <twig:Field:Content>
                <twig:Field:Title>Enable notifications</twig:Field:Title>
                <twig:Field:Description>You can enable or disable notifications at any time.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
    </twig:Field:Label>
</twig:Field:Group>
```

## Installation

```shell
php bin/console ux:install checkbox --kit shadcn
```
## Usage

```twig
<twig:Checkbox />
```

## Examples

### Basic

Pair the checkbox with `Field` and `Field:Label` for proper layout and labeling.

```twig
<twig:Field:Group class="mx-auto w-56">
    <twig:Field orientation="horizontal">
        <twig:Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
        <twig:Field:Label for="terms-checkbox-basic">Accept terms and conditions</twig:Field:Label>
    </twig:Field>
</twig:Field:Group>
```

### Description

Use `Field:Content` and `Field:Description` for helper text.

```twig
<twig:Field:Group class="mx-auto w-72">
    <twig:Field orientation="horizontal">
        <twig:Checkbox id="terms-checkbox-desc" name="terms-checkbox-desc" checked />
        <twig:Field:Content>
            <twig:Field:Label for="terms-checkbox-desc">Accept terms and conditions</twig:Field:Label>
            <twig:Field:Description>By clicking this checkbox, you agree to the terms and conditions.</twig:Field:Description>
        </twig:Field:Content>
    </twig:Field>
</twig:Field:Group>
```

### Disabled

Use the `disabled` attribute to prevent interaction and add the `data-disabled` attribute to the `Field` component for disabled styles.

```twig
<twig:Field:Group class="mx-auto w-56">
    <twig:Field orientation="horizontal" data-disabled>
        <twig:Checkbox id="toggle-checkbox-disabled" name="toggle-checkbox-disabled" disabled />
        <twig:Field:Label for="toggle-checkbox-disabled">Enable notifications</twig:Field:Label>
    </twig:Field>
</twig:Field:Group>
```

### Group

Use multiple fields to create a checkbox list.

```twig
<twig:Field:Set>
    <twig:Field:Legend variant="label">Show these items on the desktop:</twig:Field:Legend>
    <twig:Field:Description>Select the items you want to show on the desktop.</twig:Field:Description>
    <twig:Field:Group class="gap-3">
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-hard-disks" name="finder-hard-disks" checked />
            <twig:Field:Label for="finder-hard-disks" class="font-normal">Hard disks</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-external-disks" name="finder-external-disks" checked />
            <twig:Field:Label for="finder-external-disks" class="font-normal">External disks</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-cds-dvds" name="finder-cds-dvds" />
            <twig:Field:Label for="finder-cds-dvds" class="font-normal">CDs, DVDs, and iPods</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-connected-servers" name="finder-connected-servers" />
            <twig:Field:Label for="finder-connected-servers" class="font-normal">Connected servers</twig:Field:Label>
        </twig:Field>
    </twig:Field:Group>
</twig:Field:Set>
```

### Table

```twig
<twig:Table>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head class="w-8">
                <twig:Checkbox id="select-all-checkbox" name="select-all-checkbox" />
            </twig:Table:Head>
            <twig:Table:Head>Name</twig:Table:Head>
            <twig:Table:Head>Email</twig:Table:Head>
            <twig:Table:Head>Role</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        <twig:Table:Row data-state="selected">
            <twig:Table:Cell>
                <twig:Checkbox id="row-1-checkbox" name="row-1-checkbox" checked />
            </twig:Table:Cell>
            <twig:Table:Cell class="font-medium">Sarah Chen</twig:Table:Cell>
            <twig:Table:Cell>sarah.chen@example.com</twig:Table:Cell>
            <twig:Table:Cell>Admin</twig:Table:Cell>
        </twig:Table:Row>
        <twig:Table:Row>
            <twig:Table:Cell>
                <twig:Checkbox id="row-2-checkbox" name="row-2-checkbox" />
            </twig:Table:Cell>
            <twig:Table:Cell class="font-medium">Marcus Rodriguez</twig:Table:Cell>
            <twig:Table:Cell>marcus.rodriguez@example.com</twig:Table:Cell>
            <twig:Table:Cell>User</twig:Table:Cell>
        </twig:Table:Row>
        <twig:Table:Row>
            <twig:Table:Cell>
                <twig:Checkbox id="row-3-checkbox" name="row-3-checkbox" />
            </twig:Table:Cell>
            <twig:Table:Cell class="font-medium">Priya Patel</twig:Table:Cell>
            <twig:Table:Cell>priya.patel@example.com</twig:Table:Cell>
            <twig:Table:Cell>User</twig:Table:Cell>
        </twig:Table:Row>
        <twig:Table:Row>
            <twig:Table:Cell>
                <twig:Checkbox id="row-4-checkbox" name="row-4-checkbox" />
            </twig:Table:Cell>
            <twig:Table:Cell class="font-medium">David Kim</twig:Table:Cell>
            <twig:Table:Cell>david.kim@example.com</twig:Table:Cell>
            <twig:Table:Cell>Editor</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Body>
</twig:Table>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-12 w-full items-center">
    {# Arabic #}
    <twig:Field:Group class="max-w-sm" dir="rtl">
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="terms-checkbox-ar" name="terms-checkbox-ar" />
            <twig:Label for="terms-checkbox-ar">قبول الشروط والأحكام</twig:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="terms-checkbox-2-ar" name="terms-checkbox-2-ar" checked />
            <twig:Field:Content>
                <twig:Field:Label for="terms-checkbox-2-ar">قبول الشروط والأحكام</twig:Field:Label>
                <twig:Field:Description>بالنقر على هذا المربع، فإنك توافق على الشروط.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal" data-disabled>
            <twig:Checkbox id="toggle-checkbox-ar" name="toggle-checkbox-ar" disabled />
            <twig:Field:Label for="toggle-checkbox-ar">تفعيل الإشعارات</twig:Field:Label>
        </twig:Field>
        <twig:Field:Label>
            <twig:Field orientation="horizontal">
                <twig:Checkbox id="toggle-checkbox-2-ar" name="toggle-checkbox-2-ar" />
                <twig:Field:Content>
                    <twig:Field:Title>تفعيل الإشعارات</twig:Field:Title>
                    <twig:Field:Description>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</twig:Field:Description>
                </twig:Field:Content>
            </twig:Field>
        </twig:Field:Label>
    </twig:Field:Group>
    {# Hebrew #}
    <twig:Field:Group class="max-w-sm" dir="rtl">
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="terms-checkbox-he" name="terms-checkbox-he" />
            <twig:Label for="terms-checkbox-he">קבל תנאים והגבלות</twig:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="terms-checkbox-2-he" name="terms-checkbox-2-he" checked />
            <twig:Field:Content>
                <twig:Field:Label for="terms-checkbox-2-he">קבל תנאים והגבלות</twig:Field:Label>
                <twig:Field:Description>על ידי לחיצה על תיבת הסימון הזו, אתה מסכים לתנאים.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal" data-disabled>
            <twig:Checkbox id="toggle-checkbox-he" name="toggle-checkbox-he" disabled />
            <twig:Field:Label for="toggle-checkbox-he">הדלק התראות</twig:Field:Label>
        </twig:Field>
        <twig:Field:Label>
            <twig:Field orientation="horizontal">
                <twig:Checkbox id="toggle-checkbox-2-he" name="toggle-checkbox-2-he" />
                <twig:Field:Content>
                    <twig:Field:Title>הדלק התראות</twig:Field:Title>
                    <twig:Field:Description>אתה יכול להדליק או לכבות התראות בכל עת.</twig:Field:Description>
                </twig:Field:Content>
            </twig:Field>
        </twig:Field:Label>
    </twig:Field:Group>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/collapsible.md">
# Collapsible

An interactive component which expands/collapses a panel.

```twig
<twig:Collapsible class="flex w-[350px] flex-col gap-2 self-start">
    <div class="flex items-center justify-between gap-4 px-4">
        <h4 class="text-sm font-semibold">Order #4189</h4>
        <twig:Collapsible:Trigger>
            <twig:Button variant="ghost" size="icon" class="size-8" {{ ...collapsible_trigger_attrs }}>
                <twig:ux:icon name="lucide:chevrons-up-down" class="size-4" />
                <span class="sr-only">Toggle details</span>
            </twig:Button>
        </twig:Collapsible:Trigger>
    </div>
    <div class="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span class="text-muted-foreground">Status</span>
        <span class="font-medium">Shipped</span>
    </div>
    <twig:Collapsible:Content class="flex flex-col gap-2">
        <div class="rounded-md border px-4 py-2 text-sm">
            <p class="font-medium">Shipping address</p>
            <p class="text-muted-foreground">100 Market St, San Francisco</p>
        </div>
        <div class="rounded-md border px-4 py-2 text-sm">
            <p class="font-medium">Items</p>
            <p class="text-muted-foreground">2x Studio Headphones</p>
        </div>
    </twig:Collapsible:Content>
</twig:Collapsible>
```

## Installation

```shell
php bin/console ux:install collapsible --kit shadcn
```
## Usage

```twig
<twig:Collapsible>
    <twig:Collapsible:Trigger>
        <twig:Button variant="ghost" {{ ...collapsible_trigger_attrs }}>Can I use this in my project?</twig:Button>
    </twig:Collapsible:Trigger>
    <twig:Collapsible:Content>
        Yes. Free to use for personal and commercial projects. No attribution required.
    </twig:Collapsible:Content>
</twig:Collapsible>
```

## Examples

### Basic

```twig
<twig:Card class="mx-auto w-full max-w-sm self-start">
    <twig:Card:Content>
        <twig:Collapsible class="rounded-md data-[state=open]:bg-muted">
            <twig:Collapsible:Trigger>
                <twig:Button variant="ghost" class="group w-full" {{ ...collapsible_trigger_attrs }}>
                    Product details
                    <twig:ux:icon name="lucide:chevron-down" class="ml-auto transition-transform group-data-[state=open]:rotate-180" />
                </twig:Button>
            </twig:Collapsible:Trigger>
            <twig:Collapsible:Content class="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm">
                <div>
                    This panel can be expanded or collapsed to reveal additional content.
                </div>
                <twig:Button size="xs">Learn More</twig:Button>
            </twig:Collapsible:Content>
        </twig:Collapsible>
    </twig:Card:Content>
</twig:Card>
```

### Settings Panel

Use a trigger button to reveal additional settings.

```twig
<twig:Card class="mx-auto w-full max-w-xs self-start" size="sm">
    <twig:Card:Header>
        <twig:Card:Title>Radius</twig:Card:Title>
        <twig:Card:Description>Set the corner radius of the element.</twig:Card:Description>
    </twig:Card:Header>
    <twig:Card:Content>
        <twig:Collapsible class="flex items-start gap-2">
            <div class="grid w-full grid-cols-2 gap-2">
                <twig:Field>
                    <twig:Field:Label for="radius-1" class="sr-only">Radius X</twig:Field:Label>
                    <twig:Input id="radius-1" placeholder="0" value="0" />
                </twig:Field>
                <twig:Field>
                    <twig:Field:Label for="radius-2" class="sr-only">Radius Y</twig:Field:Label>
                    <twig:Input id="radius-2" placeholder="0" value="0" />
                </twig:Field>
                <twig:Collapsible:Content class="col-span-full grid grid-cols-subgrid gap-2">
                    <twig:Field>
                        <twig:Field:Label for="radius-3" class="sr-only">Radius X</twig:Field:Label>
                        <twig:Input id="radius-3" placeholder="0" value="0" />
                    </twig:Field>
                    <twig:Field>
                        <twig:Field:Label for="radius-4" class="sr-only">Radius Y</twig:Field:Label>
                        <twig:Input id="radius-4" placeholder="0" value="0" />
                    </twig:Field>
                </twig:Collapsible:Content>
            </div>
            <twig:Collapsible:Trigger>
                <twig:Button variant="outline" size="icon" class="group" {{ ...collapsible_trigger_attrs }}>
                    <twig:ux:icon name="lucide:maximize" class="size-4 group-data-[state=open]:hidden" />
                    <twig:ux:icon name="lucide:minimize" class="size-4 hidden group-data-[state=open]:block" />
                </twig:Button>
            </twig:Collapsible:Trigger>
        </twig:Collapsible>
    </twig:Card:Content>
</twig:Card>
```

### File Tree

Use nested collapsibles to build a file tree.

```twig
<twig:Card class="mx-auto w-full max-w-[16rem] gap-2 self-start" size="sm">
    <twig:Card:Header>
        <twig:Tabs defaultValue="explorer">
            <twig:Tabs:List class="w-full">
                <twig:Tabs:Trigger value="explorer">Explorer</twig:Tabs:Trigger>
                <twig:Tabs:Trigger value="outline">Outline</twig:Tabs:Trigger>
            </twig:Tabs:List>
        </twig:Tabs>
    </twig:Card:Header>
    <twig:Card:Content>
        <div class="flex flex-col gap-1">
            {# Folder: components #}
            <twig:Collapsible>
                <twig:Collapsible:Trigger>
                    <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                        <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                        <twig:ux:icon name="lucide:folder" />
                        components
                    </twig:Button>
                </twig:Collapsible:Trigger>
                <twig:Collapsible:Content class="mt-1 ml-5">
                    <div class="flex flex-col gap-1">
                        {# Nested folder: components/ui #}
                        <twig:Collapsible>
                            <twig:Collapsible:Trigger>
                                <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                                    <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                                    <twig:ux:icon name="lucide:folder" />
                                    ui
                                </twig:Button>
                            </twig:Collapsible:Trigger>
                            <twig:Collapsible:Content class="mt-1 ml-5">
                                <div class="flex flex-col gap-1">
                                    {% for file in ['button.tsx', 'card.tsx', 'dialog.tsx', 'input.tsx', 'select.tsx', 'table.tsx'] %}
                                        <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                            <twig:ux:icon name="lucide:file" />
                                            <span>{{ file }}</span>
                                        </twig:Button>
                                    {% endfor %}
                                </div>
                            </twig:Collapsible:Content>
                        </twig:Collapsible>
                        {% for file in ['login-form.tsx', 'register-form.tsx'] %}
                            <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                <twig:ux:icon name="lucide:file" />
                                <span>{{ file }}</span>
                            </twig:Button>
                        {% endfor %}
                    </div>
                </twig:Collapsible:Content>
            </twig:Collapsible>

            {# Folder: lib #}
            <twig:Collapsible>
                <twig:Collapsible:Trigger>
                    <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                        <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                        <twig:ux:icon name="lucide:folder" />
                        lib
                    </twig:Button>
                </twig:Collapsible:Trigger>
                <twig:Collapsible:Content class="mt-1 ml-5">
                    <div class="flex flex-col gap-1">
                        {% for file in ['utils.ts', 'cn.ts', 'api.ts'] %}
                            <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                <twig:ux:icon name="lucide:file" />
                                <span>{{ file }}</span>
                            </twig:Button>
                        {% endfor %}
                    </div>
                </twig:Collapsible:Content>
            </twig:Collapsible>

            {# Folder: hooks #}
            <twig:Collapsible>
                <twig:Collapsible:Trigger>
                    <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                        <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                        <twig:ux:icon name="lucide:folder" />
                        hooks
                    </twig:Button>
                </twig:Collapsible:Trigger>
                <twig:Collapsible:Content class="mt-1 ml-5">
                    <div class="flex flex-col gap-1">
                        {% for file in ['use-media-query.ts', 'use-debounce.ts', 'use-local-storage.ts'] %}
                            <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                <twig:ux:icon name="lucide:file" />
                                <span>{{ file }}</span>
                            </twig:Button>
                        {% endfor %}
                    </div>
                </twig:Collapsible:Content>
            </twig:Collapsible>

            {# Folder: types #}
            <twig:Collapsible>
                <twig:Collapsible:Trigger>
                    <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                        <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                        <twig:ux:icon name="lucide:folder" />
                        types
                    </twig:Button>
                </twig:Collapsible:Trigger>
                <twig:Collapsible:Content class="mt-1 ml-5">
                    <div class="flex flex-col gap-1">
                        {% for file in ['index.d.ts', 'api.d.ts'] %}
                            <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                <twig:ux:icon name="lucide:file" />
                                <span>{{ file }}</span>
                            </twig:Button>
                        {% endfor %}
                    </div>
                </twig:Collapsible:Content>
            </twig:Collapsible>

            {# Folder: public #}
            <twig:Collapsible>
                <twig:Collapsible:Trigger>
                    <twig:Button variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground" {{ ...collapsible_trigger_attrs }}>
                        <twig:ux:icon name="lucide:chevron-right" class="transition-transform group-data-[state=open]:rotate-90" />
                        <twig:ux:icon name="lucide:folder" />
                        public
                    </twig:Button>
                </twig:Collapsible:Trigger>
                <twig:Collapsible:Content class="mt-1 ml-5">
                    <div class="flex flex-col gap-1">
                        {% for file in ['favicon.ico', 'logo.svg', 'images'] %}
                            <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                                <twig:ux:icon name="lucide:file" />
                                <span>{{ file }}</span>
                            </twig:Button>
                        {% endfor %}
                    </div>
                </twig:Collapsible:Content>
            </twig:Collapsible>

            {# Root files #}
            {% for file in ['app.tsx', 'layout.tsx', 'globals.css', 'package.json', 'tsconfig.json', 'README.md', '.gitignore'] %}
                <twig:Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
                    <twig:ux:icon name="lucide:file" />
                    <span>{{ file }}</span>
                </twig:Button>
            {% endfor %}
        </div>
    </twig:Card:Content>
</twig:Card>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex w-[350px] flex-col gap-4 self-start">
    {# Arabic #}
    <twig:Collapsible class="flex flex-col gap-2" dir="rtl">
        <div class="flex items-center justify-between gap-4 px-4">
            <h4 class="text-sm font-semibold">الطلب #4189</h4>
            <twig:Collapsible:Trigger>
                <twig:Button variant="ghost" size="icon" class="size-8" {{ ...collapsible_trigger_attrs }}>
                    <twig:ux:icon name="lucide:chevrons-up-down" class="size-4" />
                    <span class="sr-only">Toggle details</span>
                </twig:Button>
            </twig:Collapsible:Trigger>
        </div>
        <div class="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
            <span class="text-muted-foreground">الحالة</span>
            <span class="font-medium">تم الشحن</span>
        </div>
        <twig:Collapsible:Content class="flex flex-col gap-2">
            <div class="rounded-md border px-4 py-2 text-sm">
                <p class="font-medium">عنوان الشحن</p>
                <p class="text-muted-foreground">100 Market St, San Francisco</p>
            </div>
            <div class="rounded-md border px-4 py-2 text-sm">
                <p class="font-medium">العناصر</p>
                <p class="text-muted-foreground">2x سماعات الاستوديو</p>
            </div>
        </twig:Collapsible:Content>
    </twig:Collapsible>

    {# Hebrew #}
    <twig:Collapsible class="flex flex-col gap-2" dir="rtl">
        <div class="flex items-center justify-between gap-4 px-4">
            <h4 class="text-sm font-semibold">הזמנה #4189</h4>
            <twig:Collapsible:Trigger>
                <twig:Button variant="ghost" size="icon" class="size-8" {{ ...collapsible_trigger_attrs }}>
                    <twig:ux:icon name="lucide:chevrons-up-down" class="size-4" />
                    <span class="sr-only">Toggle details</span>
                </twig:Button>
            </twig:Collapsible:Trigger>
        </div>
        <div class="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
            <span class="text-muted-foreground">סטטוס</span>
            <span class="font-medium">נשלח</span>
        </div>
        <twig:Collapsible:Content class="flex flex-col gap-2">
            <div class="rounded-md border px-4 py-2 text-sm">
                <p class="font-medium">כתובת משלוח</p>
                <p class="text-muted-foreground">100 Market St, San Francisco</p>
            </div>
            <div class="rounded-md border px-4 py-2 text-sm">
                <p class="font-medium">מוצרים</p>
                <p class="text-muted-foreground">2x אוזניות סטודיו</p>
            </div>
        </twig:Collapsible:Content>
    </twig:Collapsible>
</div>
```

## API Reference

### `<twig:Collapsible>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `open` | `boolean` | `false` | Whether the collapsible is open by default. |

| Block | Description |
|:------|:------------|
| `content` | The collapsible content, typically a `Collapsible:Trigger` and a `Collapsible:Content`. |
### `<twig:Collapsible:Content>`

| Block | Description |
|:------|:------------|
| `content` | The content revealed when the collapsible is open. |
### `<twig:Collapsible:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The clickable element that toggles the collapsible (e.g., a `Button`). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/combobox.md">
# Combobox

Autocomplete input and command palette with a list of suggestions.

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
    {value: 'autocomplete', label: 'UX Autocomplete'},
    {value: 'icons', label: 'UX Icons'},
] %}
<div style="min-height: 220px">
    <twig:Combobox
        id="package"
        placeholder="Select package..."
        searchPlaceholder="Search packages..."
        :choices="packages"
    />
</div>
```

## Installation

```shell
php bin/console ux:install combobox --kit shadcn
```
## Usage

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
    {value: 'autocomplete', label: 'UX Autocomplete'},
    {value: 'icons', label: 'UX Icons'},
] %}
<twig:Combobox
    id="package-usage"
    placeholder="Select package..."
    searchPlaceholder="Search packages..."
    :choices="packages"
/>
```

## Examples

### With Default Value

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
    {value: 'autocomplete', label: 'UX Autocomplete'},
    {value: 'icons', label: 'UX Icons'},
] %}
<div style="min-height: 220px">
    <twig:Combobox
        id="package-default"
        value="live-component"
        placeholder="Select package..."
        searchPlaceholder="Search packages..."
        :choices="packages"
    />
</div>
```

### With Form

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
    {value: 'autocomplete', label: 'UX Autocomplete'},
    {value: 'icons', label: 'UX Icons'},
] %}
<div style="min-height: 220px">
    <form method="post" action="#" class="flex max-w-xs flex-col gap-4">
        <twig:Combobox
            id="package-form"
            name="package"
            placeholder="Select package..."
            searchPlaceholder="Search packages..."
            :choices="packages"
            :required="true"
        />
        <button
            type="submit"
            class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-xs hover:bg-primary/90"
        >Submit</button>
    </form>
</div>
```

### Disabled

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
] %}
<twig:Combobox
    id="package-disabled"
    placeholder="Select package..."
    searchPlaceholder="Search packages..."
    :choices="packages"
    :disabled="true"
/>
```

### Clearable

```twig
{% set packages = [
    {value: 'turbo', label: 'UX Turbo'},
    {value: 'twig-component', label: 'UX Twig Component'},
    {value: 'live-component', label: 'UX Live Component'},
    {value: 'autocomplete', label: 'UX Autocomplete'},
    {value: 'icons', label: 'UX Icons'},
] %}
<div style="min-height: 220px">
    <twig:Combobox
        id="package-clearable"
        value="live-component"
        placeholder="Select package..."
        searchPlaceholder="Search packages..."
        clearable
        :choices="packages"
    />
</div>
```

### With Groups

```twig
{% set packages = [
    {label: 'Stimulus', choices: [
        {value: 'twig-component', label: 'UX Twig Component'},
        {value: 'live-component', label: 'UX Live Component'},
        {value: 'autocomplete', label: 'UX Autocomplete'},
        {value: 'turbo', label: 'UX Turbo'},
    ]},
    {label: 'Frontend Frameworks', choices: [
        {value: 'react', label: 'UX React'},
        {value: 'vue', label: 'UX Vue'},
        {value: 'svelte', label: 'UX Svelte'},
    ]},
    {label: 'UI & Visualization', choices: [
        {value: 'icons', label: 'UX Icons'},
        {value: 'chartjs', label: 'UX Chart.js'},
        {value: 'map', label: 'UX Map'},
    ]},
] %}
<div style="min-height: 504px">
    <twig:Combobox
        id="package-grouped"
        placeholder="Select package..."
        searchPlaceholder="Search packages..."
        :choices="packages"
    />
</div>
```

### Empty State

```twig
{% set frameworks = [
    {value: 'next', label: 'Next.js'},
    {value: 'sveltekit', label: 'SvelteKit'},
] %}
<div style="min-height: 220px">
    <twig:Combobox
        id="framework-empty"
        placeholder="Select framework..."
        searchPlaceholder="Search framework..."
        emptyMessage="No frameworks found. Try a different search."
        :choices="frameworks"
    />
</div>
```

### Long List

```twig
{% set languages = [
    {value: 'php', label: 'PHP'},
    {value: 'javascript', label: 'JavaScript'},
    {value: 'typescript', label: 'TypeScript'},
    {value: 'python', label: 'Python'},
    {value: 'ruby', label: 'Ruby'},
    {value: 'go', label: 'Go'},
    {value: 'rust', label: 'Rust'},
    {value: 'java', label: 'Java'},
    {value: 'kotlin', label: 'Kotlin'},
    {value: 'swift', label: 'Swift'},
    {value: 'csharp', label: 'C#'},
    {value: 'cpp', label: 'C++'},
    {value: 'c', label: 'C'},
    {value: 'scala', label: 'Scala'},
    {value: 'elixir', label: 'Elixir'},
    {value: 'erlang', label: 'Erlang'},
    {value: 'haskell', label: 'Haskell'},
    {value: 'ocaml', label: 'OCaml'},
    {value: 'fsharp', label: 'F#'},
    {value: 'clojure', label: 'Clojure'},
    {value: 'dart', label: 'Dart'},
    {value: 'r', label: 'R'},
    {value: 'matlab', label: 'MATLAB'},
    {value: 'perl', label: 'Perl'},
    {value: 'lua', label: 'Lua'},
    {value: 'julia', label: 'Julia'},
    {value: 'groovy', label: 'Groovy'},
    {value: 'shell', label: 'Shell'},
    {value: 'powershell', label: 'PowerShell'},
    {value: 'sql', label: 'SQL'},
    {value: 'html', label: 'HTML'},
    {value: 'css', label: 'CSS'},
    {value: 'sass', label: 'Sass'},
    {value: 'less', label: 'Less'},
    {value: 'graphql', label: 'GraphQL'},
    {value: 'yaml', label: 'YAML'},
    {value: 'toml', label: 'TOML'},
    {value: 'json', label: 'JSON'},
    {value: 'xml', label: 'XML'},
    {value: 'markdown', label: 'Markdown'},
    {value: 'latex', label: 'LaTeX'},
    {value: 'zig', label: 'Zig'},
    {value: 'nim', label: 'Nim'},
    {value: 'crystal', label: 'Crystal'},
    {value: 'reason', label: 'ReasonML'},
    {value: 'elm', label: 'Elm'},
    {value: 'purescript', label: 'PureScript'},
    {value: 'coffeescript', label: 'CoffeeScript'},
    {value: 'objective-c', label: 'Objective-C'},
    {value: 'vba', label: 'VBA'},
    {value: 'cobol', label: 'COBOL'},
] %}
<div style="min-height: 454px">
    <twig:Combobox
        id="language"
        placeholder="Select language..."
        searchPlaceholder="Search languages..."
        :choices="languages"
    />
</div>
```

## API Reference

### `<twig:Combobox>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier for ARIA references and internal element IDs. |
| `name` | `string\|null` | `null` | If set, renders a hidden input for form submission. |
| `value` | `string` | `''` | The initially selected value. Must match a choices entry. |
| `choices` | `array` | `[]` | List of choices: `[{value: '...', label: '...'}]` or grouped `[{label: '...', choices: [{value: '...', label: '...'}]}]`. |
| `placeholder` | `string` | `'Select option...'` | Text shown on the trigger when nothing is selected. |
| `searchPlaceholder` | `string` | `'Search...'` | Placeholder inside the search input. |
| `emptyMessage` | `string` | `'No results found.'` | Shown when the filter matches nothing. |
| `disabled` | `boolean` | `false` | Whether the widget is disabled. |
| `required` | `boolean` | `false` | Adds required to the hidden input (only applies when name is set). |
| `clearable` | `boolean` | `false` | Shows a clear button when a value is selected. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/dialog.md">
# Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

```twig
<div style="min-height: 354px">
    <twig:Dialog id="edit_profile">
        <twig:Dialog:Trigger>
            <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
        </twig:Dialog:Trigger>
        <twig:Dialog:Content>
            <twig:Dialog:Header>
                <twig:Dialog:Title>Edit profile</twig:Dialog:Title>
                <twig:Dialog:Description>
                    Make changes to your profile here. Click save when you&apos;re done.
                </twig:Dialog:Description>
            </twig:Dialog:Header>
            <div class="grid gap-4">
                <div class="grid gap-3">
                    <twig:Label for="name">Name</twig:Label>
                    <twig:Input id="name" name="name" value="Pedro Duarte" />
                </div>
                <div class="grid gap-3">
                    <twig:Label for="username">Username</twig:Label>
                    <twig:Input id="username" name="username" value="@peduarte" />
                </div>
            </div>
            <twig:Dialog:Footer>
                <twig:Dialog:Close>
                    <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
                </twig:Dialog:Close>
                <twig:Button type="submit">Save changes</twig:Button>
            </twig:Dialog:Footer>
        </twig:Dialog:Content>
    </twig:Dialog>
</div>
```

## Installation

```shell
php bin/console ux:install dialog --kit shadcn
```
## Usage

```twig
<twig:Dialog id="delete_account">
    <twig:Dialog:Trigger>
        <twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
    </twig:Dialog:Trigger>
    <twig:Dialog:Content>
        <twig:Dialog:Header>
            <twig:Dialog:Title>Are you absolutely sure?</twig:Dialog:Title>
            <twig:Dialog:Description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </twig:Dialog:Description>
        </twig:Dialog:Header>
    </twig:Dialog:Content>
</twig:Dialog>
```

## Examples

### Custom Close Button

Replace the default close control with your own button.

```twig
<div style="min-height: 354px">
    <twig:Dialog id="share_link">
        <twig:Dialog:Trigger>
            <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Share</twig:Button>
        </twig:Dialog:Trigger>
        <twig:Dialog:Content class="sm:max-w-md">
            <twig:Dialog:Header>
                <twig:Dialog:Title>Share link</twig:Dialog:Title>
                <twig:Dialog:Description>
                    Anyone who has this link will be able to view this.
                </twig:Dialog:Description>
            </twig:Dialog:Header>
            <div class="flex items-center gap-2">
                <div class="grid flex-1 gap-2">
                    <twig:Label for="link" class="sr-only">Link</twig:Label>
                    <twig:Input id="link" value="https://ui.shadcn.com/docs/installation" readonly />
                </div>
            </div>
            <twig:Dialog:Footer class="sm:justify-start">
                <twig:Dialog:Close>
                    <twig:Button type="button" {{ ...dialog_close_attrs }}>Close</twig:Button>
                </twig:Dialog:Close>
            </twig:Dialog:Footer>
        </twig:Dialog:Content>
    </twig:Dialog>
</div>
```

### No Close Button

Set the `showCloseButton` prop to `false` to hide the close button.

```twig
<div style="min-height: 354px">
    <twig:Dialog id="no_close_button">
        <twig:Dialog:Trigger>
            <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>No Close Button</twig:Button>
        </twig:Dialog:Trigger>
        <twig:Dialog:Content showCloseButton="{{ false }}">
            <twig:Dialog:Header>
                <twig:Dialog:Title>No Close Button</twig:Dialog:Title>
                <twig:Dialog:Description>
                    This dialog doesn&apos;t have a close button in the top-right corner.
                </twig:Dialog:Description>
            </twig:Dialog:Header>
        </twig:Dialog:Content>
    </twig:Dialog>
</div>
```

### Sticky Footer

Keep actions visible while the content scrolls.

```twig
<div style="min-height: 354px">
    <twig:Dialog id="sticky_footer">
        <twig:Dialog:Trigger>
            <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Sticky Footer</twig:Button>
        </twig:Dialog:Trigger>
        <twig:Dialog:Content>
            <twig:Dialog:Header>
                <twig:Dialog:Title>Sticky Footer</twig:Dialog:Title>
                <twig:Dialog:Description>
                    This dialog has a sticky footer that stays visible while the content scrolls.
                </twig:Dialog:Description>
            </twig:Dialog:Header>
            <div class="-mx-4 max-h-[50vh] overflow-y-auto px-4">
                {% for i in 1..10 %}
                    <p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                {% endfor %}
            </div>
            <twig:Dialog:Footer>
                <twig:Dialog:Close>
                    <twig:Button variant="outline" {{ ...dialog_close_attrs }}>Close</twig:Button>
                </twig:Dialog:Close>
            </twig:Dialog:Footer>
        </twig:Dialog:Content>
    </twig:Dialog>
</div>
```

### Scrollable Content

Long content can scroll while the header stays in view.

```twig
<div style="min-height: 354px">
    <twig:Dialog id="scrollable_content">
        <twig:Dialog:Trigger>
            <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Scrollable Content</twig:Button>
        </twig:Dialog:Trigger>
        <twig:Dialog:Content>
            <twig:Dialog:Header>
                <twig:Dialog:Title>Scrollable Content</twig:Dialog:Title>
                <twig:Dialog:Description>
                    This is a dialog with scrollable content.
                </twig:Dialog:Description>
            </twig:Dialog:Header>
            <div class="-mx-4 max-h-[50vh] overflow-y-auto px-4">
                {% for i in 1..10 %}
                    <p class="mb-4 leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                {% endfor %}
            </div>
        </twig:Dialog:Content>
    </twig:Dialog>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div style="min-height: 354px">
    <div class="flex flex-col gap-4">
        {# Arabic #}
        <twig:Dialog id="dialog_rtl_ar">
            <twig:Dialog:Trigger>
                <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>فتح الحوار</twig:Button>
            </twig:Dialog:Trigger>
            <twig:Dialog:Content dir="rtl">
                <twig:Dialog:Header>
                    <twig:Dialog:Title>تعديل الملف الشخصي</twig:Dialog:Title>
                    <twig:Dialog:Description>
                        قم بإجراء تغييرات على ملفك الشخصي هنا. انقر فوق حفظ عند الانتهاء.
                    </twig:Dialog:Description>
                </twig:Dialog:Header>
                <div class="grid gap-4">
                    <div class="grid gap-3">
                        <twig:Label for="name-ar">الاسم</twig:Label>
                        <twig:Input id="name-ar" name="name" value="Pedro Duarte" />
                    </div>
                    <div class="grid gap-3">
                        <twig:Label for="username-ar">اسم المستخدم</twig:Label>
                        <twig:Input id="username-ar" name="username" value="@peduarte" />
                    </div>
                </div>
                <twig:Dialog:Footer>
                    <twig:Dialog:Close>
                        <twig:Button variant="outline" {{ ...dialog_close_attrs }}>إلغاء</twig:Button>
                    </twig:Dialog:Close>
                    <twig:Button type="submit">حفظ التغييرات</twig:Button>
                </twig:Dialog:Footer>
            </twig:Dialog:Content>
        </twig:Dialog>

        {# Hebrew #}
        <twig:Dialog id="dialog_rtl_he">
            <twig:Dialog:Trigger>
                <twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>הצג דיאלוג</twig:Button>
            </twig:Dialog:Trigger>
            <twig:Dialog:Content dir="rtl">
                <twig:Dialog:Header>
                    <twig:Dialog:Title>ערוך נתונים</twig:Dialog:Title>
                    <twig:Dialog:Description>
                        ניתן לשנות נתונים כאן. לחץ שמור בסיום.
                    </twig:Dialog:Description>
                </twig:Dialog:Header>
                <div class="grid gap-4">
                    <div class="grid gap-3">
                        <twig:Label for="name-he">שם</twig:Label>
                        <twig:Input id="name-he" name="name" value="Pedro Duarte" />
                    </div>
                    <div class="grid gap-3">
                        <twig:Label for="username-he">שם משתמש</twig:Label>
                        <twig:Input id="username-he" name="username" value="@peduarte" />
                    </div>
                </div>
                <twig:Dialog:Footer>
                    <twig:Dialog:Close>
                        <twig:Button variant="outline" {{ ...dialog_close_attrs }}>בטל</twig:Button>
                    </twig:Dialog:Close>
                    <twig:Button type="submit">שמור שינויים</twig:Button>
                </twig:Dialog:Footer>
            </twig:Dialog:Content>
        </twig:Dialog>
    </div>
</div>
```

## API Reference

### `<twig:Dialog>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier used to generate internal Dialog IDs. |
| `open` | `boolean` | `false` | Whether the dialog is open on initial render. |

| Block | Description |
|:------|:------------|
| `content` | The dialog structure, typically includes `Dialog:Trigger` and `Dialog:Content`. |
### `<twig:Dialog:Close>`

| Block | Description |
|:------|:------------|
| `content` | The close trigger element (e.g., a `Button`) that closes the dialog when clicked. |
### `<twig:Dialog:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `showCloseButton` | `boolean` | `true` | Whether to display the close button in the top-right corner. |

| Block | Description |
|:------|:------------|
| `content` | The dialog content, typically includes `Dialog:Header` and optionally `Dialog:Footer`. |
### `<twig:Dialog:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text explaining the dialog purpose. |
### `<twig:Dialog:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains action buttons. |
### `<twig:Dialog:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Dialog:Title` and `Dialog:Description`. |
### `<twig:Dialog:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the dialog. |
### `<twig:Dialog:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The trigger element (e.g., a `Button`) that opens the dialog when clicked. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/empty.md">
# Empty

Use the Empty component to display an empty state.

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

## Installation

```shell
php bin/console ux:install empty --kit shadcn
```
## Usage

```twig
<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Media variant="icon">
            <twig:ux:icon name="lucide:braces" />
        </twig:Empty:Media>
        <twig:Empty:Title>No data</twig:Empty:Title>
        <twig:Empty:Description>No data found</twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button>Add data</twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

## Examples

### Outline

Use the `border` utility class to create an outline empty state.

```twig
<twig:Empty class="border border-dashed">
    <twig:Empty:Header>
        <twig:Empty:Media variant="icon">
            <twig:ux:icon name="tabler:cloud" />
        </twig:Empty:Media>
        <twig:Empty:Title>Cloud Storage Empty</twig:Empty:Title>
        <twig:Empty:Description>
            Upload files to your cloud storage to access them anywhere.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button variant="outline" size="sm">
            Upload Files
        </twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

### Background

Use the `bg-*` utilities to add a background to the empty state.

```twig
<twig:Empty class="h-full bg-muted/30">
    <twig:Empty:Header>
        <twig:Empty:Media variant="icon">
            <twig:ux:icon name="lucide:bell" />
        </twig:Empty:Media>
        <twig:Empty:Title>No Notifications</twig:Empty:Title>
        <twig:Empty:Description>
            You&apos;re all caught up. New notifications will appear here.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button variant="outline">
            <twig:ux:icon name="lucide:refresh-ccw" />
            Refresh
        </twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

### Avatar

Use the `Empty:Media` component to display an avatar in the empty state.

```twig
<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Media>
            <twig:Avatar class="size-12">
                <twig:Avatar:Image
                    src="https://github.com/shadcn.png"
                    alt="@shadcn"
                    class="grayscale"
                />
                <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Empty:Media>
        <twig:Empty:Title>User Offline</twig:Empty:Title>
        <twig:Empty:Description>
            This user is currently offline. You can leave a message to notify them or try again later.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button size="sm">Leave Message</twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

### Avatar Group

Use the `Empty:Media` component to display an avatar group in the empty state.

```twig
<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Media>
            <div class="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                <twig:Avatar>
                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar>
                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                    <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar>
                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                    <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
                </twig:Avatar>
            </div>
        </twig:Empty:Media>
        <twig:Empty:Title>No Team Members</twig:Empty:Title>
        <twig:Empty:Description>
            Invite your team to collaborate on this project.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button size="sm">
            <twig:ux:icon name="lucide:plus" />
            Invite Members
        </twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

### InputGroup

You can add an `InputGroup` component to the `Empty:Content` component.

```twig
<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Title>404 - Not Found</twig:Empty:Title>
        <twig:Empty:Description>
            The page you&apos;re looking for doesn&apos;t exist. Try searching for what you need below.
        </twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:InputGroup class="sm:w-3/4">
            <twig:InputGroup:Input placeholder="Try searching for pages..." />
            <twig:InputGroup:Addon>
                <twig:ux:icon name="lucide:search" />
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">
                <twig:Kbd>/</twig:Kbd>
            </twig:InputGroup:Addon>
        </twig:InputGroup>
        <twig:Empty:Description>
            Need help? <a href="#">Contact support</a>
        </twig:Empty:Description>
    </twig:Empty:Content>
</twig:Empty>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex w-full flex-col gap-8">
    {# Arabic #}
    <twig:Empty dir="rtl">
        <twig:Empty:Header>
            <twig:Empty:Media variant="icon">
                <twig:ux:icon name="tabler:folder-code" />
            </twig:Empty:Media>
            <twig:Empty:Title>لا توجد مشاريع بعد</twig:Empty:Title>
            <twig:Empty:Description>
                لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.
            </twig:Empty:Description>
        </twig:Empty:Header>
        <twig:Empty:Content class="flex-row justify-center gap-2">
            <twig:Button>إنشاء مشروع</twig:Button>
            <twig:Button variant="outline">استيراد مشروع</twig:Button>
        </twig:Empty:Content>
        <twig:Button variant="link" as="a" href="#" size="sm" class="text-muted-foreground">
            تعرف على المزيد <twig:ux:icon name="lucide:arrow-up-right" class="rtl:-rotate-90" data-icon="inline-end" />
        </twig:Button>
    </twig:Empty>

    {# Hebrew #}
    <twig:Empty dir="rtl">
        <twig:Empty:Header>
            <twig:Empty:Media variant="icon">
                <twig:ux:icon name="tabler:folder-code" />
            </twig:Empty:Media>
            <twig:Empty:Title>אין מיזמים עדיין</twig:Empty:Title>
            <twig:Empty:Description>
                עדיין לא יצרת מיזמים. התחל ביצירת המיזם הראשון שלך.
            </twig:Empty:Description>
        </twig:Empty:Header>
        <twig:Empty:Content class="flex-row justify-center gap-2">
            <twig:Button>צור מיזם</twig:Button>
            <twig:Button variant="outline">ייבא מיזם</twig:Button>
        </twig:Empty:Content>
        <twig:Button variant="link" as="a" href="#" size="sm" class="text-muted-foreground">
            למד עוד <twig:ux:icon name="lucide:arrow-up-right" class="rtl:-rotate-90" data-icon="inline-end" />
        </twig:Button>
    </twig:Empty>
</div>
```

## API Reference

### `<twig:Empty>`

| Block | Description |
|:------|:------------|
| `content` | The empty state content, typically includes `Empty:Media`, `Empty:Header`, and/or `Empty:Content`. |
### `<twig:Empty:Content>`

| Block | Description |
|:------|:------------|
| `content` | The main content area, typically contains actions like buttons. |
### `<twig:Empty:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text explaining the empty state. |
### `<twig:Empty:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains `Empty:Title` and `Empty:Description`. |
### `<twig:Empty:Media>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'icon'` | `'default'` | The media display style. |

| Block | Description |
|:------|:------------|
| `content` | The visual element, typically an icon or illustration. |
### `<twig:Empty:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the empty state. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/field.md">
# Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

```twig
<div class="w-full max-w-md">
    <form>
        <twig:Field:Group>
            <twig:Field:Set>
                <twig:Field:Legend>Payment Method</twig:Field:Legend>
                <twig:Field:Description>
                    All transactions are secure and encrypted
                </twig:Field:Description>
                <twig:Field:Group>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-card-name-43j">
                            Name on Card
                        </twig:Field:Label>
                        <twig:Input
                            id="checkout-7j9-card-name-43j"
                            placeholder="Evil Rabbit"
                            required
                        />
                    </twig:Field>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-card-number-uw1">
                            Card Number
                        </twig:Field:Label>
                        <twig:Input
                            id="checkout-7j9-card-number-uw1"
                            placeholder="1234 5678 9012 3456"
                            required
                        />
                        <twig:Field:Description>
                            Enter your 16-digit card number
                        </twig:Field:Description>
                    </twig:Field>
                    <div class="grid grid-cols-3 gap-4">
                        <twig:Field>
                            <twig:Field:Label for="checkout-exp-month-ts6">
                                Month
                            </twig:Field:Label>
                            <twig:Select id="checkout-exp-month-ts6">
                                <option value="" disabled selected>MM</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </twig:Select>
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="checkout-7j9-exp-year-f59">
                                Year
                            </twig:Field:Label>
                            <twig:Select>
                                <option value="" disabled selected>YYY</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                                <option value="2027">2027</option>
                                <option value="2028">2028</option>
                                <option value="2029">2029</option>
                            </twig:Select>
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="checkout-7j9-cvv">CVV</twig:Field:Label>
                            <twig:Input id="checkout-7j9-cvv" placeholder="123" required />
                        </twig:Field>
                    </div>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field:Separator />
            <twig:Field:Set>
                <twig:Field:Legend>Billing Address</twig:Field:Legend>
                <twig:Field:Description>
                    The billing address associated with your payment method
                </twig:Field:Description>
                <twig:Field:Group>
                    <twig:Field orientation="horizontal">
                        <twig:Checkbox
                            id="checkout-7j9-same-as-shipping-wgm"
                            checked
                        />
                        <twig:Field:Label
                            for="checkout-7j9-same-as-shipping-wgm"
                            class="font-normal"
                        >
                            Same as shipping address
                        </twig:Field:Label>
                    </twig:Field>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field:Set>
                <twig:Field:Group>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-optional-comments">
                            Comments
                        </twig:Field:Label>
                        <twig:Textarea
                            id="checkout-7j9-optional-comments"
                            placeholder="Add any additional comments"
                            class="resize-none"
                        />
                    </twig:Field>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field orientation="horizontal">
                <twig:Button type="submit">Submit</twig:Button>
                <twig:Button variant="outline" type="button">
                    Cancel
                </twig:Button>
            </twig:Field>
        </twig:Field:Group>
    </form>
</div>
```

## Installation

```shell
php bin/console ux:install field --kit shadcn
```
## Usage

```twig
<twig:Field:Set>
    <twig:Field:Legend>Profile</twig:Field:Legend>
    <twig:Field:Description>This appears on invoices and emails.</twig:Field:Description>
    <twig:Field:Group>
        <twig:Field>
            <twig:Field:Label for="name">Full name</twig:Field:Label>
            <twig:Input id="name" autocomplete="off" placeholder="Evil Rabbit" />
            <twig:Field:Description>This appears on invoices and emails.</twig:Field:Description>
        </twig:Field>
        <twig:Field>
            <twig:Field:Label for="username">Username</twig:Field:Label>
            <twig:Input id="username" autocomplete="off" aria-invalid />
            <twig:Field:Error>Choose another username.</twig:Field:Error>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Switch id="newsletter" />
            <twig:Field:Label for="newsletter">Subscribe to the newsletter</twig:Field:Label>
        </twig:Field>
    </twig:Field:Group>
</twig:Field:Set>
```

## Examples

### Input

```twig
<div class="w-full max-w-md">
    <twig:Field:Set>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="username">Username</twig:Field:Label>
                <twig:Input id="username" type="text" placeholder="Max Leiter" />
                <twig:Field:Description>
                    Choose a unique username for your account.
                </twig:Field:Description>
            </twig:Field>
            <twig:Field>
                <twig:Field:Label for="password">Password</twig:Field:Label>
                <twig:Field:Description>
                    Must be at least 8 characters long.
                </twig:Field:Description>
                <twig:Input id="password" type="password" placeholder="••••••••" />
            </twig:Field>
        </twig:Field:Group>
    </twig:Field:Set>
</div>
```

### Textarea

```twig
<div class="w-full max-w-md">
    <twig:Field:Set>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="feedback">Feedback</twig:Field:Label>
                <twig:Textarea
                    id="feedback"
                    placeholder="Your feedback helps us improve..."
                    rows="4"
                />
                <twig:Field:Description>
                    Share your thoughts about our service.
                </twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </twig:Field:Set>
</div>
```

### Select

```twig
<div class="w-full max-w-md">
    <twig:Field>
        <twig:Field:Label for="department">Department</twig:Field:Label>
        <twig:Select id="department">
            <option value="engineering">Engineering</option>
            <option value="design">Design</option>
            <option value="marketing">Marketing</option>
            <option value="sales">Sales</option>
            <option value="support">Customer Support</option>
            <option value="hr">Human Resources</option>
            <option value="finance">Finance</option>
            <option value="operations">Operations</option>
        </twig:Select>
        <twig:Field:Description>
            Select your department or area of work.
        </twig:Field:Description>
    </twig:Field>
</div>
```

### Fieldset

```twig
<div class="w-full max-w-md space-y-6">
    <twig:Field:Set>
        <twig:Field:Legend>Address information</twig:Field:Legend>
        <twig:Field:Description>
            We need your address to deliver your order.
        </twig:Field:Description>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="street">Street address</twig:Field:Label>
                <twig:Input id="street" type="text" placeholder="123 Main St" />
            </twig:Field>
            <div class="grid grid-cols-2 gap-4">
                <twig:Field>
                    <twig:Field:Label for="city">City</twig:Field:Label>
                    <twig:Input id="city" type="text" placeholder="New York" />
                </twig:Field>
                <twig:Field>
                    <twig:Field:Label for="zip">Postal code</twig:Field:Label>
                    <twig:Input id="zip" type="text" placeholder="90502" />
                </twig:Field>
            </div>
        </twig:Field:Group>
    </twig:Field:Set>
</div>
```

### Checkbox

```twig
<div class="w-full max-w-md">
    <twig:Field:Group>
        <twig:Field:Set>
            <twig:Field:Legend variant="label">
                Show these items on the desktop
            </twig:Field:Legend>
            <twig:Field:Description>
                Select the items you want to show on the desktop.
            </twig:Field:Description>
            <twig:Field:Group class="gap-3">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-hard-disks-ljj" />
                    <twig:Field:Label
                        for="finder-pref-9k2-hard-disks-ljj"
                        class="font-normal"
                        checked
                    >
                        Hard disks
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-external-disks-1yg" />
                    <twig:Field:Label
                        for="finder-pref-9k2-external-disks-1yg"
                        class="font-normal"
                    >
                        External disks
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
                    <twig:Field:Label
                        for="finder-pref-9k2-cds-dvds-fzt"
                        class="font-normal"
                    >
                        CDs, DVDs, and iPods
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-connected-servers-6l2" />
                    <twig:Field:Label
                        for="finder-pref-9k2-connected-servers-6l2"
                        class="font-normal"
                    >
                        Connected servers
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
        <twig:Field:Separator />
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-pref-9k2-sync-folders-nep" checked />
            <twig:Field:Content>
                <twig:Field:Label for="finder-pref-9k2-sync-folders-nep">
                    Sync Desktop & Documents folders
                </twig:Field:Label>
                <twig:Field:Description>
                    Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
                </twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
    </twig:Field:Group>
</div>
```

### Switch

```twig
<twig:Field orientation="horizontal" class="w-fit">
    <twig:Field:Label for="2fa">Multi-factor authentication</twig:Field:Label>
    <twig:Switch id="2fa" />
</twig:Field>
```

### Choice Card

Wrap `Field` components inside `Field:Label` to create selectable field groups. This works with `RadioGroup:Item`, `Checkbox`, and `Switch` components.

```twig
<twig:Field:Group class="w-full max-w-xs">
    <twig:Field:Set>
        <twig:Field:Legend variant="label">Compute Environment</twig:Field:Legend>
        <twig:Field:Description>Select the compute environment for your cluster.</twig:Field:Description>
        <twig:RadioGroup>
            <twig:Field:Label for="kubernetes-r2h">
                <twig:Field orientation="horizontal">
                    <twig:Field:Content>
                        <twig:Field:Title>Kubernetes</twig:Field:Title>
                        <twig:Field:Description>Run GPU workloads on a K8s cluster.</twig:Field:Description>
                    </twig:Field:Content>
                    <twig:RadioGroup:Item name="compute" value="kubernetes" id="kubernetes-r2h" checked />
                </twig:Field>
            </twig:Field:Label>
            <twig:Field:Label for="vm-z4k">
                <twig:Field orientation="horizontal">
                    <twig:Field:Content>
                        <twig:Field:Title>Virtual Machine</twig:Field:Title>
                        <twig:Field:Description>Access a cluster to run GPU workloads.</twig:Field:Description>
                    </twig:Field:Content>
                    <twig:RadioGroup:Item name="compute" value="vm" id="vm-z4k" />
                </twig:Field>
            </twig:Field:Label>
        </twig:RadioGroup>
    </twig:Field:Set>
</twig:Field:Group>
```

### Field Group

```twig
<div class="w-full max-w-md">
    <twig:Field:Group>
        <twig:Field:Set>
            <twig:Field:Label>Responses</twig:Field:Label>
            <twig:Field:Description>
                Get notified when ChatGPT responds to requests that take time, like research or image generation.
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push" checked disabled />
                    <twig:Field:Label for="push" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
        <twig:Field:Separator />
        <twig:Field:Set>
            <twig:Field:Label>Tasks</twig:Field:Label>
            <twig:Field:Description>
                Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push-tasks" />
                    <twig:Field:Label for="push-tasks" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="email-tasks" />
                    <twig:Field:Label for="email-tasks" class="font-normal">
                        Email notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
    </twig:Field:Group>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8 w-full items-center">
    <div dir="rtl" class="w-full max-w-md">
        <form>
            <twig:Field:Group>
                <twig:Field:Set>
                    <twig:Field:Legend>طريقة الدفع</twig:Field:Legend>
                    <twig:Field:Description>جميع المعاملات آمنة ومشفرة</twig:Field:Description>
                    <twig:Field:Group>
                        <twig:Field>
                            <twig:Field:Label for="rtl-ar-name">الاسم على البطاقة</twig:Field:Label>
                            <twig:Input id="rtl-ar-name" placeholder="Evil Rabbit" required />
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="rtl-ar-comments">تعليقات</twig:Field:Label>
                            <twig:Textarea id="rtl-ar-comments" placeholder="أضف أي تعليقات إضافية" class="resize-none" />
                        </twig:Field>
                    </twig:Field:Group>
                </twig:Field:Set>
                <twig:Field orientation="horizontal">
                    <twig:Button type="submit">إرسال</twig:Button>
                    <twig:Button variant="outline" type="button">إلغاء</twig:Button>
                </twig:Field>
            </twig:Field:Group>
        </form>
    </div>

    <div dir="rtl" class="w-full max-w-md">
        <form>
            <twig:Field:Group>
                <twig:Field:Set>
                    <twig:Field:Legend>שיטת תשלום</twig:Field:Legend>
                    <twig:Field:Description>כל העסקאות מאובטחות ומוגנות</twig:Field:Description>
                    <twig:Field:Group>
                        <twig:Field>
                            <twig:Field:Label for="rtl-he-name">שם מלא</twig:Field:Label>
                            <twig:Input id="rtl-he-name" placeholder="Evil Rabbit" required />
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="rtl-he-comments">הערות</twig:Field:Label>
                            <twig:Textarea id="rtl-he-comments" placeholder="כתוב הערות" class="resize-none" />
                        </twig:Field>
                    </twig:Field:Group>
                </twig:Field:Set>
                <twig:Field orientation="horizontal">
                    <twig:Button type="submit">שלח</twig:Button>
                    <twig:Button variant="outline" type="button">בטל</twig:Button>
                </twig:Field>
            </twig:Field:Group>
        </form>
    </div>
</div>
```

## API Reference

### `<twig:Field>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'vertical'\|'horizontal'\|'responsive'` | `'vertical'` | The layout direction of the field. |

| Block | Description |
|:------|:------------|
| `content` | The field content, typically includes `Field:Label` and form input(s). |
### `<twig:Field:Content>`

| Block | Description |
|:------|:------------|
| `content` | The input and supplementary elements like `Field:Description` and `Field:Error`. |
### `<twig:Field:Description>`

| Block | Description |
|:------|:------------|
| `content` | The helper text describing the field. |
### `<twig:Field:Error>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `errors` | `array` | `[]` | A list of error messages (strings or objects with a `message` property). |

| Block | Description |
|:------|:------------|
| `content` | Custom error content, overrides the `errors` prop if provided. |
### `<twig:Field:Group>`

| Block | Description |
|:------|:------------|
| `content` | The grouped fields, typically multiple `Field` components. |
### `<twig:Field:Label>`

| Block | Description |
|:------|:------------|
| `content` | The label text for the field. |
### `<twig:Field:Legend>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'legend'\|'label'` | `'legend'` | The text size variant. |

| Block | Description |
|:------|:------------|
| `content` | The legend text for a fieldset. |
### `<twig:Field:Separator>`

| Block | Description |
|:------|:------------|
| `content` | Optional text displayed in the center of the separator. |
### `<twig:Field:Set>`

| Block | Description |
|:------|:------------|
| `content` | The fieldset content, typically includes `Field:Legend` and `Field` components. |
### `<twig:Field:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text for the field (non-label variant). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/hover-card.md">
# Hover Card

For sighted users to preview content available behind a link.

```twig
<div class="flex items-start justify-center" style="min-height: 120px">
    <twig:HoverCard openDelay="10" closeDelay="100">
        <twig:HoverCard:Trigger>
            <twig:Button variant="link" {{ ...hover_card_trigger_attrs }}>Hover Here</twig:Button>
        </twig:HoverCard:Trigger>
        <twig:HoverCard:Content class="flex w-64 flex-col gap-0.5">
            <div class="font-semibold">@symfony</div>
            <div>The PHP framework for web applications — created by @fabpot.</div>
            <div class="mt-1 text-xs text-muted-foreground">Joined October 2010</div>
        </twig:HoverCard:Content>
    </twig:HoverCard>
</div>
```

## Installation

```shell
php bin/console ux:install hover-card --kit shadcn
```
## Usage

```twig
<twig:HoverCard>
    <twig:HoverCard:Trigger>
        <a href="#" class="underline" {{ ...hover_card_trigger_attrs }}>@symfony</a>
    </twig:HoverCard:Trigger>
    <twig:HoverCard:Content>
        The Symfony PHP framework — official organization on GitHub.
    </twig:HoverCard:Content>
</twig:HoverCard>
```

## Examples

### Basic

```twig
<div class="flex items-start justify-center" style="min-height: 120px">
    <twig:HoverCard openDelay="10" closeDelay="100">
        <twig:HoverCard:Trigger>
            <twig:Button variant="link" {{ ...hover_card_trigger_attrs }}>Hover Here</twig:Button>
        </twig:HoverCard:Trigger>
        <twig:HoverCard:Content class="flex w-64 flex-col gap-0.5">
            <div class="font-semibold">@symfony</div>
            <div>The PHP framework for web applications — created by @fabpot.</div>
            <div class="mt-1 text-xs text-muted-foreground">Joined October 2010</div>
        </twig:HoverCard:Content>
    </twig:HoverCard>
</div>
```

### Sides

```twig
<div class="flex flex-wrap items-center justify-center gap-2" style="min-height: 204px">
    {% for side in ['left', 'top', 'bottom', 'right'] %}
        <twig:HoverCard openDelay="100" closeDelay="100">
            <twig:HoverCard:Trigger>
                <twig:Button variant="outline" class="capitalize" {{ ...hover_card_trigger_attrs }}>{{ side }}</twig:Button>
            </twig:HoverCard:Trigger>
            <twig:HoverCard:Content side="{{ side }}">
                <div class="flex flex-col gap-1">
                    <h4 class="font-medium">Hover Card</h4>
                    <p>This hover card appears on the {{ side }} side of the trigger.</p>
                </div>
            </twig:HoverCard:Content>
        </twig:HoverCard>
    {% endfor %}
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col items-center justify-center gap-24 py-12" style="min-height: 304px">
    {# Arabic #}
    <div class="flex flex-wrap justify-center gap-2" dir="rtl">
        {% for side, label in {left: 'يسار', top: 'أعلى', bottom: 'أسفل', right: 'يمين'} %}
            <twig:HoverCard openDelay="10" closeDelay="100">
                <twig:HoverCard:Trigger>
                    <twig:Button variant="outline" {{ ...hover_card_trigger_attrs }}>{{ label }}</twig:Button>
                </twig:HoverCard:Trigger>
                <twig:HoverCard:Content side="{{ side }}" class="flex w-64 flex-col gap-1">
                    <div class="font-semibold">سماعات لاسلكية</div>
                    <div class="text-sm text-muted-foreground">٩٩.٩٩ $</div>
                </twig:HoverCard:Content>
            </twig:HoverCard>
        {% endfor %}
    </div>

    {# Hebrew #}
    <div class="flex flex-wrap justify-center gap-2" dir="rtl">
        {% for side, label in {left: 'שמאל', top: 'למעלה', bottom: 'למטה', right: 'ימין'} %}
            <twig:HoverCard openDelay="10" closeDelay="100">
                <twig:HoverCard:Trigger>
                    <twig:Button variant="outline" {{ ...hover_card_trigger_attrs }}>{{ label }}</twig:Button>
                </twig:HoverCard:Trigger>
                <twig:HoverCard:Content side="{{ side }}" class="flex w-64 flex-col gap-1">
                    <div class="font-semibold">אוזניות אלחוטיות</div>
                    <div class="text-sm text-muted-foreground">99.99 $</div>
                </twig:HoverCard:Content>
            </twig:HoverCard>
        {% endfor %}
    </div>
</div>
```

## API Reference

### `<twig:HoverCard>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `openDelay` | `number` | `0` | Delay in milliseconds before showing the content. |
| `closeDelay` | `number` | `0` | Delay in milliseconds before hiding the content. |

| Block | Description |
|:------|:------------|
| `content` | The hover card structure, typically a `HoverCard:Trigger` and `HoverCard:Content`. |
### `<twig:HoverCard:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `side` | `'bottom'\|'top'\|'left'\|'right'` | `'bottom'` | The side where the content appears. |

| Block | Description |
|:------|:------------|
| `content` | The content revealed on hover. |
### `<twig:HoverCard:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The element that reveals the hover card on hover or focus. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/input-group.md">
# Input Group

Add addons, buttons, and helper content to inputs.

```twig
<twig:InputGroup class="max-w-xs">
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" />
    </twig:InputGroup:Addon>
    <twig:InputGroup:Addon align="inline-end">12 results</twig:InputGroup:Addon>
</twig:InputGroup>
```

## Installation

```shell
php bin/console ux:install input-group --kit shadcn
```
## Usage

```twig
<twig:InputGroup>
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" />
    </twig:InputGroup:Addon>
</twig:InputGroup>
```

## Examples

### Icon

```twig
<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Search..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:search" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input type="email" placeholder="Enter your email" />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:mail" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Card number" />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:credit-card" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:ux:icon name="lucide:check" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Card number" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:ux:icon name="lucide:star" />
            <twig:ux:icon name="lucide:info" />
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### Text

```twig
<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Addon>
            <twig:InputGroup:Text>$</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input placeholder="0.00" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>USD</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Addon>
            <twig:InputGroup:Text>https://</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input placeholder="example.com" class="pl-0.5!" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>.com</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Enter your username" />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>@company.com</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Textarea placeholder="Enter your message" />
        <twig:InputGroup:Addon align="block-end">
            <twig:InputGroup:Text class="text-xs text-muted-foreground">120 characters left</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### Button

```twig
<div class="grid w-full max-w-sm gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="https://x.com/symfony" readonly />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button aria-label="Copy" title="Copy" size="icon-xs">
                <twig:ux:icon name="lucide:copy" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup class="[--radius:9999px]">
        <twig:InputGroup:Addon>
            <twig:InputGroup:Button variant="secondary" size="icon-xs">
                <twig:ux:icon name="lucide:info" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon class="pl-1.5 text-muted-foreground">
            https://
        </twig:InputGroup:Addon>
        <twig:InputGroup:Input />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button size="icon-xs">
                <twig:ux:icon name="lucide:star" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Type to search..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Button variant="secondary">Search</twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### Kbd

```twig
<twig:InputGroup class="max-w-sm">
    <twig:InputGroup:Input placeholder="Search..." />
    <twig:InputGroup:Addon>
        <twig:ux:icon name="lucide:search" class="text-muted-foreground" />
    </twig:InputGroup:Addon>
    <twig:InputGroup:Addon align="inline-end">
        <twig:Kbd>⌘K</twig:Kbd>
    </twig:InputGroup:Addon>
</twig:InputGroup>
```

### Spinner

```twig
<div class="grid w-full max-w-sm gap-4">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Searching..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Processing..." />
        <twig:InputGroup:Addon>
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Saving changes..." />
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text>Saving...</twig:InputGroup:Text>
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>

    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Refreshing data..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:loader" class="animate-spin" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:InputGroup:Text class="text-muted-foreground">Please wait...</twig:InputGroup:Text>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### Textarea

```twig
<div class="grid w-full max-w-md gap-4">
    <twig:InputGroup>
        <twig:InputGroup:Textarea
            id="textarea-code-32"
            placeholder="console.log('Hello, world!');"
            class="min-h-[200px]"
        />
        <twig:InputGroup:Addon align="block-end" class="border-t">
            <twig:InputGroup:Text>Line 1, Column 1</twig:InputGroup:Text>
            <twig:InputGroup:Button size="sm" class="ml-auto" variant="default">
                Run <twig:ux:icon name="lucide:corner-down-left" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="block-start" class="border-b">
            <twig:InputGroup:Text class="font-mono font-medium">
                <twig:ux:icon name="ri:javascript-fill" />
                script.js
            </twig:InputGroup:Text>
            <twig:InputGroup:Button class="ml-auto" size="icon-xs">
                <twig:ux:icon name="lucide:refresh-ccw" />
            </twig:InputGroup:Button>
            <twig:InputGroup:Button variant="ghost" size="icon-xs">
                <twig:ux:icon name="lucide:copy" />
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="w-full flex flex-col items-center gap-16">
    <div dir="rtl" class="grid w-full max-w-sm gap-6">
        <twig:InputGroup class="max-w-xs">
            <twig:InputGroup:Input placeholder="بحث..." />
            <twig:InputGroup:Addon>
                <twig:ux:icon name="lucide:search" />
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">١٢ نتيجة</twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="جاري البحث..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="جاري حفظ التغييرات..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:InputGroup:Text>جاري الحفظ...</twig:InputGroup:Text>
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:Field:Group class="max-w-sm">
            <twig:Field>
                <twig:Field:Label for="rtl-ar-textarea">منطقة النص</twig:Field:Label>
                <twig:InputGroup>
                    <twig:InputGroup:Textarea id="rtl-ar-textarea" placeholder="اكتب تعليقًا..." />
                    <twig:InputGroup:Addon align="block-end">
                        <twig:InputGroup:Text>٠/٢٨٠</twig:InputGroup:Text>
                        <twig:InputGroup:Button variant="default" size="sm" class="ms-auto">نشر</twig:InputGroup:Button>
                    </twig:InputGroup:Addon>
                </twig:InputGroup>
                <twig:Field:Description>تذييل موضع أسفل منطقة النص.</twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </div>

    <div dir="rtl" class="grid w-full max-w-sm gap-6">
        <twig:InputGroup class="max-w-xs">
            <twig:InputGroup:Input placeholder="הקלד..." />
            <twig:InputGroup:Addon>
                <twig:ux:icon name="lucide:search" />
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">12 תוצאות</twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="טוען..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:InputGroup>
            <twig:InputGroup:Input placeholder="שומר שינויים..." />
            <twig:InputGroup:Addon align="inline-end">
                <twig:InputGroup:Text>שומר...</twig:InputGroup:Text>
                <twig:Spinner />
            </twig:InputGroup:Addon>
        </twig:InputGroup>

        <twig:Field:Group class="max-w-sm">
            <twig:Field>
                <twig:Field:Label for="rtl-he-textarea">אזור טקסט</twig:Field:Label>
                <twig:InputGroup>
                    <twig:InputGroup:Textarea id="rtl-he-textarea" placeholder="כתוב תגובה..." />
                    <twig:InputGroup:Addon align="block-end">
                        <twig:InputGroup:Text>0/280</twig:InputGroup:Text>
                        <twig:InputGroup:Button variant="default" size="sm" class="ms-auto">שלח</twig:InputGroup:Button>
                    </twig:InputGroup:Addon>
                </twig:InputGroup>
                <twig:Field:Description>כותרת תחתונה ממוקמת מתחת לאזור הטקסט.</twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </div>
</div>
```

## API Reference

### `<twig:InputGroup>`

| Block | Description |
|:------|:------------|
| `content` | The input group elements, typically includes input, `InputGroup:Addon`, and/or `InputGroup:Button`. |
### `<twig:InputGroup:Addon>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `align` | `'inline-start'\|'inline-end'\|'block-start'\|'block-end'` | `'inline-start'` | The addon position relative to the input. |

| Block | Description |
|:------|:------------|
| `content` | The addon content, typically an icon or text. |
### `<twig:InputGroup:Button>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `type` | `'button'\|'submit'` | `'button'` | The button type. |
| `variant` | `'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'` | `'ghost'` | The visual style variant. |
| `size` | `'default'\|'sm'\|'lg'\|'icon'\|'icon-sm'\|'icon-lg'` | `'xs'` | The button size. |

| Block | Description |
|:------|:------------|
| `content` | The button label and/or icon. |
### `<twig:InputGroup:Text>`

| Block | Description |
|:------|:------------|
| `content` | The text content displayed in the input group. |
### `<twig:InputGroup:Textarea>`

| Block | Description |
|:------|:------------|
| `content` | The initial textarea value. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/input.md">
# Input

A text input component for forms and user data entry with built-in styling and accessibility features.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="input-demo-api-key">API Key</twig:Field:Label>
        <twig:Input id="input-demo-api-key" type="password" placeholder="sk-..." />
        <twig:Field:Description>Your API key is encrypted and stored securely.</twig:Field:Description>
    </twig:Field>
</div>
```

## Installation

```shell
php bin/console ux:install input --kit shadcn
```
## Usage

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

## Examples

### Basic

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

### Field

Use `Field`, `Field:Label`, and `Field:Description` to create an input with a label and description.

```twig
<div class="*:max-w-xs">
    <twig:Field>
        <twig:Field:Label for="input-field-username">Username</twig:Field:Label>
        <twig:Input id="input-field-username" type="text" placeholder="Enter your username" />
        <twig:Field:Description>Choose a unique username for your account.</twig:Field:Description>
    </twig:Field>
</div>
```

### Field Group

Use `Field:Group` to show multiple `Field` blocks and to build forms.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field:Group>
        <twig:Field>
            <twig:Field:Label for="fieldgroup-name">Name</twig:Field:Label>
            <twig:Input id="fieldgroup-name" placeholder="Jordan Lee" />
        </twig:Field>
        <twig:Field>
            <twig:Field:Label for="fieldgroup-email">Email</twig:Field:Label>
            <twig:Input id="fieldgroup-email" type="email" placeholder="name@example.com" />
            <twig:Field:Description>We'll send updates to this address.</twig:Field:Description>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Button type="reset" variant="outline">Reset</twig:Button>
            <twig:Button type="submit">Submit</twig:Button>
        </twig:Field>
    </twig:Field:Group>
</div>
```

### Disabled

Use the `disabled` prop to disable the input. To style the disabled state, add the `data-disabled` attribute to the `Field` component.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field data-disabled="true">
        <twig:Field:Label for="input-demo-disabled">Email</twig:Field:Label>
        <twig:Input id="input-demo-disabled" type="email" placeholder="Email" disabled />
        <twig:Field:Description>This field is currently disabled.</twig:Field:Description>
    </twig:Field>
</div>
```

### Invalid

Use the `aria-invalid` prop to mark the input as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field data-invalid="true">
        <twig:Field:Label for="input-invalid">Invalid Input</twig:Field:Label>
        <twig:Input id="input-invalid" placeholder="Error" aria-invalid="true" />
        <twig:Field:Description>This field contains validation errors.</twig:Field:Description>
    </twig:Field>
</div>
```

### File

Use the `type="file"` prop to create a file input.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="picture">Picture</twig:Field:Label>
        <twig:Input id="picture" type="file" />
        <twig:Field:Description>Select a picture to upload.</twig:Field:Description>
    </twig:Field>
</div>
```

### Inline

Use `Field` with `orientation="horizontal"` to create an inline input. Pair with `Button` to create a search input with a button.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field orientation="horizontal">
        <twig:Input type="search" placeholder="Search..." />
        <twig:Button>Search</twig:Button>
    </twig:Field>
</div>
```

### Grid

Use a grid layout to place multiple inputs side by side.

```twig
<twig:Field:Group class="grid max-w-sm grid-cols-2">
    <twig:Field>
        <twig:Field:Label for="first-name">First Name</twig:Field:Label>
        <twig:Input id="first-name" placeholder="Jordan" />
    </twig:Field>
    <twig:Field>
        <twig:Field:Label for="last-name">Last Name</twig:Field:Label>
        <twig:Input id="last-name" placeholder="Lee" />
    </twig:Field>
</twig:Field:Group>
```

### Required

Use the `required` attribute to indicate required inputs.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="input-required">
            Required Field <span class="text-destructive">*</span>
        </twig:Field:Label>
        <twig:Input id="input-required" placeholder="This field is required" required />
        <twig:Field:Description>This field must be filled out.</twig:Field:Description>
    </twig:Field>
</div>
```

### Badge

Use `Badge` in the label to highlight a recommended field.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="input-badge">
            Webhook URL
            <twig:Badge variant="secondary" class="ml-auto">Beta</twig:Badge>
        </twig:Field:Label>
        <twig:Input id="input-badge" type="url" placeholder="https://api.example.com/webhook" />
    </twig:Field>
</div>
```

### Input Group

To add icons, text, or buttons inside an input, use the `InputGroup` component.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="input-group-url">Website URL</twig:Field:Label>
        <twig:InputGroup>
            <twig:InputGroup:Input id="input-group-url" placeholder="example.com" />
            <twig:InputGroup:Addon>
                <twig:InputGroup:Text>https://</twig:InputGroup:Text>
            </twig:InputGroup:Addon>
            <twig:InputGroup:Addon align="inline-end">
                <twig:ux:icon name="lucide:info" />
            </twig:InputGroup:Addon>
        </twig:InputGroup>
    </twig:Field>
</div>
```

### Button Group

To add buttons to an input, use the `ButtonGroup` component.

```twig
<div class="*:max-w-xs w-full justify-center flex">
    <twig:Field>
        <twig:Field:Label for="input-button-group">Search</twig:Field:Label>
        <twig:ButtonGroup>
            <twig:Input id="input-button-group" placeholder="Type to search..." />
            <twig:Button variant="outline">Search</twig:Button>
        </twig:ButtonGroup>
    </twig:Field>
</div>
```

### Form

A full form example with multiple inputs, a select, and a button.

```twig
<form class="w-full max-w-sm">
    <twig:Field:Group>
        <twig:Field>
            <twig:Field:Label for="form-name">Name</twig:Field:Label>
            <twig:Input id="form-name" type="text" placeholder="Evil Rabbit" required />
        </twig:Field>
        <twig:Field>
            <twig:Field:Label for="form-email">Email</twig:Field:Label>
            <twig:Input id="form-email" type="email" placeholder="john@example.com" />
            <twig:Field:Description>We'll never share your email with anyone.</twig:Field:Description>
        </twig:Field>
        <div class="grid grid-cols-2 gap-4">
            <twig:Field>
                <twig:Field:Label for="form-phone">Phone</twig:Field:Label>
                <twig:Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
            </twig:Field>
            <twig:Field>
                <twig:Field:Label for="form-country">Country</twig:Field:Label>
                <twig:Select id="form-country">
                    <option value="us">United States</option>
                    <option value="uk">United Kingdom</option>
                    <option value="ca">Canada</option>
                </twig:Select>
            </twig:Field>
        </div>
        <twig:Field>
            <twig:Field:Label for="form-address">Address</twig:Field:Label>
            <twig:Input id="form-address" type="text" placeholder="123 Main St" />
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Button type="button" variant="outline">Cancel</twig:Button>
            <twig:Button type="submit">Submit</twig:Button>
        </twig:Field>
    </twig:Field:Group>
</form>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="w-full flex flex-col items-center gap-8">
    <div dir="rtl" class="max-w-xs w-full">
        <twig:Field>
            <twig:Field:Label for="input-rtl-ar">مفتاح API</twig:Field:Label>
            <twig:Input id="input-rtl-ar" type="password" placeholder="sk-..." />
            <twig:Field:Description>مفتاح API الخاص بك مشفر ومخزن بأمان.</twig:Field:Description>
        </twig:Field>
    </div>
    <div dir="rtl" class="max-w-xs w-full">
        <twig:Field>
            <twig:Field:Label for="input-rtl-he">קוד API</twig:Field:Label>
            <twig:Input id="input-rtl-he" type="password" placeholder="sk-..." />
            <twig:Field:Description>קוד ה-API שלך מוצן ומאוחסן בצורה מאובטחת.</twig:Field:Description>
        </twig:Field>
    </div>
</div>
```

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/item.md">
# Item

A versatile component for displaying content with media, title, description, and actions.

```twig
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>
```

## Installation

```shell
php bin/console ux:install item --kit shadcn
```
## Usage

```twig
<twig:Item>
    <twig:Item:Media variant="icon">
        <twig:ux:icon name="lucide:inbox" />
    </twig:Item:Media>
    <twig:Item:Content>
        <twig:Item:Title>Title</twig:Item:Title>
        <twig:Item:Description>Description</twig:Item:Description>
    </twig:Item:Content>
    <twig:Item:Actions>
        <twig:Button>Action</twig:Button>
    </twig:Item:Actions>
</twig:Item>
```

## Examples

### Variant

Use the `variant` prop to change the visual style of the item.

```twig
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item>
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Default Variant</twig:Item:Title>
            <twig:Item:Description>
                Transparent background with no border.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Outline Variant</twig:Item:Title>
            <twig:Item:Description>
                Outlined style with a visible border.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="muted">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Muted Variant</twig:Item:Title>
            <twig:Item:Description>
                Muted background for secondary content.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
</div>
```

### Size

Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.

```twig
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Default Size</twig:Item:Title>
            <twig:Item:Description>
                The standard size for most use cases.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline" size="sm">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Small Size</twig:Item:Title>
            <twig:Item:Description>A compact size for dense layouts.</twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline" size="xs">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Extra Small Size</twig:Item:Title>
            <twig:Item:Description>The most compact size available.</twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
</div>
```

### Icon

Use `Item:Media` with `variant="icon"` to display an icon.

```twig
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:shield-alert" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Security Alert</twig:Item:Title>
            <twig:Item:Description>
                New login detected from unknown device.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Review
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>
```

### Avatar

Use `Item:Media` to display an avatar.

```twig
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar class="size-10">
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="ER" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Evil Rabbit</twig:Item:Title>
            <twig:Item:Description>
                Last seen 5 months ago
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline">
        <twig:Item:Media>
            <div class="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                <twig:Avatar class="hidden sm:flex">
                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar class="hidden sm:flex">
                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                    <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar>
                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                    <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
                </twig:Avatar>
            </div>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>No Team Members</twig:Item:Title>
            <twig:Item:Description>
                Invite your team to collaborate on this project.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Invite
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>
```

### Image

Use `Item:Media` with `variant="image"` to display an image.

```twig
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item:Group class="gap-4">
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Midnight+City+Lights" alt="Midnight City Lights" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Midnight City Lights - <span class="text-muted-foreground">Electric Nights</span></twig:Item:Title>
                <twig:Item:Description>Neon Dreams</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>3:45</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Coffee+Shop" alt="Coffee Shop Conversations" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Coffee Shop Conversations - <span class="text-muted-foreground">Urban Stories</span></twig:Item:Title>
                <twig:Item:Description>The Morning Brew</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>4:05</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Digital+Rain" alt="Digital Rain" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Digital Rain - <span class="text-muted-foreground">Binary Beats</span></twig:Item:Title>
                <twig:Item:Description>Cyber Symphony</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>3:30</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
    </twig:Item:Group>
</div>
```

### Group

Use `Item:Group` to group related items together.

```twig
<twig:Item:Group class="max-w-sm">
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
                <twig:Avatar:Fallback>S</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>shadcn</twig:Item:Title>
            <twig:Item:Description>shadcn@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" class="grayscale" />
                <twig:Avatar:Fallback>M</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>maxleiter</twig:Item:Title>
            <twig:Item:Description>maxleiter@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" class="grayscale" />
                <twig:Avatar:Fallback>E</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>evilrabbit</twig:Item:Title>
            <twig:Item:Description>evilrabbit@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>
```

### Header

Use `Item:Header` to add a header above the item content.

```twig
<div class="flex w-full max-w-xl flex-col gap-6">
    <twig:Item:Group class="grid grid-cols-3 gap-4">
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
                    alt="v0-1.5-sm"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-1.5-sm</twig:Item:Title>
                <twig:Item:Description>Everyday tasks and UI generation.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop"
                    alt="v0-1.5-lg"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-1.5-lg</twig:Item:Title>
                <twig:Item:Description>Advanced thinking or reasoning.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop"
                    alt="v0-2.0-mini"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-2.0-mini</twig:Item:Title>
                <twig:Item:Description>Open Source model for everyone.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
    </twig:Item:Group>
</div>
```

### Link

Use the `as` prop to render the item as a link. The hover and focus states will be applied to the anchor element.

```twig
<div class="flex w-full max-w-md flex-col gap-4">
    <twig:Item as="a" href="#">
        <twig:Item:Content>
            <twig:Item:Title>Visit our documentation</twig:Item:Title>
            <twig:Item:Description>
                Learn how to get started with our components.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
        <twig:Item:Content>
            <twig:Item:Title>External resource</twig:Item:Title>
            <twig:Item:Description>
                Opens in a new tab with security attributes.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:external-link" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8 w-full items-center">
    {# Arabic #}
    <div class="flex w-full max-w-md flex-col gap-6" dir="rtl">
        <twig:Item variant="outline" dir="rtl">
            <twig:Item:Content>
                <twig:Item:Title>عنصر أساسي</twig:Item:Title>
                <twig:Item:Description>عنصر بسيط يحتوي على عنوان ووصف.</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:Button variant="outline" size="sm">إجراء</twig:Button>
            </twig:Item:Actions>
        </twig:Item>
        <twig:Item variant="outline" size="sm" as="a" href="#" dir="rtl">
            <twig:Item:Media>
                <twig:ux:icon name="lucide:badge-check" class="size-5" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>تم التحقق من ملفك الشخصي.</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:ux:icon name="lucide:chevron-right" class="size-4" />
            </twig:Item:Actions>
        </twig:Item>
    </div>

    {# Hebrew #}
    <div class="flex w-full max-w-md flex-col gap-6" dir="rtl">
        <twig:Item variant="outline" dir="rtl">
            <twig:Item:Content>
                <twig:Item:Title>ערך בסיסי</twig:Item:Title>
                <twig:Item:Description>ערך עם כותרת ותיאור.</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:Button variant="outline" size="sm">בצע</twig:Button>
            </twig:Item:Actions>
        </twig:Item>
        <twig:Item variant="outline" size="sm" as="a" href="#" dir="rtl">
            <twig:Item:Media>
                <twig:ux:icon name="lucide:badge-check" class="size-5" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>החשבון שלך אומת.</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:ux:icon name="lucide:chevron-right" class="size-4" />
            </twig:Item:Actions>
        </twig:Item>
    </div>
</div>
```

## API Reference

### `<twig:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'outline'\|'muted'` | `'default'` | The visual style variant. |
| `size` | `'default'\|'sm'\|'xs'` | `'default'` | The item size. |
| `as` | `'div'` | `'div'` | The HTML tag to render. |

| Block | Description |
|:------|:------------|
| `content` | The item content, typically includes `Item:Media`, `Item:Content`, and/or `Item:Actions`. |
### `<twig:Item:Actions>`

| Block | Description |
|:------|:------------|
| `content` | The action buttons or controls for the item. |
### `<twig:Item:Content>`

| Block | Description |
|:------|:------------|
| `content` | The main content area, typically includes `Item:Title` and `Item:Description`. |
### `<twig:Item:Description>`

| Block | Description |
|:------|:------------|
| `content` | The descriptive text of the item. |
### `<twig:Item:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The footer area, typically contains metadata or secondary actions. |
### `<twig:Item:Group>`

| Block | Description |
|:------|:------------|
| `content` | The grouped items, typically multiple `Item` components. |
### `<twig:Item:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header area, typically contains title and actions. |
### `<twig:Item:Media>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'icon'\|'image'` | `'default'` | The media display style. |

| Block | Description |
|:------|:------------|
| `content` | The visual element, typically an icon or image. |
### `<twig:Item:Separator>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The separator orientation. |
| `decorative` | `bool` | `true` | Whether the separator is purely decorative (not semantic). |
### `<twig:Item:Title>`

| Block | Description |
|:------|:------------|
| `content` | The title text of the item. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/kbd.md">
# Kbd

Used to display textual user input from keyboard.

```twig
<div class="flex flex-col items-center gap-4">
    <twig:KbdGroup>
        <twig:Kbd>⌘</twig:Kbd>
        <twig:Kbd>⇧</twig:Kbd>
        <twig:Kbd>⌥</twig:Kbd>
        <twig:Kbd>⌃</twig:Kbd>
    </twig:KbdGroup>
    <twig:KbdGroup>
        <twig:Kbd>Ctrl</twig:Kbd>
        <span>+</span>
        <twig:Kbd>B</twig:Kbd>
    </twig:KbdGroup>
</div>
```

## Installation

```shell
php bin/console ux:install kbd --kit shadcn
```
## Usage

```twig
<twig:Kbd>Ctrl</twig:Kbd>
```

## Examples

### Group

Use the `KbdGroup` component to group keyboard keys together.

```twig
<div class="flex flex-col items-center gap-4">
  <p class="text-muted-foreground text-sm">
    Use
    <twig:KbdGroup>
      <twig:Kbd>Ctrl + B</twig:Kbd>
      <twig:Kbd>Ctrl + K</twig:Kbd>
    </twig:KbdGroup>
    to open the command palette
  </p>
</div>
```

### Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.

```twig
<twig:Button variant="outline">
    Accept <twig:Kbd data-icon="inline-end" class="translate-x-0.5">⏎</twig:Kbd>
</twig:Button>
```

### Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.

```twig
<div class="flex flex-wrap gap-4">
    <twig:ButtonGroup>
        <twig:Tooltip id="tooltip-kbd-save">
            <twig:Tooltip:Trigger>
                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="rounded-r-none">Save</twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                Save Changes <twig:Kbd>S</twig:Kbd>
            </twig:Tooltip:Content>
        </twig:Tooltip>
        <twig:Tooltip id="tooltip-kbd-print">
            <twig:Tooltip:Trigger>
                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="rounded-l-none border-l-0">Print</twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                Print Document <twig:KbdGroup>
                    <twig:Kbd>Ctrl</twig:Kbd>
                    <twig:Kbd>P</twig:Kbd>
                </twig:KbdGroup>
            </twig:Tooltip:Content>
        </twig:Tooltip>
    </twig:ButtonGroup>
</div>
```

### Input Group

You can use the `Kbd` component inside an `InputGroup:Addon` component to display a keyboard key inside an input group.

```twig
<div class="flex w-full max-w-xs flex-col gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Search..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:search" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>K</twig:Kbd>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex flex-col items-center gap-4" dir="rtl">
        <twig:KbdGroup>
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>⇧</twig:Kbd>
            <twig:Kbd>⌥</twig:Kbd>
            <twig:Kbd>⌃</twig:Kbd>
        </twig:KbdGroup>
        <twig:KbdGroup>
            <twig:Kbd>Ctrl</twig:Kbd>
            <span>+</span>
            <twig:Kbd>B</twig:Kbd>
        </twig:KbdGroup>
    </div>

    {# Hebrew #}
    <div class="flex flex-col items-center gap-4" dir="rtl">
        <twig:KbdGroup>
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>⇧</twig:Kbd>
            <twig:Kbd>⌥</twig:Kbd>
            <twig:Kbd>⌃</twig:Kbd>
        </twig:KbdGroup>
        <twig:KbdGroup>
            <twig:Kbd>Ctrl</twig:Kbd>
            <span>+</span>
            <twig:Kbd>B</twig:Kbd>
        </twig:KbdGroup>
    </div>
</div>
```

## API Reference

### `<twig:Kbd>`

| Block | Description |
|:------|:------------|
| `content` | The keyboard key text (e.g., "Ctrl", "⌘", "Enter"). |
### `<twig:KbdGroup>`

| Block | Description |
|:------|:------------|
| `content` | The keyboard shortcut combination, typically multiple `Kbd` components. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/label.md">
# Label

Renders an accessible label associated with controls.

```twig
<div class="flex gap-2">
    <twig:Checkbox id="terms" />
    <twig:Label for="terms">Accept terms and conditions</twig:Label>
</div>
```

## Installation

```shell
php bin/console ux:install label --kit shadcn
```
## Usage

```twig
<twig:Label for="email">Your email address</twig:Label>
```

## Examples

### Label in Field

For form fields, use the `Field` component which includes built-in label, description, and error handling.

```twig
<div class="w-full max-w-md">
    <twig:Field>
        <twig:Field:Label for="email">Your email address</twig:Field:Label>
        <twig:Input id="email" />
    </twig:Field>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex gap-2" dir="rtl">
        <twig:Checkbox id="terms-ar" />
        <twig:Label for="terms-ar">قبول الشروط والأحكام</twig:Label>
    </div>
    {# Hebrew #}
    <div class="flex gap-2" dir="rtl">
        <twig:Checkbox id="terms-he" />
        <twig:Label for="terms-he">קבל תנאים והגבלות</twig:Label>
    </div>
</div>
```

## API Reference

### `<twig:Label>`

| Block | Description |
|:------|:------------|
| `content` | The label text for a form control. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/pagination.md">
# Pagination

Pagination with page navigation, next and previous links.

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

## Installation

```shell
php bin/console ux:install pagination --kit shadcn
```
## Usage

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Previous href="#" />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Ellipsis />
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Next href="#" />
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

## Examples

### Simple

A simple pagination with only page numbers.

```twig
<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">1</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">3</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">4</twig:Pagination:Link>
        </twig:Pagination:Item>
        <twig:Pagination:Item>
            <twig:Pagination:Link href="#">5</twig:Pagination:Link>
        </twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>
```

### Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

```twig
<div class="flex items-center justify-between gap-4">
    <twig:Field orientation="horizontal" class="w-fit">
        <twig:Field:Label for="select-rows-per-page">Rows per page</twig:Field:Label>
        <twig:Select id="select-rows-per-page" class="w-20">
            <option value="10">10</option>
            <option value="25" selected>25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </twig:Select>
    </twig:Field>
    <twig:Pagination class="mx-0 w-auto">
        <twig:Pagination:Content>
            <twig:Pagination:Item>
                <twig:Pagination:Previous href="#" />
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Next href="#" />
            </twig:Pagination:Item>
        </twig:Pagination:Content>
    </twig:Pagination>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <twig:Pagination dir="rtl">
        <twig:Pagination:Content>
            <twig:Pagination:Item>
                <twig:Pagination:Previous href="#" text="السابق" />
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#">١</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#" active>٢</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#">٣</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Ellipsis />
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Next href="#" text="التالي" />
            </twig:Pagination:Item>
        </twig:Pagination:Content>
    </twig:Pagination>

    {# Hebrew #}
    <twig:Pagination dir="rtl">
        <twig:Pagination:Content>
            <twig:Pagination:Item>
                <twig:Pagination:Previous href="#" text="הקודם" />
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#">1</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Link href="#">3</twig:Pagination:Link>
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Ellipsis />
            </twig:Pagination:Item>
            <twig:Pagination:Item>
                <twig:Pagination:Next href="#" text="הבא" />
            </twig:Pagination:Item>
        </twig:Pagination:Content>
    </twig:Pagination>
</div>
```

## API Reference

### `<twig:Pagination>`

| Block | Description |
|:------|:------------|
| `content` | The pagination structure, typically a `Pagination:Content`. |
### `<twig:Pagination:Content>`

| Block | Description |
|:------|:------------|
| `content` | The pagination items, typically multiple `Pagination:Item` components. |
### `<twig:Pagination:Item>`

| Block | Description |
|:------|:------------|
| `content` | The pagination item content, typically a `Pagination:Link`. |
### `<twig:Pagination:Link>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `active` | `boolean` | `false` | Whether this is the current page. |

| Block | Description |
|:------|:------------|
| `content` | The page number or navigation icon. |
### `<twig:Pagination:Next>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `text` | `string` | `'Next'` | The label text. |
### `<twig:Pagination:Previous>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `text` | `string` | `'Previous'` | The label text. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/progress.md">
# Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

```twig
<twig:Progress value="56" class="w-[60%]" />
```

## Installation

```shell
php bin/console ux:install progress --kit shadcn
```
## Usage

```twig
<twig:Progress value="33" />
```

## Examples

### Label

Use a `Field` component to add a label to the progress bar.

```twig
<twig:Field class="w-full max-w-sm">
    <twig:Field:Label for="progress-upload">
        <span>Upload progress</span>
        <span class="ml-auto">56%</span>
    </twig:Field:Label>
    <twig:Progress value="56" id="progress-upload" />
</twig:Field>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

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

## API Reference

### `<twig:Progress>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `integer` | `0` | The progress percentage (0-100). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/radio-group.md">
# Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

```twig
<twig:RadioGroup class="w-fit">
    <div class="flex items-center gap-3">
        <twig:RadioGroup:Item id="r1" name="spacing" value="default" />
        <twig:Label for="r1">Default</twig:Label>
    </div>
    <div class="flex items-center gap-3">
        <twig:RadioGroup:Item id="r2" name="spacing" value="comfortable" checked />
        <twig:Label for="r2">Comfortable</twig:Label>
    </div>
    <div class="flex items-center gap-3">
        <twig:RadioGroup:Item id="r3" name="spacing" value="compact" />
        <twig:Label for="r3">Compact</twig:Label>
    </div>
</twig:RadioGroup>
```

## Installation

```shell
php bin/console ux:install radio-group --kit shadcn
```
## Usage

```twig
<twig:RadioGroup class="w-fit">
    <div class="flex items-center gap-3">
        <twig:RadioGroup:Item id="option-one" name="option" value="option-one" checked />
        <twig:Label for="option-one">Option One</twig:Label>
    </div>
    <div class="flex items-center gap-3">
        <twig:RadioGroup:Item id="option-two" name="option" value="option-two" />
        <twig:Label for="option-two">Option Two</twig:Label>
    </div>
</twig:RadioGroup>
```

## Examples

### Description

Radio group items with a description using the `Field` component.

```twig
<twig:RadioGroup class="w-fit">
    <twig:Field orientation="horizontal">
        <twig:RadioGroup:Item id="desc-r1" name="density" value="default" />
        <twig:Field:Content>
            <twig:Field:Label for="desc-r1">Default</twig:Field:Label>
            <twig:Field:Description>Standard spacing for most use cases.</twig:Field:Description>
        </twig:Field:Content>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:RadioGroup:Item id="desc-r2" name="density" value="comfortable" checked />
        <twig:Field:Content>
            <twig:Field:Label for="desc-r2">Comfortable</twig:Field:Label>
            <twig:Field:Description>More space between elements.</twig:Field:Description>
        </twig:Field:Content>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:RadioGroup:Item id="desc-r3" name="density" value="compact" />
        <twig:Field:Content>
            <twig:Field:Label for="desc-r3">Compact</twig:Field:Label>
            <twig:Field:Description>Minimal spacing for dense layouts.</twig:Field:Description>
        </twig:Field:Content>
    </twig:Field>
</twig:RadioGroup>
```

### Choice Card

Use `Field:Label` to wrap the entire `Field` for a clickable card-style selection.

```twig
<twig:RadioGroup class="max-w-sm">
    <twig:Field:Label for="plus-plan" class="border border-input rounded-md has-[:checked]:bg-primary/5 has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10">
        <twig:Field orientation="horizontal" class="p-3">
            <twig:Field:Content>
                <twig:Field:Title>Plus</twig:Field:Title>
                <twig:Field:Description>For individuals and small teams.</twig:Field:Description>
            </twig:Field:Content>
            <twig:RadioGroup:Item id="plus-plan" name="plan" value="plus" checked />
        </twig:Field>
    </twig:Field:Label>
    <twig:Field:Label for="pro-plan" class="border border-input rounded-md has-[:checked]:bg-primary/5 has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10">
        <twig:Field orientation="horizontal" class="p-3">
            <twig:Field:Content>
                <twig:Field:Title>Pro</twig:Field:Title>
                <twig:Field:Description>For growing businesses.</twig:Field:Description>
            </twig:Field:Content>
            <twig:RadioGroup:Item id="pro-plan" name="plan" value="pro" />
        </twig:Field>
    </twig:Field:Label>
    <twig:Field:Label for="enterprise-plan" class="border border-input rounded-md has-[:checked]:bg-primary/5 has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10">
        <twig:Field orientation="horizontal" class="p-3">
            <twig:Field:Content>
                <twig:Field:Title>Enterprise</twig:Field:Title>
                <twig:Field:Description>For large teams and enterprises.</twig:Field:Description>
            </twig:Field:Content>
            <twig:RadioGroup:Item id="enterprise-plan" name="plan" value="enterprise" />
        </twig:Field>
    </twig:Field:Label>
</twig:RadioGroup>
```

### Fieldset

Use `Field:Set` and `Field:Legend` to group radio items with a label and description.

```twig
<twig:Field:Set class="w-full max-w-xs">
    <twig:Field:Legend variant="label">Subscription Plan</twig:Field:Legend>
    <twig:Field:Description>Yearly and lifetime plans offer significant savings.</twig:Field:Description>
    <twig:RadioGroup class="gap-3">
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="plan-monthly" name="subscription" value="monthly" checked />
            <twig:Field:Label for="plan-monthly" class="font-normal">Monthly ($9.99/month)</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="plan-yearly" name="subscription" value="yearly" />
            <twig:Field:Label for="plan-yearly" class="font-normal">Yearly ($99.99/year)</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="plan-lifetime" name="subscription" value="lifetime" />
            <twig:Field:Label for="plan-lifetime" class="font-normal">Lifetime ($299.99)</twig:Field:Label>
        </twig:Field>
    </twig:RadioGroup>
</twig:Field:Set>
```

### Disabled

Use the `disabled` prop on `RadioGroup:Item` to disable individual items.

```twig
<twig:RadioGroup class="w-fit">
    <twig:Field orientation="horizontal" data-disabled="true">
        <twig:RadioGroup:Item id="disabled-1" name="disabled-example" value="option1" disabled />
        <twig:Field:Label for="disabled-1" class="font-normal">Disabled</twig:Field:Label>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:RadioGroup:Item id="disabled-2" name="disabled-example" value="option2" checked />
        <twig:Field:Label for="disabled-2" class="font-normal">Option 2</twig:Field:Label>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:RadioGroup:Item id="disabled-3" name="disabled-example" value="option3" />
        <twig:Field:Label for="disabled-3" class="font-normal">Option 3</twig:Field:Label>
    </twig:Field>
</twig:RadioGroup>
```

### Invalid

Use `aria-invalid` on `RadioGroup:Item` and `data-invalid` on `Field` to show validation errors.

```twig
<twig:Field:Set class="w-full max-w-xs">
    <twig:Field:Legend variant="label">Notification Preferences</twig:Field:Legend>
    <twig:Field:Description>Choose how you want to receive notifications.</twig:Field:Description>
    <twig:RadioGroup>
        <twig:Field orientation="horizontal" data-invalid="true">
            <twig:RadioGroup:Item id="invalid-email" name="notifications" value="email" checked aria-invalid="true" />
            <twig:Field:Label for="invalid-email" class="font-normal">Email only</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal" data-invalid="true">
            <twig:RadioGroup:Item id="invalid-sms" name="notifications" value="sms" aria-invalid="true" />
            <twig:Field:Label for="invalid-sms" class="font-normal">SMS only</twig:Field:Label>
        </twig:Field>
        <twig:Field orientation="horizontal" data-invalid="true">
            <twig:RadioGroup:Item id="invalid-both" name="notifications" value="both" aria-invalid="true" />
            <twig:Field:Label for="invalid-both" class="font-normal">Both Email &amp; SMS</twig:Field:Label>
        </twig:Field>
    </twig:RadioGroup>
</twig:Field:Set>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    <twig:RadioGroup class="w-fit" dir="rtl">
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r1-rtl-ar" name="density-rtl-ar" value="default" dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r1-rtl-ar" dir="rtl">افتراضي</twig:Field:Label>
                <twig:Field:Description dir="rtl">تباعد قياسي لمعظم حالات الاستخدام.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r2-rtl-ar" name="density-rtl-ar" value="comfortable" checked dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r2-rtl-ar" dir="rtl">مريح</twig:Field:Label>
                <twig:Field:Description dir="rtl">مساحة أكبر بين العناصر.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r3-rtl-ar" name="density-rtl-ar" value="compact" dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r3-rtl-ar" dir="rtl">مضغوط</twig:Field:Label>
                <twig:Field:Description dir="rtl">تباعد أدنى للتخطيطات الكثيفة.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
    </twig:RadioGroup>
    <twig:RadioGroup class="w-fit" dir="rtl">
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r1-rtl-he" name="density-rtl-he" value="default" dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r1-rtl-he" dir="rtl">ברירת מחדל</twig:Field:Label>
                <twig:Field:Description dir="rtl">ריווח סטנדרטי לרוב מקרי השימוש.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r2-rtl-he" name="density-rtl-he" value="comfortable" checked dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r2-rtl-he" dir="rtl">נוח</twig:Field:Label>
                <twig:Field:Description dir="rtl">יותר מקום בין האלמנטים.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:RadioGroup:Item id="r3-rtl-he" name="density-rtl-he" value="compact" dir="rtl" />
            <twig:Field:Content>
                <twig:Field:Label for="r3-rtl-he" dir="rtl">דחוס</twig:Field:Label>
                <twig:Field:Description dir="rtl">ריווח מינימלי לממשקים דחוסים.</twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
    </twig:RadioGroup>
</div>
```

## API Reference

### `<twig:RadioGroup>`

| Block | Description |
|:------|:------------|
| `content` | The radio items, typically multiple `RadioGroup:Item` components with `Label`. |
### `<twig:RadioGroup:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `name` | `string` | - | The name shared by all radio inputs in the same group. |
| `value` | `string` | - | The value submitted when this item is selected. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/resizable.md">
# Resizable

Accessible resizable panel groups and layouts with keyboard support.

```twig
<twig:Resizable orientation="horizontal" class="max-w-sm rounded-lg border h-[200px]">
    <twig:Resizable:Panel size="50">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">One</span>
        </div>
    </twig:Resizable:Panel>
    <twig:Resizable:Handle withHandle />
    <twig:Resizable:Panel size="50">
        <twig:Resizable orientation="vertical">
            <twig:Resizable:Panel size="25">
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Two</span>
                </div>
            </twig:Resizable:Panel>
            <twig:Resizable:Handle withHandle />
            <twig:Resizable:Panel size="75">
                <div class="flex h-full items-center justify-center p-6">
                    <span class="font-semibold">Three</span>
                </div>
            </twig:Resizable:Panel>
        </twig:Resizable>
    </twig:Resizable:Panel>
</twig:Resizable>
```

## Installation

```shell
php bin/console ux:install resizable --kit shadcn
```
## Usage

```twig
<twig:Resizable class="h-40 w-64 p-4">
    <p>Drag the bottom-right corner to resize me in any direction.</p>
</twig:Resizable>
```

## Examples

### Vertical

Use `orientation="vertical"` for vertical resizing.

```twig
<twig:Resizable orientation="vertical" class="min-h-[200px] max-w-sm rounded-lg border h-[200px]">
    <twig:Resizable:Panel size="25">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Header</span>
        </div>
    </twig:Resizable:Panel>
    <twig:Resizable:Handle />
    <twig:Resizable:Panel size="75">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Content</span>
        </div>
    </twig:Resizable:Panel>
</twig:Resizable>
```

### Handle

Use the `withHandle` prop on `Resizable:Handle` to show a visible handle.

```twig
<twig:Resizable orientation="horizontal" class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px] h-[200px]">
    <twig:Resizable:Panel size="25">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Sidebar</span>
        </div>
    </twig:Resizable:Panel>
    <twig:Resizable:Handle withHandle />
    <twig:Resizable:Panel size="75">
        <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Content</span>
        </div>
    </twig:Resizable:Panel>
</twig:Resizable>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <twig:Resizable dir="rtl" orientation="horizontal" class="max-w-sm rounded-lg border h-[200px]">
        <twig:Resizable:Panel size="50">
            <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">واحد</span>
            </div>
        </twig:Resizable:Panel>
        <twig:Resizable:Handle withHandle />
        <twig:Resizable:Panel size="50">
            <twig:Resizable orientation="vertical" dir="rtl">
                <twig:Resizable:Panel size="25">
                    <div class="flex h-full items-center justify-center p-6">
                        <span class="font-semibold">اثنان</span>
                    </div>
                </twig:Resizable:Panel>
                <twig:Resizable:Handle withHandle />
                <twig:Resizable:Panel size="75">
                    <div class="flex h-full items-center justify-center p-6">
                        <span class="font-semibold">ثلاثة</span>
                    </div>
                </twig:Resizable:Panel>
            </twig:Resizable>
        </twig:Resizable:Panel>
    </twig:Resizable>

    {# Hebrew #}
    <twig:Resizable dir="rtl" orientation="horizontal" class="max-w-sm rounded-lg border h-[200px]">
        <twig:Resizable:Panel size="50">
            <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">אחד</span>
            </div>
        </twig:Resizable:Panel>
        <twig:Resizable:Handle withHandle />
        <twig:Resizable:Panel size="50">
            <twig:Resizable orientation="vertical" dir="rtl">
                <twig:Resizable:Panel size="25">
                    <div class="flex h-full items-center justify-center p-6">
                        <span class="font-semibold">שניים</span>
                    </div>
                </twig:Resizable:Panel>
                <twig:Resizable:Handle withHandle />
                <twig:Resizable:Panel size="75">
                    <div class="flex h-full items-center justify-center p-6">
                        <span class="font-semibold">שלושה</span>
                    </div>
                </twig:Resizable:Panel>
            </twig:Resizable>
        </twig:Resizable:Panel>
    </twig:Resizable>
</div>
```

## API Reference

### `<twig:Resizable>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | Layout direction. |

| Block | Description |
|:------|:------------|
| `content` | One or more `Resizable:Panel` separated by `Resizable:Handle`. |
### `<twig:Resizable:Handle>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `withHandle` | `bool` | `false` | Show a visible grip handle. |
### `<twig:Resizable:Panel>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `int\|null` | `null` | Initial size as a flex-grow value (proportional). If omitted, panels share space equally. |

| Block | Description |
|:------|:------------|
| `content` | The panel content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/select.md">
# Select

A dropdown control that allows users to choose from a list of options.

```twig
<twig:Select class="max-w-xs">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grapes">Grapes</option>
    <option value="pineapple">Pineapple</option>
</twig:Select>
```

## Installation

```shell
php bin/console ux:install select --kit shadcn
```
## Usage

```twig
<twig:Select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</twig:Select>
```

## API Reference

### `<twig:Select>`

| Block | Description |
|:------|:------------|
| `content` | The select options (`<option>` elements). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/separator.md">
# Separator

Visually or semantically separates content.

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

## Installation

```shell
php bin/console ux:install separator --kit shadcn
```
## Usage

```twig
<twig:Separator />
```

## Examples

### Vertical

Use `orientation="vertical"` for a vertical separator.

```twig
<div class="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <twig:Separator orientation="vertical" />
    <div>Docs</div>
    <twig:Separator orientation="vertical" />
    <div>Source</div>
</div>
```

### Menu

Vertical separators between menu items with descriptions.

```twig
<div class="flex items-center gap-2 text-sm md:gap-4">
    <div class="flex flex-col gap-1">
        <span class="font-medium">Settings</span>
        <span class="text-xs text-muted-foreground">Manage preferences</span>
    </div>
    <twig:Separator orientation="vertical" />
    <div class="flex flex-col gap-1">
        <span class="font-medium">Account</span>
        <span class="text-xs text-muted-foreground">Profile &amp; security</span>
    </div>
    <twig:Separator orientation="vertical" class="hidden md:block" />
    <div class="hidden flex-col gap-1 md:flex">
        <span class="font-medium">Help</span>
        <span class="text-xs text-muted-foreground">Support &amp; docs</span>
    </div>
</div>
```

### List

Horizontal separators between list items.

```twig
<div class="flex w-full max-w-sm flex-col gap-2 text-sm">
    <dl class="flex items-center justify-between">
        <dt>Item 1</dt>
        <dd class="text-muted-foreground">Value 1</dd>
    </dl>
    <twig:Separator />
    <dl class="flex items-center justify-between">
        <dt>Item 2</dt>
        <dd class="text-muted-foreground">Value 2</dd>
    </dl>
    <twig:Separator />
    <dl class="flex items-center justify-between">
        <dt>Item 3</dt>
        <dd class="text-muted-foreground">Value 3</dd>
    </dl>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col items-center gap-8">
    {# Arabic #}
    <div class="flex max-w-sm flex-col gap-4 text-sm" dir="rtl">
        <div class="flex flex-col gap-1.5">
            <div class="leading-none font-medium">shadcn/ui</div>
            <div class="text-muted-foreground">الأساس لنظام التصميم الخاص بك</div>
        </div>
        <twig:Separator />
        <div>مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء عليها.</div>
    </div>

    {# Hebrew #}
    <div class="flex max-w-sm flex-col gap-4 text-sm" dir="rtl">
        <div class="flex flex-col gap-1.5">
            <div class="leading-none font-medium">shadcn/ui</div>
            <div class="text-muted-foreground">הבסיס למערכת העיצוב שלך</div>
        </div>
        <twig:Separator />
        <div>קבוצה של רכיבים מעוצבים בצורה טובה שניתן להתאים אישית, להרחיב ולבנות עליהם.</div>
    </div>
</div>
```

## API Reference

### `<twig:Separator>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The separator orientation. |
| `decorative` | `boolean` | `true` | Whether the separator is purely decorative (not semantic). |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/skeleton.md">
# Skeleton

Use to show a placeholder while content is loading.

```twig
<div class="flex items-center gap-4">
    <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>
```

## Installation

```shell
php bin/console ux:install skeleton --kit shadcn
```
## Usage

```twig
<twig:Skeleton class="h-[20px] w-[100px] rounded-full" />
```

## Examples

### Avatar

```twig
<div class="flex w-fit items-center gap-4">
    <twig:Skeleton class="size-10 shrink-0 rounded-full" />
    <div class="grid gap-2">
        <twig:Skeleton class="h-4 w-[150px]" />
        <twig:Skeleton class="h-4 w-[100px]" />
    </div>
</div>
```

### Card

```twig
<twig:Card class="w-full max-w-xs">
    <twig:Card:Header>
        <twig:Skeleton class="h-4 w-2/3" />
        <twig:Skeleton class="h-4 w-1/2" />
    </twig:Card:Header>
    <twig:Card:Content>
        <twig:Skeleton class="aspect-video w-full" />
    </twig:Card:Content>
</twig:Card>
```

### Text

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

### Form

```twig
<div class="flex w-full max-w-xs flex-col gap-7">
    <div class="flex flex-col gap-3">
        <twig:Skeleton class="h-4 w-20" />
        <twig:Skeleton class="h-8 w-full" />
    </div>
    <div class="flex flex-col gap-3">
        <twig:Skeleton class="h-4 w-24" />
        <twig:Skeleton class="h-8 w-full" />
    </div>
    <twig:Skeleton class="h-8 w-24" />
</div>
```

### Table

```twig
<div class="flex w-full max-w-sm flex-col gap-2">
    {% for i in 1..5 %}
        <div class="flex gap-4">
            <twig:Skeleton class="h-4 flex-1" />
            <twig:Skeleton class="h-4 w-24" />
            <twig:Skeleton class="h-4 w-20" />
        </div>
    {% endfor %}
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

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

## API Reference


</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/sonner.md">
# Sonner

A Sonner-style stacked toast notification system with auto-dismiss, swipe-to-dismiss, rich colors, and JS or server-render support.

```twig
<twig:Sonner closeButton="true" expand="true">
    <div class="flex flex-wrap gap-2">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Event has been created"
            data-sonner-description-param="Sunday, December 03, 2023 at 9:00 AM"
        >Default</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="success"
            data-sonner-title-param="Profile updated successfully"
        >Success</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="error"
            data-sonner-title-param="Something went wrong"
            data-sonner-description-param="Please try again later."
        >Error</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="warning"
            data-sonner-title-param="Storage limit approaching"
            data-sonner-description-param="You have used 90% of your storage."
        >Warning</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="info"
            data-sonner-title-param="New update available"
        >Info</twig:Button>
    </div>
</twig:Sonner>
```

## Installation

```shell
php bin/console ux:install sonner --kit shadcn
```
## Usage

```twig
<twig:Sonner>
    <twig:Button
        data-action="click->sonner#fire"
        data-sonner-title-param="Event has been created"
    >
        Show Sonner
    </twig:Button>
</twig:Sonner>
```

## Examples

### Types

```twig
<twig:Sonner>
    <div class="flex flex-wrap gap-2">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Default notification"
        >Default</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="success"
            data-sonner-title-param="Changes saved"
        >Success</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="error"
            data-sonner-title-param="Failed to save changes"
        >Error</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="warning"
            data-sonner-title-param="Unsaved changes"
        >Warning</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="info"
            data-sonner-title-param="New message received"
        >Info</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="loading"
            data-sonner-title-param="Uploading file…"
            data-sonner-duration-param="0"
        >Loading</twig:Button>
    </div>
</twig:Sonner>
```

### With Description

```twig
<twig:Sonner>
    <twig:Button variant="outline"
        data-action="click->sonner#fire"
        data-sonner-title-param="Event has been created"
        data-sonner-description-param="Sunday, December 03, 2023 at 9:00 AM"
    >
        Show Sonner
    </twig:Button>
</twig:Sonner>
```

### With Action

```twig
<twig:Sonner>
    <twig:Button variant="outline"
        data-action="click->sonner#fire"
        data-sonner-title-param="Event has been created"
        data-sonner-action-label-param="Undo"
        data-sonner-action-url-param="#"
    >
        Show Sonner
    </twig:Button>
</twig:Sonner>
```

### Rich Colors

```twig
<twig:Sonner richColors="true">
    <div class="flex flex-wrap gap-2">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="success"
            data-sonner-title-param="Profile updated successfully"
        >Success</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="error"
            data-sonner-title-param="Something went wrong"
        >Error</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="warning"
            data-sonner-title-param="Storage limit approaching"
        >Warning</twig:Button>
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-type-param="info"
            data-sonner-title-param="New update available"
        >Info</twig:Button>
    </div>
</twig:Sonner>
```

### Position

```twig
<div class="flex flex-wrap justify-center gap-2">
    <twig:Sonner position="top-left">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Top-left notification"
        >
            Top Left
        </twig:Button>
    </twig:Sonner>
    <twig:Sonner position="top-center">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Top-center notification"
        >
            Top Center
        </twig:Button>
    </twig:Sonner>
    <twig:Sonner position="top-right">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Top-right notification"
        >
            Top Right
        </twig:Button>
    </twig:Sonner>
    <twig:Sonner position="bottom-left">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Bottom-left notification"
        >
            Bottom Left
        </twig:Button>
    </twig:Sonner>
    <twig:Sonner position="bottom-center">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Bottom-center notification"
        >
            Bottom Center
        </twig:Button>
    </twig:Sonner>
    <twig:Sonner position="bottom-right">
        <twig:Button variant="outline"
            data-action="click->sonner#fire"
            data-sonner-title-param="Bottom-right notification"
        >
            Bottom Right
        </twig:Button>
    </twig:Sonner>
</div>
```

### Server Rendered

```twig
<twig:Sonner closeButton="true">
    <twig:Toast type="success" title="Profile saved" description="Your changes have been applied." duration="0" />
    <twig:Toast type="info" title="Welcome back, Alice!" duration="0" />
</twig:Sonner>
```

## API Reference

### `<twig:Sonner>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `position` | `'top-left'\|'top-center'\|'top-right'\|'bottom-left'\|'bottom-center'\|'bottom-right'` | `'top-right'` | Position of the notification region. |
| `expand` | `boolean` | `false` | Whether toasts expand on hover instead of stacking. |
| `richColors` | `boolean` | `false` | Whether to use semantic colors for toast types. |
| `closeButton` | `boolean` | `false` | Whether to show a close button on every toast. |
| `duration` | `int` | `4000` | Auto-dismiss duration in milliseconds. |
| `gap` | `int` | `14` | Pixel gap between stacked toasts. |
| `visibleToasts` | `int` | `3` | Maximum number of visible stacked toasts. |
| `dir` | `'ltr'\|'rtl'\|'auto'` | `'ltr'` | Text direction. |
| `theme` | `'light'\|'dark'\|'system'` | `'system'` | Color theme. |

| Block | Description |
|:------|:------------|
| `content` | Optional trigger button(s) or server-rendered `<twig:Toast>` components. |
### `<twig:Toast>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `type` | `'default'\|'success'\|'error'\|'warning'\|'info'\|'loading'` | `'default'` | The toast type. |
| `title` | `string` | `''` | The toast title. Required. |
| `description` | `string\|null` | `null` | The secondary description line. |
| `duration` | `int\|null` | `null` | Per-toast auto-dismiss override in ms. Uses the Toaster default when `null`. |
| `closeButton` | `boolean` | `false` | Whether to show a close button. |
| `id` | `string\|null` | `null` | Stable ID for deduplication. Auto-generated when `null`. |
| `action` | `array\|null` | `null` | Action link with `label` and `url` keys. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/spinner.md">
# Spinner

An indicator that can be used to show a loading state.

```twig
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
    <twig:Item variant="muted">
        <twig:Item:Media>
            <twig:Spinner />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title class="line-clamp-1">Processing payment...</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Content class="flex-none justify-end">
            <span class="text-sm tabular-nums">$100.00</span>
        </twig:Item:Content>
    </twig:Item>
</div>
```

## Installation

```shell
php bin/console ux:install spinner --kit shadcn
```
## Usage

```twig
<twig:Button disabled>
    <twig:Spinner /> Please wait
</twig:Button>
```

## Examples

### Size

Use the `size-*` utility class to change the size of the spinner.

```twig
<div class="flex items-center gap-6">
    <twig:Spinner class="size-3" />
    <twig:Spinner class="size-4" />
    <twig:Spinner class="size-6" />
    <twig:Spinner class="size-8" />
</div>
```

### Button

Add a spinner to a button to indicate a loading state. Place the `Spinner` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.

```twig
<div class="flex flex-col items-center gap-4">
    <twig:Button disabled size="sm">
        <twig:Spinner data-icon="inline-start" />
        Loading...
    </twig:Button>
    <twig:Button variant="outline" disabled size="sm">
        <twig:Spinner data-icon="inline-start" />
        Please wait
    </twig:Button>
    <twig:Button variant="secondary" disabled size="sm">
        <twig:Spinner data-icon="inline-start" />
        Processing
    </twig:Button>
</div>
```

### Badge

Add a spinner to a badge to indicate a loading state. Place the `Spinner` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.

```twig
<div class="flex items-center gap-4 [--radius:1.2rem]">
    <twig:Badge>
        <twig:Spinner data-icon="inline-start" />
        Syncing
    </twig:Badge>
    <twig:Badge variant="secondary">
        <twig:Spinner data-icon="inline-start" />
        Updating
    </twig:Badge>
    <twig:Badge variant="outline">
        <twig:Spinner data-icon="inline-start" />
        Processing
    </twig:Badge>
</div>
```

### Input Group

```twig
<div class="flex w-full max-w-md flex-col gap-4">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Send a message..." disabled />
        <twig:InputGroup:Addon align="inline-end">
            <twig:Spinner />
        </twig:InputGroup:Addon>
    </twig:InputGroup>
    <twig:InputGroup>
        <twig:InputGroup:Textarea placeholder="Send a message..." disabled />
        <twig:InputGroup:Addon align="block-end">
            <twig:Spinner /> Validating...
            <twig:InputGroup:Button class="ml-auto" variant="default">
                <twig:ux:icon name="lucide:arrow-up" />
                <span class="sr-only">Send</span>
            </twig:InputGroup:Button>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>
```

### Empty

```twig
<twig:Empty class="w-full">
    <twig:Empty:Header>
        <twig:Empty:Media variant="icon">
            <twig:Spinner />
        </twig:Empty:Media>
        <twig:Empty:Title>Processing your request</twig:Empty:Title>
        <twig:Empty:Description>Please wait while we process your request. Do not refresh the page.</twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content>
        <twig:Button variant="outline" size="sm">Cancel</twig:Button>
    </twig:Empty:Content>
</twig:Empty>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]" dir="rtl">
        <twig:Item variant="muted" dir="rtl">
            <twig:Item:Media>
                <twig:Spinner />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title class="line-clamp-1">جاري معالجة الدفع...</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none justify-end">
                <span class="text-sm tabular-nums">١٠٠.٠٠ دولار</span>
            </twig:Item:Content>
        </twig:Item>
    </div>
    {# Hebrew #}
    <div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]" dir="rtl">
        <twig:Item variant="muted" dir="rtl">
            <twig:Item:Media>
                <twig:Spinner />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title class="line-clamp-1">מעבד תשלום...</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none justify-end">
                <span class="text-sm tabular-nums">$100.00</span>
            </twig:Item:Content>
        </twig:Item>
    </div>
</div>
```

## API Reference

### `<twig:Spinner>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `label` | `string` | `'Loading'` | The accessible label announced to assistive technologies. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/switch.md">
# Switch

A control that allows the user to toggle between checked and not checked.

```twig
<div class="flex items-center space-x-2">
    <twig:Switch id="airplane-mode" />
    <twig:Label for="airplane-mode">Airplane Mode</twig:Label>
</div>
```

## Installation

```shell
php bin/console ux:install switch --kit shadcn
```
## Usage

```twig
<twig:Switch />
```

## Examples

### Description

```twig
<twig:Field orientation="horizontal" class="max-w-sm">
    <twig:Field:Content>
        <twig:Field:Label for="switch-focus-mode">Share across devices</twig:Field:Label>
        <twig:Field:Description>Focus is shared across devices, and turns off when you leave the app.</twig:Field:Description>
    </twig:Field:Content>
    <twig:Switch id="switch-focus-mode" />
</twig:Field>
```

### Choice Card

Card-style selection where `Field:Label` wraps the entire `Field` for a clickable card pattern.

```twig
<twig:Field:Group class="w-full max-w-sm">
    <twig:Field:Label for="switch-share">
        <twig:Field orientation="horizontal">
            <twig:Field:Content>
                <twig:Field:Title>Share across devices</twig:Field:Title>
                <twig:Field:Description>Focus is shared across devices, and turns off when you leave the app.</twig:Field:Description>
            </twig:Field:Content>
            <twig:Switch id="switch-share" />
        </twig:Field>
    </twig:Field:Label>
    <twig:Field:Label for="switch-notifications">
        <twig:Field orientation="horizontal">
            <twig:Field:Content>
                <twig:Field:Title>Enable notifications</twig:Field:Title>
                <twig:Field:Description>Receive notifications when focus mode is enabled or disabled.</twig:Field:Description>
            </twig:Field:Content>
            <twig:Switch id="switch-notifications" checked />
        </twig:Field>
    </twig:Field:Label>
</twig:Field:Group>
```

### Disabled

Add the `disabled` prop to the `Switch` to disable it. Add the `data-disabled` prop to the `Field` for styling.

```twig
<twig:Field orientation="horizontal" data-disabled class="w-fit">
    <twig:Switch id="switch-disabled-unchecked" disabled />
    <twig:Field:Label for="switch-disabled-unchecked">Disabled</twig:Field:Label>
</twig:Field>
```

### Invalid

Add `aria-invalid="true"` to the `Switch` to indicate an invalid state. Add `data-invalid` to the `Field` for styling.

```twig
<twig:Field orientation="horizontal" class="max-w-sm" data-invalid>
    <twig:Field:Content>
        <twig:Field:Label for="switch-terms">Accept terms and conditions</twig:Field:Label>
        <twig:Field:Description>You must accept the terms and conditions to continue.</twig:Field:Description>
    </twig:Field:Content>
    <twig:Switch id="switch-terms" aria-invalid="true" />
</twig:Field>
```

### Size

Use the `size` prop to change the size of the switch.

```twig
<twig:Field:Group class="w-full max-w-[10rem]">
    <twig:Field orientation="horizontal">
        <twig:Switch id="switch-size-sm" size="sm" />
        <twig:Field:Label for="switch-size-sm">Small</twig:Field:Label>
    </twig:Field>
    <twig:Field orientation="horizontal">
        <twig:Switch id="switch-size-default" size="default" />
        <twig:Field:Label for="switch-size-default">Default</twig:Field:Label>
    </twig:Field>
</twig:Field:Group>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

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

## API Reference

### `<twig:Switch>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `size` | `'default'\|'sm'` | `'default'` | The switch size. |
| `checked` | `boolean` | `false` | Whether the switch is initially checked. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/table.md">
# Table

A responsive table component.

```twig
{%- set invoices = [
    {invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
    {invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
    {invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
    {invoice: 'INV004', paymentStatus: 'Paid', totalAmount: '$450.00', paymentMethod: 'Credit Card'},
    {invoice: 'INV005', paymentStatus: 'Paid', totalAmount: '$550.00', paymentMethod: 'PayPal'},
    {invoice: 'INV006', paymentStatus: 'Pending', totalAmount: '$200.00', paymentMethod: 'Bank Transfer'},
    {invoice: 'INV007', paymentStatus: 'Unpaid', totalAmount: '$300.00', paymentMethod: 'Credit Card'},
] -%}
<twig:Table>
    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
            <twig:Table:Head>Status</twig:Table:Head>
            <twig:Table:Head>Method</twig:Table:Head>
            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        {% for invoice in invoices %}
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
                <twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
                <twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
                <twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
            </twig:Table:Row>
        {% endfor %}
    </twig:Table:Body>
    <twig:Table:Footer>
        <twig:Table:Row>
            <twig:Table:Cell colspan="3">Total</twig:Table:Cell>
            <twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Footer>
</twig:Table>
```

## Installation

```shell
php bin/console ux:install table --kit shadcn
```
## Usage

```twig
<twig:Table>
    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
            <twig:Table:Head>Status</twig:Table:Head>
            <twig:Table:Head>Method</twig:Table:Head>
            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        <twig:Table:Row>
            <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
            <twig:Table:Cell>Paid</twig:Table:Cell>
            <twig:Table:Cell>Credit Card</twig:Table:Cell>
            <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Body>
</twig:Table>
```

## Examples

### Footer

Use the `TableFooter` component to add a footer to the table.

```twig
{%- set invoices = [
    {invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
    {invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
    {invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
] -%}
<twig:Table>
    <twig:Table:Caption>A list of your recent invoices.</twig:Table:Caption>
    <twig:Table:Header>
        <twig:Table:Row>
            <twig:Table:Head class="w-[100px]">Invoice</twig:Table:Head>
            <twig:Table:Head>Status</twig:Table:Head>
            <twig:Table:Head>Method</twig:Table:Head>
            <twig:Table:Head class="text-right">Amount</twig:Table:Head>
        </twig:Table:Row>
    </twig:Table:Header>
    <twig:Table:Body>
        {% for invoice in invoices %}
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">{{ invoice.invoice }}</twig:Table:Cell>
                <twig:Table:Cell>{{ invoice.paymentStatus }}</twig:Table:Cell>
                <twig:Table:Cell>{{ invoice.paymentMethod }}</twig:Table:Cell>
                <twig:Table:Cell class="text-right">{{ invoice.totalAmount }}</twig:Table:Cell>
            </twig:Table:Row>
        {% endfor %}
    </twig:Table:Body>
    <twig:Table:Footer>
        <twig:Table:Row>
            <twig:Table:Cell colspan="3">Total</twig:Table:Cell>
            <twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
        </twig:Table:Row>
    </twig:Table:Footer>
</twig:Table>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8 w-full items-center">
    {# Arabic #}
    <twig:Table dir="rtl">
        <twig:Table:Caption>قائمة بفواتيرك الأخيرة.</twig:Table:Caption>
        <twig:Table:Header>
            <twig:Table:Row>
                <twig:Table:Head class="w-[100px]">الفاتورة</twig:Table:Head>
                <twig:Table:Head>الحالة</twig:Table:Head>
                <twig:Table:Head>الطريقة</twig:Table:Head>
                <twig:Table:Head class="text-right">المبلغ</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
                <twig:Table:Cell>مدفوع</twig:Table:Cell>
                <twig:Table:Cell>بطاقة ائتمانية</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
            </twig:Table:Row>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV002</twig:Table:Cell>
                <twig:Table:Cell>قيد الانتظار</twig:Table:Cell>
                <twig:Table:Cell>PayPal</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$150.00</twig:Table:Cell>
            </twig:Table:Row>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV003</twig:Table:Cell>
                <twig:Table:Cell>غير مدفوع</twig:Table:Cell>
                <twig:Table:Cell>تحويل بنكي</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$350.00</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Cell colspan="3">المجموع</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>

    {# Hebrew #}
    <twig:Table dir="rtl">
        <twig:Table:Caption>רשימת החשבוניות האחרונות שלך.</twig:Table:Caption>
        <twig:Table:Header>
            <twig:Table:Row>
                <twig:Table:Head class="w-[100px]">חשבונית</twig:Table:Head>
                <twig:Table:Head>סטטוס</twig:Table:Head>
                <twig:Table:Head>שיטה</twig:Table:Head>
                <twig:Table:Head class="text-right">סכום</twig:Table:Head>
            </twig:Table:Row>
        </twig:Table:Header>
        <twig:Table:Body>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV001</twig:Table:Cell>
                <twig:Table:Cell>שולם</twig:Table:Cell>
                <twig:Table:Cell>כרטיס אשראי</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$250.00</twig:Table:Cell>
            </twig:Table:Row>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV002</twig:Table:Cell>
                <twig:Table:Cell>ממתין</twig:Table:Cell>
                <twig:Table:Cell>PayPal</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$150.00</twig:Table:Cell>
            </twig:Table:Row>
            <twig:Table:Row>
                <twig:Table:Cell class="font-medium">INV003</twig:Table:Cell>
                <twig:Table:Cell>לא שולם</twig:Table:Cell>
                <twig:Table:Cell>העברה בנקאית</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$350.00</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Body>
        <twig:Table:Footer>
            <twig:Table:Row>
                <twig:Table:Cell colspan="3">סה"כ</twig:Table:Cell>
                <twig:Table:Cell class="text-right">$2,500.00</twig:Table:Cell>
            </twig:Table:Row>
        </twig:Table:Footer>
    </twig:Table>
</div>
```

## API Reference

### `<twig:Table>`

| Block | Description |
|:------|:------------|
| `content` | The table structure, typically includes `Table:Header`, `Table:Body`, and optionally `Table:Footer`. |
### `<twig:Table:Body>`

| Block | Description |
|:------|:------------|
| `content` | The table body rows, typically `Table:Row` components. |
### `<twig:Table:Caption>`

| Block | Description |
|:------|:------------|
| `content` | The table caption text. |
### `<twig:Table:Cell>`

| Block | Description |
|:------|:------------|
| `content` | The cell content. |
### `<twig:Table:Footer>`

| Block | Description |
|:------|:------------|
| `content` | The table footer rows, typically `Table:Row` components. |
### `<twig:Table:Head>`

| Block | Description |
|:------|:------------|
| `content` | The header cell content. |
### `<twig:Table:Header>`

| Block | Description |
|:------|:------------|
| `content` | The header row(s), typically a `Table:Row` with `Table:Head` cells. |
### `<twig:Table:Row>`

| Block | Description |
|:------|:------------|
| `content` | The row cells, typically `Table:Cell` or `Table:Head` components. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/tabs.md">
# Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

```twig
<twig:Tabs defaultValue="overview" class="w-[400px]">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings">Settings</twig:Tabs:Trigger>
    </twig:Tabs:List>
    <twig:Tabs:Content value="overview">
        <twig:Card>
            <twig:Card:Header>
                <twig:Card:Title>Overview</twig:Card:Title>
                <twig:Card:Description>
                    View your key metrics and recent project activity. Track progress
                    across all your active projects.
                </twig:Card:Description>
            </twig:Card:Header>
            <twig:Card:Content class="text-muted-foreground text-sm">
                You have 12 active projects and 3 pending tasks.
            </twig:Card:Content>
        </twig:Card>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="analytics">
        <twig:Card>
            <twig:Card:Header>
                <twig:Card:Title>Analytics</twig:Card:Title>
                <twig:Card:Description>
                    Track performance and user engagement metrics. Monitor trends and
                    identify growth opportunities.
                </twig:Card:Description>
            </twig:Card:Header>
            <twig:Card:Content class="text-muted-foreground text-sm">
                Page views are up 25% compared to last month.
            </twig:Card:Content>
        </twig:Card>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="reports">
        <twig:Card>
            <twig:Card:Header>
                <twig:Card:Title>Reports</twig:Card:Title>
                <twig:Card:Description>
                    Generate and download your detailed reports. Export data in
                    multiple formats for analysis.
                </twig:Card:Description>
            </twig:Card:Header>
            <twig:Card:Content class="text-muted-foreground text-sm">
                You have 5 reports ready and available to export.
            </twig:Card:Content>
        </twig:Card>
    </twig:Tabs:Content>
    <twig:Tabs:Content value="settings">
        <twig:Card>
            <twig:Card:Header>
                <twig:Card:Title>Settings</twig:Card:Title>
                <twig:Card:Description>
                    Manage your account preferences and options. Customize your
                    experience to fit your needs.
                </twig:Card:Description>
            </twig:Card:Header>
            <twig:Card:Content class="text-muted-foreground text-sm">
                Configure notifications, security, and themes.
            </twig:Card:Content>
        </twig:Card>
    </twig:Tabs:Content>
</twig:Tabs>
```

## Installation

```shell
php bin/console ux:install tabs --kit shadcn
```
## Usage

```twig
<twig:Tabs defaultValue="account" class="w-[400px]">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
    </twig:Tabs:List>
    <twig:Tabs:Content value="account">Make changes to your account here.</twig:Tabs:Content>
    <twig:Tabs:Content value="password">Change your password here.</twig:Tabs:Content>
</twig:Tabs>
```

## Examples

### Line

Use the `variant="line"` prop on `Tabs:List` for a line style.

```twig
<twig:Tabs defaultValue="overview">
    <twig:Tabs:List variant="line">
        <twig:Tabs:Trigger value="overview">Overview</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="analytics">Analytics</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="reports">Reports</twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Vertical

Use `orientation="vertical"` for vertical tabs.

```twig
<twig:Tabs defaultValue="account" orientation="vertical">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="account">Account</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="password">Password</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="notifications">Notifications</twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Disabled

```twig
<twig:Tabs defaultValue="home">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="home">Home</twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="settings" disabled>
            Disabled
        </twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### Icons

```twig
<twig:Tabs defaultValue="preview">
    <twig:Tabs:List>
        <twig:Tabs:Trigger value="preview">
            <twig:ux:icon name="lucide:app-window" />
            Preview
        </twig:Tabs:Trigger>
        <twig:Tabs:Trigger value="code">
            <twig:ux:icon name="lucide:code" />
            Code
        </twig:Tabs:Trigger>
    </twig:Tabs:List>
</twig:Tabs>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <twig:Tabs defaultValue="overview" class="w-full max-w-sm" dir="rtl">
        <twig:Tabs:List dir="rtl">
            <twig:Tabs:Trigger value="overview">نظرة عامة</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="analytics">التحليلات</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="reports">التقارير</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="settings">الإعدادات</twig:Tabs:Trigger>
        </twig:Tabs:List>
        <twig:Tabs:Content value="overview">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>نظرة عامة</twig:Card:Title>
                    <twig:Card:Description>
                        عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="analytics">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>التحليلات</twig:Card:Title>
                    <twig:Card:Description>
                        تتبع مقاييس الأداء ومشاركة المستخدمين. راقب الاتجاهات وحدد فرص النمو.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    زادت مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="reports">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>التقارير</twig:Card:Title>
                    <twig:Card:Description>
                        إنشاء وتنزيل تقاريرك التفصيلية. تصدير البيانات بتنسيقات متعددة للتحليل.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    لديك ٥ تقارير جاهزة ومتاحة للتصدير.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="settings">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>الإعدادات</twig:Card:Title>
                    <twig:Card:Description>
                        إدارة تفضيلات حسابك وخياراته. تخصيص تجربتك لتناسب احتياجاتك.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    تكوين الإشعارات والأمان والسمات.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
    </twig:Tabs>

    {# Hebrew #}
    <twig:Tabs defaultValue="overview" class="w-full max-w-sm" dir="rtl">
        <twig:Tabs:List dir="rtl">
            <twig:Tabs:Trigger value="overview">סקירה כללית</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="analytics">אנליטיקה</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="reports">דוחות</twig:Tabs:Trigger>
            <twig:Tabs:Trigger value="settings">הגדרות</twig:Tabs:Trigger>
        </twig:Tabs:List>
        <twig:Tabs:Content value="overview">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>סקירה כללית</twig:Card:Title>
                    <twig:Card:Description>
                        הצג את המדדים העיקריים שלך ואת הנתונים האחרונים. עקוב אחר ההתקדמות בכל המיזמים.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    יש לך 12 מיזמים נגישים ו-3 משימות ממתינות.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="analytics">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>אנליטיקה</twig:Card:Title>
                    <twig:Card:Description>
                        עקוב אחר ביצועים ומדדי מעורבות משתמשים. זהה מגמות והזדמנויות צמיחה.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    הגידול עמד על 25% בהשוואה לחודש שעבר.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="reports">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>דוחות</twig:Card:Title>
                    <twig:Card:Description>
                        צור והורד את הדוחות המלאים שלך. ייצא נתונים בתבניות שונות לניתוח.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    יש לך 5 דוחות מוכנים וזמינים לייצוא.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
        <twig:Tabs:Content value="settings">
            <twig:Card dir="rtl">
                <twig:Card:Header>
                    <twig:Card:Title>הגדרות</twig:Card:Title>
                    <twig:Card:Description>
                        ערוך את הגדרות החשבון שלך. התאם אישית את החוויה כך שתתאים לצרכיך.
                    </twig:Card:Description>
                </twig:Card:Header>
                <twig:Card:Content class="text-sm text-muted-foreground">
                    הגדר התראות, אבטחה וערכות נושא.
                </twig:Card:Content>
            </twig:Card>
        </twig:Tabs:Content>
    </twig:Tabs>
</div>
```

## API Reference

### `<twig:Tabs>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `defaultValue` | `string` | `''` | Define the open Tabs at initial rendering. |
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | Define the visual orientation. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `string` | - | Unique suffix identifier for generating Tabs internal IDs. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:List>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'line'` | `'default'` | The visual style variant. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
### `<twig:Tabs:Trigger>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `value` | `string` | - | Unique suffix identifier for generating Tabs internal IDs. |

| Block | Description |
|:------|:------------|
| `content` | The default block. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/textarea.md">
# Textarea

Displays a form textarea or a component that looks like a textarea.

```twig
<div class="*:max-w-xs contents">
    <twig:Textarea placeholder="Type your message here." />
</div>
```

## Installation

```shell
php bin/console ux:install textarea --kit shadcn
```
## Usage

```twig
<twig:Textarea />
```

## Examples

### Field

Use `Field`, `Field:Label`, and `Field:Description` to create a textarea with a label and description.

```twig
<div class="*:max-w-xs contents">
    <twig:Field>
        <twig:Field:Label for="textarea-message">Message</twig:Field:Label>
        <twig:Field:Description>Enter your message below.</twig:Field:Description>
        <twig:Textarea id="textarea-message" placeholder="Type your message here." />
    </twig:Field>
</div>
```

### Disabled

Use the `disabled` attribute to disable the textarea. To style the disabled state, add the `data-disabled` attribute to the `Field` component.

```twig
<div class="*:max-w-xs contents">
    <twig:Field data-disabled>
        <twig:Field:Label for="textarea-disabled">Message</twig:Field:Label>
        <twig:Textarea id="textarea-disabled" placeholder="Type your message here." disabled />
    </twig:Field>
</div>
```

### Invalid

Use the `aria-invalid` attribute to mark the textarea as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.

```twig
<div class="*:max-w-xs contents">
    <twig:Field data-invalid>
        <twig:Field:Label for="textarea-invalid">Message</twig:Field:Label>
        <twig:Textarea id="textarea-invalid" placeholder="Type your message here." aria-invalid="true" />
        <twig:Field:Description>Please enter a valid message.</twig:Field:Description>
    </twig:Field>
</div>
```

### Button

Pair with `Button` to create a textarea with a submit button.

```twig
<div class="*:max-w-xs contents">
    <div class="grid w-full gap-2">
        <twig:Textarea placeholder="Type your message here." />
        <twig:Button>Send message</twig:Button>
    </div>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="*:max-w-xs contents">
    <div class="flex flex-col gap-8 w-full">
        {# Arabic #}
        <twig:Field dir="rtl">
            <twig:Field:Label for="feedback-ar" dir="rtl">التعليقات</twig:Field:Label>
            <twig:Textarea id="feedback-ar" placeholder="تعليقاتك تساعدنا على التحسين..." dir="rtl" rows="4" />
            <twig:Field:Description dir="rtl">شاركنا أفكارك حول خدمتنا.</twig:Field:Description>
        </twig:Field>

        {# Hebrew #}
        <twig:Field dir="rtl">
            <twig:Field:Label for="feedback-he" dir="rtl">משוב</twig:Field:Label>
            <twig:Textarea id="feedback-he" placeholder="המשוב שלך עוזר לנו להתקדם..." dir="rtl" rows="4" />
            <twig:Field:Description dir="rtl">שתף את מחשבותיך על השירות שלנו.</twig:Field:Description>
        </twig:Field>
    </div>

</div>
```

## API Reference

### `<twig:Textarea>`

| Block | Description |
|:------|:------------|
| `content` | The initial textarea value. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/toggle-group.md">
# Toggle Group

A set of two-state buttons that can be toggled on or off.

```twig
<twig:ToggleGroup variant="outline" type="multiple">
    <twig:ToggleGroup:Item aria-label="Toggle bold">
        <twig:ux:icon name="lucide:bold" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle italic">
        <twig:ux:icon name="lucide:italic" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle strikethrough">
        <twig:ux:icon name="lucide:underline" />
    </twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

## Installation

```shell
php bin/console ux:install toggle-group --kit shadcn
```
## Usage

```twig
<twig:ToggleGroup type="single">
    <twig:ToggleGroup:Item value="a">A</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item value="b">B</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item value="c">C</twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

## Examples

### Outline

```twig
<twig:ToggleGroup variant="outline" type="single">
    <twig:ToggleGroup:Item aria-label="Toggle all" pressed>All</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle missed">Missed</twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

### Size

```twig
<div class="flex flex-col gap-4">
    <twig:ToggleGroup variant="outline" size="sm" type="single">
        <twig:ToggleGroup:Item aria-label="Toggle top" pressed>Top</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle bottom">Bottom</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle left">Left</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle right">Right</twig:ToggleGroup:Item>
    </twig:ToggleGroup>
    <twig:ToggleGroup variant="outline" type="single">
        <twig:ToggleGroup:Item aria-label="Toggle top" pressed>Top</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle bottom">Bottom</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle left">Left</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="Toggle right">Right</twig:ToggleGroup:Item>
    </twig:ToggleGroup>
</div>
```

### Spacing

```twig
<twig:ToggleGroup variant="outline" size="sm" type="single" spacing="2">
    <twig:ToggleGroup:Item aria-label="Toggle top" pressed>Top</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle bottom">Bottom</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle left">Left</twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle right">Right</twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

### Vertical

```twig
<twig:ToggleGroup type="multiple" orientation="vertical" spacing="1">
    <twig:ToggleGroup:Item aria-label="Toggle bold" pressed>
        <twig:ux:icon name="lucide:bold" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle italic" pressed>
        <twig:ux:icon name="lucide:italic" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle underline">
        <twig:ux:icon name="lucide:underline" />
    </twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

### Disabled

```twig
<twig:ToggleGroup disabled type="multiple">
    <twig:ToggleGroup:Item aria-label="Toggle bold">
        <twig:ux:icon name="lucide:bold" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle italic">
        <twig:ux:icon name="lucide:italic" />
    </twig:ToggleGroup:Item>
    <twig:ToggleGroup:Item aria-label="Toggle underline">
        <twig:ux:icon name="lucide:underline" />
    </twig:ToggleGroup:Item>
</twig:ToggleGroup>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col items-center gap-4">
    {# Arabic #}
    <twig:ToggleGroup variant="outline" type="single" dir="rtl">
        <twig:ToggleGroup:Item aria-label="قائمة" pressed>قائمة</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="شبكة">شبكة</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="بطاقات">بطاقات</twig:ToggleGroup:Item>
    </twig:ToggleGroup>

    {# Hebrew #}
    <twig:ToggleGroup variant="outline" type="single" dir="rtl">
        <twig:ToggleGroup:Item aria-label="רשימה" pressed>רשימה</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="רשת">רשת</twig:ToggleGroup:Item>
        <twig:ToggleGroup:Item aria-label="כרטיסים">כרטיסים</twig:ToggleGroup:Item>
    </twig:ToggleGroup>
</div>
```

## API Reference

### `<twig:ToggleGroup>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'outline'` | `'default'` | The visual style variant. |
| `size` | `'default'\|'sm'\|'lg'` | `'default'` | The toggle group size. |
| `type` | `'single'\|'multiple'` | `'multiple'` | Whether only one or multiple items can be active. |
| `spacing` | `number` | `2` | Gap between toggle group items. |
| `orientation` | `'horizontal'\|'vertical'` | `'horizontal'` | The layout direction. |
| `disabled` | `boolean` | `false` | Whether all items in the group are disabled. |

| Block | Description |
|:------|:------------|
| `content` | The toggle items, typically multiple `ToggleGroup:Item` components. |
### `<twig:ToggleGroup:Item>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `pressed` | `boolean` | `false` | Whether the item is initially pressed. |

| Block | Description |
|:------|:------------|
| `content` | The toggle item label and/or icon. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/toggle.md">
# Toggle

A two-state button that can be either on or off.

```twig
<twig:Toggle variant="outline" size="sm" aria-label="Toggle bookmark">
    <twig:ux:icon name="lucide:bookmark" class="group-data-[state=on]/toggle:fill-current" />
    Bookmark
</twig:Toggle>
```

## Installation

```shell
php bin/console ux:install toggle --kit shadcn
```
## Usage

```twig
<twig:Toggle>
    Toggle
</twig:Toggle>
```

## Examples

### Outline

Use `variant="outline"` for an outline style.

```twig
<div class="flex flex-wrap items-center gap-2">
    <twig:Toggle variant="outline" aria-label="Toggle italic">
        <twig:ux:icon name="lucide:italic" />
        Italic
    </twig:Toggle>
    <twig:Toggle variant="outline" aria-label="Toggle bold">
        <twig:ux:icon name="lucide:bold" />
        Bold
    </twig:Toggle>
</div>
```

### With Text

```twig
<twig:Toggle aria-label="Toggle italic">
    <twig:ux:icon name="lucide:italic" />
    Italic
</twig:Toggle>
```

### Size

Use the `size` prop to change the size of the toggle.

```twig
<div class="flex flex-wrap items-center gap-2">
    <twig:Toggle variant="outline" aria-label="Toggle small" size="sm">
        Small
    </twig:Toggle>
    <twig:Toggle variant="outline" aria-label="Toggle default" size="default">
        Default
    </twig:Toggle>
    <twig:Toggle variant="outline" aria-label="Toggle large" size="lg">
        Large
    </twig:Toggle>
</div>
```

### Disabled

```twig
<div class="flex flex-wrap items-center gap-2">
    <twig:Toggle aria-label="Toggle disabled" disabled>
        Disabled
    </twig:Toggle>
    <twig:Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
        Disabled
    </twig:Toggle>
</div>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <twig:Toggle variant="outline" size="sm" aria-label="Toggle bookmark" dir="rtl">
        <twig:ux:icon name="lucide:bookmark" class="group-aria-pressed/toggle:fill-foreground" />
        إشارة مرجعية
    </twig:Toggle>

    {# Hebrew #}
    <twig:Toggle variant="outline" size="sm" aria-label="Toggle bookmark" dir="rtl">
        <twig:ux:icon name="lucide:bookmark" class="group-aria-pressed/toggle:fill-foreground" />
        סימנייה
    </twig:Toggle>
</div>
```

## API Reference

### `<twig:Toggle>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `variant` | `'default'\|'outline'` | `'default'` | The visual style variant. |
| `size` | `'default'\|'sm'\|'lg'` | `'default'` | The toggle size. |
| `pressed` | `boolean` | `false` | Whether the toggle is initially pressed. |

| Block | Description |
|:------|:------------|
| `content` | The toggle label and/or icon. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/tooltip.md">
# Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

```twig
<twig:Tooltip id="tooltip-demo">
    <twig:Tooltip:Trigger>
        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline">Hover</twig:Button>
    </twig:Tooltip:Trigger>
    <twig:Tooltip:Content>
        <p>Add to library</p>
    </twig:Tooltip:Content>
</twig:Tooltip>
```

## Installation

```shell
php bin/console ux:install tooltip --kit shadcn
```
## Usage

```twig
<twig:Tooltip id="my-tooltip">
    <twig:Tooltip:Trigger>
        <twig:Button {{ ...tooltip_trigger_attrs }}>Hover</twig:Button>
    </twig:Tooltip:Trigger>
    <twig:Tooltip:Content>
        <p>Add to library</p>
    </twig:Tooltip:Content>
</twig:Tooltip>
```

## Examples

### Side

Use the `side` prop to change the position of the tooltip.

```twig
<div class="flex flex-wrap gap-2">
    {% for side in ['left', 'top', 'bottom', 'right'] %}
        <twig:Tooltip id="tooltip-side-{{ side }}">
            <twig:Tooltip:Trigger>
                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
                    {{ side|capitalize }}
                </twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content side="{{ side }}">
                <p>Add to library</p>
            </twig:Tooltip:Content>
        </twig:Tooltip>
    {% endfor %}
</div>
```

### With Keyboard Shortcut

```twig
<twig:Tooltip id="tooltip-with-keyboard-shortcut">
    <twig:Tooltip:Trigger>
        <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" size="icon-sm">
            <twig:ux:icon name="lucide:save" />
        </twig:Button>
    </twig:Tooltip:Trigger>
    <twig:Tooltip:Content>
        Save Changes <twig:Kbd>S</twig:Kbd>
    </twig:Tooltip:Content>
</twig:Tooltip>
```

### Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

```twig
<twig:Tooltip id="tooltip-disabled-button">
    <twig:Tooltip:Trigger>
        <span class="inline-block w-fit">
            <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled class="pointer-events-auto">Disabled</twig:Button>
        </span>
    </twig:Tooltip:Trigger>
    <twig:Tooltip:Content>
        <p>This feature is currently unavailable</p>
    </twig:Tooltip:Content>
</twig:Tooltip>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex flex-wrap gap-2" dir="rtl">
        {% for side, label in {left: 'يسار', top: 'أعلى', bottom: 'أسفل', right: 'يمين'} %}
            <twig:Tooltip id="tooltip-rtl-ar-{{ side }}">
                <twig:Tooltip:Trigger>
                    <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
                        {{ label }}
                    </twig:Button>
                </twig:Tooltip:Trigger>
                <twig:Tooltip:Content side="{{ side }}">إضافة إلى المكتبة</twig:Tooltip:Content>
            </twig:Tooltip>
        {% endfor %}
    </div>

    {# Hebrew #}
    <div class="flex flex-wrap gap-2" dir="rtl">
        {% for side, label in {left: 'שמאל', top: 'למעלה', bottom: 'למטה', right: 'ימין'} %}
            <twig:Tooltip id="tooltip-rtl-he-{{ side }}">
                <twig:Tooltip:Trigger>
                    <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
                        {{ label }}
                    </twig:Button>
                </twig:Tooltip:Trigger>
                <twig:Tooltip:Content side="{{ side }}">הוסף לרשימה</twig:Tooltip:Content>
            </twig:Tooltip>
        {% endfor %}
    </div>
</div>
```

## API Reference

### `<twig:Tooltip>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `id` | `string` | - | Unique identifier for the tooltip. |
| `delayDuration` | `number` | `0` | Delay in milliseconds before showing the tooltip. |

| Block | Description |
|:------|:------------|
| `content` | The tooltip structure, typically includes `Tooltip:Trigger` and `Tooltip:Content`. |
### `<twig:Tooltip:Content>`

| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `side` | `'top'\|'right'\|'bottom'\|'left'` | `'top'` | The preferred side to display the tooltip. |
| `sideOffset` | `number` | `0` | The distance in pixels from the trigger. |

| Block | Description |
|:------|:------------|
| `content` | The tooltip text or content. |
### `<twig:Tooltip:Trigger>`

| Block | Description |
|:------|:------------|
| `content` | The element that triggers the tooltip on hover/focus. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/components/typography.md">
# Typography

Styled HTML text elements for headings, paragraphs, quotes, lists and inline code.

```twig
<div class="self-start w-full">
<twig:Typography:H1>Taxing Laughter: The Joke Tax Chronicles</twig:Typography:H1>
<twig:Typography:P class="text-xl text-muted-foreground">
    Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
</twig:Typography:P>
<twig:Typography:H2 class="mt-10">The King's Plan</twig:Typography:H2>
<twig:Typography:P>
    The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.
</twig:Typography:P>
<twig:Typography:Blockquote>
    "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
</twig:Typography:Blockquote>
<twig:Typography:H3 class="mt-8">The Joke Tax</twig:Typography:H3>
<twig:Typography:P>
    The king's subjects were not amused. They grumbled and complained, but the king was firm:
</twig:Typography:P>
<twig:Typography:List>
    <li>1st level of puns: 5 gold coins</li>
    <li>2nd level of jokes: 10 gold coins</li>
    <li>3rd level of one-liners : 20 gold coins</li>
</twig:Typography:List>
<twig:Typography:P>
    As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">Jokester's Revolt</twig:Typography:H3>
<twig:Typography:P>
    Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
</twig:Typography:P>
<twig:Typography:P>
    And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">The People's Rebellion</twig:Typography:H3>
<twig:Typography:P>
    The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
</twig:Typography:P>
<div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
        <thead>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <th class="border px-4 py-2 text-left font-bold">King's Treasury</th>
                <th class="border px-4 py-2 text-left font-bold">People's happiness</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Empty</td>
                <td class="border px-4 py-2 text-left">Overflowing</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Modest</td>
                <td class="border px-4 py-2 text-left">Satisfied</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Full</td>
                <td class="border px-4 py-2 text-left">Ecstatic</td>
            </tr>
        </tbody>
    </table>
</div>
<twig:Typography:P>
    The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.
</twig:Typography:P>
<twig:Typography:P>
    The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
</twig:Typography:P>
</div>
```

## Installation

```shell
php bin/console ux:install typography --kit shadcn
```
## Usage

```twig
<twig:Typography:H1>The Joke Tax Chronicles</twig:Typography:H1>
<twig:Typography:P>
    Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.
</twig:Typography:P>
```

## Examples

### H1

```twig
<twig:Typography:H1 class="text-center">Taxing Laughter: The Joke Tax Chronicles</twig:Typography:H1>
```

### H2

```twig
<twig:Typography:H2>The People of the Kingdom</twig:Typography:H2>
```

### H3

```twig
<twig:Typography:H3>The Joke Tax</twig:Typography:H3>
```

### H4

```twig
<twig:Typography:H4>People stopped telling jokes</twig:Typography:H4>
```

### Paragraph

```twig
<twig:Typography:P>
    The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
</twig:Typography:P>
```

### Blockquote

```twig
<twig:Typography:Blockquote>
    "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
</twig:Typography:Blockquote>
```

### Table

```twig
<div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
        <thead>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <th class="border px-4 py-2 text-left font-bold">King's Treasury</th>
                <th class="border px-4 py-2 text-left font-bold">People's happiness</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Empty</td>
                <td class="border px-4 py-2 text-left">Overflowing</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Modest</td>
                <td class="border px-4 py-2 text-left">Satisfied</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-left">Full</td>
                <td class="border px-4 py-2 text-left">Ecstatic</td>
            </tr>
        </tbody>
    </table>
</div>
```

### List

```twig
<twig:Typography:List>
    <li>1st level of puns: 5 gold coins</li>
    <li>2nd level of jokes: 10 gold coins</li>
    <li>3rd level of one-liners : 20 gold coins</li>
</twig:Typography:List>
```

### Inline Code

```twig
<twig:Typography:InlineCode>@radix-ui/react-alert-dialog</twig:Typography:InlineCode>
```

### Lead

```twig
<p class="text-xl text-muted-foreground">
    A modal dialog that interrupts the user with important content and expects a response.
</p>
```

### Large

```twig
<div class="text-lg font-semibold">Are you absolutely sure?</div>
```

### Small

```twig
<small class="text-sm leading-none font-medium">Email address</small>
```

### Muted

```twig
<p class="text-sm text-muted-foreground">Enter your email address.</p>
```

### RTL

To enable RTL support, set the `dir="rtl"` attribute on the root element.

```twig
<div class="self-start w-full" dir="rtl">
<twig:Typography:H1>فرض الضرائب على الضحك: سجلات ضريبة النكتة</twig:Typography:H1>
<twig:Typography:P class="text-xl text-muted-foreground">
    في قديم الزمان، في أرض بعيدة، كان هناك ملك كسول جداً يقضي يومه كله مستلقياً على عرشه. في أحد الأيام، جاءه مستشاروه بمشكلة: المملكة كانت تنفد من المال.
</twig:Typography:P>
<twig:Typography:H2 class="mt-10">خطة الملك</twig:Typography:H2>
<twig:Typography:P>
    فكر الملك طويلاً وبجد، وأخيراً توصل إلى <a href="#" class="font-medium text-primary underline underline-offset-4">خطة عبقرية</a>: سيفرض ضريبة على النكات في المملكة.
</twig:Typography:P>
<twig:Typography:Blockquote class="border-s-2 ps-6 border-l-0 pl-0">
    "في النهاية،" قال، "الجميع يستمتع بنكتة جيدة، لذا من العدل أن يدفعوا مقابل هذا الامتياز."
</twig:Typography:Blockquote>
<twig:Typography:H3 class="mt-8">ضريبة النكتة</twig:Typography:H3>
<twig:Typography:P>
    لم يكن رعايا الملك سعداء. تذمروا واشتكوا، لكن الملك كان حازماً:
</twig:Typography:P>
<twig:Typography:List>
    <li>المستوى الأول من التورية: 5 قطع ذهبية</li>
    <li>المستوى الثاني من النكات: 10 قطع ذهبية</li>
    <li>المستوى الثالث من النكات القصيرة: 20 قطعة ذهبية</li>
</twig:Typography:List>
<twig:Typography:P>
    نتيجة لذلك، توقف الناس عن رواية النكات، وغرقت المملكة في الكآبة. لكن كان هناك شخص واحد رفض أن تحبطه حماقة الملك: مهرج البلاط المسمى المازح.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">ثورة المازح</twig:Typography:H3>
<twig:Typography:P>
    بدأ المازح يتسلل إلى القلعة في منتصف الليل ويترك النكات في كل مكان: تحت وسادة الملك، في حسائه، حتى في المرحاض الملكي. كان الملك غاضباً، لكنه لم يستطع إيقاف المازح.
</twig:Typography:P>
<twig:Typography:P>
    وبعد ذلك، في يوم من الأيام، اكتشف سكان المملكة أن النكات التي تركها المازح كانت مضحكة جداً لدرجة أنهم لم يستطيعوا منع أنفسهم من الضحك. وبمجرد أن بدأوا بالضحك، لم يستطيعوا التوقف.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">ثورة الشعب</twig:Typography:H3>
<twig:Typography:P>
    شعر سكان المملكة بالبهجة من الضحك، وبدأوا في رواية النكات والتورية مرة أخرى، وسرعان ما أصبحت المملكة بأكملها جزءاً من النكتة.
</twig:Typography:P>
<div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
        <thead>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <th class="border px-4 py-2 text-start font-bold">خزينة الملك</th>
                <th class="border px-4 py-2 text-start font-bold">سعادة الشعب</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">فارغة</td>
                <td class="border px-4 py-2 text-start">فائضة</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">متواضعة</td>
                <td class="border px-4 py-2 text-start">راضٍ</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">ممتلئة</td>
                <td class="border px-4 py-2 text-start">منتشٍ</td>
            </tr>
        </tbody>
    </table>
</div>
<twig:Typography:P>
    الملك، عندما رأى مدى سعادة رعاياه، أدرك خطأ طرقه وألغى ضريبة النكتة. أُعلن المازح بطلاً، وعاشت المملكة في سعادة دائمة.
</twig:Typography:P>
<twig:Typography:P>
    مغزى القصة هو: لا تستهن أبداً بقوة الضحك الجيد وكن دائماً حذراً من الأفكار السيئة.
</twig:Typography:P>
</div>
```

```twig
<div class="self-start w-full" dir="rtl">
<twig:Typography:H1>מיסוי הצחוק: כרוניקות מס הבדיחה</twig:Typography:H1>
<twig:Typography:P class="text-xl text-muted-foreground">
    היה היה פעם, בארץ רחוקה, מלך עצלן מאוד שבילה את כל היום בהתרווחות על כס מלכותו. יום אחד, יועציו באו אליו עם בעיה: הממלכה נגמר לה הכסף.
</twig:Typography:P>
<twig:Typography:H2 class="mt-10">התוכנית של המלך</twig:Typography:H2>
<twig:Typography:P>
    המלך חשב ארוכות וקשות, ולבסוף העלה <a href="#" class="font-medium text-primary underline underline-offset-4">תוכנית גאונית</a>: הוא ימסה את הבדיחות בממלכה.
</twig:Typography:P>
<twig:Typography:Blockquote class="border-s-2 ps-6 border-l-0 pl-0">
    "אחרי הכל," אמר, "כולם נהנים מבדיחה טובה, אז זה רק הוגן שישלמו על הזכות הזו."
</twig:Typography:Blockquote>
<twig:Typography:H3 class="mt-8">מס הבדיחה</twig:Typography:H3>
<twig:Typography:P>
    נתיני המלך לא היו מרוצים. הם התלוננו והתרעמו, אבל המלך היה נחוש:
</twig:Typography:P>
<twig:Typography:List>
    <li>רמה ראשונה של משחקי מילים: 5 מטבעות זהב</li>
    <li>רמה שנייה של בדיחות: 10 מטבעות זהב</li>
    <li>רמה שלישית של חידודים: 20 מטבעות זהב</li>
</twig:Typography:List>
<twig:Typography:P>
    כתוצאה מכך, אנשים הפסיקו לספר בדיחות, והממלכה שקעה בעצב. אבל היה אדם אחד שסירב לתת לטיפשות המלך להפיל אותו: ליצן חצר בשם הבדחן.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">המרד של הבדחן</twig:Typography:H3>
<twig:Typography:P>
    הבדחן התחיל להתגנב לטירה באמצע הלילה ולהשאיר בדיחות בכל מקום: מתחת לכרית המלך, במרק שלו, אפילו בשירותים המלכותיים. המלך היה זועם, אבל הוא לא הצליח לעצור את הבדחן.
</twig:Typography:P>
<twig:Typography:P>
    ואז, יום אחד, תושבי הממלכה גילו שהבדיחות שהבדחן השאיר היו כל כך מצחיקות שהם לא יכלו להתאפק מלצחוק. וברגע שהתחילו לצחוק, הם לא יכלו להפסיק.
</twig:Typography:P>
<twig:Typography:H3 class="mt-8">המרד של העם</twig:Typography:H3>
<twig:Typography:P>
    תושבי הממלכה, שהרגישו מרוממים מהצחוק, התחילו לספר בדיחות ומשחקי מילים שוב, ובקרוב כל הממלכה הייתה חלק מהבדיחה.
</twig:Typography:P>
<div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
        <thead>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <th class="border px-4 py-2 text-start font-bold">אוצר המלך</th>
                <th class="border px-4 py-2 text-start font-bold">אושר העם</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">ריק</td>
                <td class="border px-4 py-2 text-start">גדוש</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">צנוע</td>
                <td class="border px-4 py-2 text-start">מרוצה</td>
            </tr>
            <tr class="m-0 border-t p-0 even:bg-muted">
                <td class="border px-4 py-2 text-start">מלא</td>
                <td class="border px-4 py-2 text-start">אקסטטי</td>
            </tr>
        </tbody>
    </table>
</div>
<twig:Typography:P>
    המלך, כשראה כמה מאושרים נתיניו, הבין את טעותו וביטל את מס הבדיחה. הבדחן הוכרז כגיבור, והממלכה חיה באושר לנצח.
</twig:Typography:P>
<twig:Typography:P>
    המוסר של הסיפור הוא: לעולם אל תזלזל בכוח של צחוק טוב ותמיד היזהר מרעיונות רעים.
</twig:Typography:P>
</div>
```

## API Reference

### `<twig:Typography:Blockquote>`

| Block | Description |
|:------|:------------|
| `content` | The quote content. |
### `<twig:Typography:H1>`

| Block | Description |
|:------|:------------|
| `content` | The heading content. |
### `<twig:Typography:H2>`

| Block | Description |
|:------|:------------|
| `content` | The heading content. |
### `<twig:Typography:H3>`

| Block | Description |
|:------|:------------|
| `content` | The heading content. |
### `<twig:Typography:H4>`

| Block | Description |
|:------|:------------|
| `content` | The heading content. |
### `<twig:Typography:InlineCode>`

| Block | Description |
|:------|:------------|
| `content` | The inline code content. |
### `<twig:Typography:List>`

| Block | Description |
|:------|:------------|
| `content` | The list items (`<li>`). |
### `<twig:Typography:P>`

| Block | Description |
|:------|:------------|
| `content` | The paragraph content. |
</source>

<source url="https://ux.symfony.com/toolkit/kits/shadcn/blocks/login.md">
# Login

# LoginForm

A simple login form centered in a card.

```twig
<div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-sm">
        <twig:LoginForm />
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install login-01 --kit shadcn
```

# LoginForm

A two-column login page with a cover image.

```twig
<div class="grid min-h-svh lg:grid-cols-2">
    <div class="flex flex-col gap-4 p-6 md:p-10">
        <div class="flex justify-center gap-2 md:justify-start">
            <a href="#" class="flex items-center gap-2 font-medium">
                <div class="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2h18"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="M3 16h18"/></svg>
                </div>
                Acme Inc.
            </a>
        </div>
        <div class="flex flex-1 items-center justify-center">
            <div class="w-full max-w-xs">
                <twig:LoginForm />
            </div>
        </div>
    </div>
    <div class="relative hidden bg-muted lg:block">
        <img
            src="https://ui.shadcn.com/placeholder.svg"
            alt="Image"
            class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
        />
    </div>
</div>
```

## Installation

```shell
php bin/console ux:install login-02 --kit shadcn
```


</source>

<source url="https://ux.symfony.com/index.md">
# Symfony UX

> Symfony UX is a collection of PHP and JavaScript packages to add rich UI experiences to Symfony applications. This site provides demos, installation guides, and a cookbook. For full documentation, see the official Symfony docs.

## Packages

- [Autocomplete](https://ux.symfony.com/autocomplete.md): Ajax-powered Form Select
- [CalendarLink](https://ux.symfony.com/calendar-link.md): Save the date, anywhere
- [Chart.js](https://ux.symfony.com/chartjs.md): Interactive charts with Chart.js
- [Icons](https://ux.symfony.com/icons.md): SVG icons made easy
- [Image Cropper](https://ux.symfony.com/cropperjs.md): Form Tools for cropping images
- [Live Components](https://ux.symfony.com/live-component.md): Interactive UI in PHP & Twig
- [Map](https://ux.symfony.com/map.md): Interactive Maps
- [Native](https://ux.symfony.com/native.md): Hotwire Native for Symfony
- [Notify](https://ux.symfony.com/notify.md): Native Browser Notifications
- [React](https://ux.symfony.com/react.md): Render React components from Twig
- [Stimulus](https://ux.symfony.com/stimulus.md): Central Bridge of Symfony UX
- [Stylized Dropzone](https://ux.symfony.com/dropzone.md): Upload Files with Style
- [Toolkit](https://ux.symfony.com/toolkit.md): Build your Design System.
- [Translator](https://ux.symfony.com/translator.md): Symfony Translations in JavaScript
- [Turbo](https://ux.symfony.com/turbo.md): Single-page Symfony app
- [Twig Components](https://ux.symfony.com/twig-component.md): Render Reusable UI Elements
- [Vue.js](https://ux.symfony.com/vue.md): Render Vue components from Twig

## Demos

- [Live Component Demos](https://ux.symfony.com/demos.md): Interactive demos showcasing Symfony UX Live Components

## Cookbook

- [Component Architecture](https://ux.symfony.com/cookbook/component-architecture.md): Rules and patterns for working with components

## Changelog

- [Changelog](https://ux.symfony.com/changelog.md): Recent releases and changes

## Toolkit

- [accordion (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/accordion.md): Build vertically collapsing sections powered by Bootstrap's Collapse plugin.
- [alert (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/alert.md): Provides contextual feedback messages for typical user actions.
- [badge (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/badge.md): A small count or label used to highlight status, counts, or short contextual information.
- [breadcrumb (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/breadcrumb.md): Indicates the current page's location within a navigational hierarchy.
- [button-group (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/button-group.md): Groups a series of buttons on a single line or in a vertical column.
- [button (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/button.md): Use Bootstrap button styles for actions in forms, dialogs, navigation, and more.
- [card (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/card.md): Build flexible content containers with optional headers, footers, images, and contextual styles.
- [carousel (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/carousel.md): Cycle through images, text, and other content with optional controls and indicators.
- [close-button (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/close-button.md): Provide an accessible control for dismissing content such as modals and alerts.
- [collapse (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/collapse.md): Toggle the visibility of content with Bootstrap's Collapse plugin.
- [dropdown (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/dropdown.md): Display contextual menus from buttons and links in any Bootstrap direction.
- [figure (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/figure.md): Display related visual content with an optional caption and responsive alignment.
- [list-group (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/list-group.md): Display a flexible series of content with active, disabled, actionable, and contextual states.
- [modal (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/modal.md): Add accessible dialog overlays for notifications, forms, and custom content.
- [navbar (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/navbar.md): A powerful, responsive navigation header with support for branding, navigation, forms, and collapsing content.
- [navs-tabs (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/navs-tabs.md): Build navigation components and accessible dynamic tabbed interfaces with Bootstrap.
- [offcanvas (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/offcanvas.md): Build responsive sliding panels for navigation, forms, and supplementary content.
- [pagination (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/pagination.md): Indicate that related content is split across multiple pages with accessible pagination links.
- [placeholder (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/placeholder.md): Uses loading placeholders to indicate that content may still be loading.
- [popover (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/popover.md): Display contextual Bootstrap content beside a trigger element.
- [progress (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/progress.md): Display task progress with accessible labels, stacked bars, contextual colors, and animation.
- [scrollspy (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/scrollspy.md): Update Bootstrap navigation links as a scrollable region moves between sections.
- [spinner (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/spinner.md): Indicate the loading state of a component or page with Bootstrap spinners.
- [toast (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/toast.md): Show lightweight Bootstrap notifications with optional headers and dismissal controls.
- [tooltip (Bootstrap)](https://ux.symfony.com/toolkit/kits/bootstrap/components/tooltip.md): Add Bootstrap tooltips to focusable controls with configurable content and placement.
- [clipboard (Common)](https://ux.symfony.com/toolkit/kits/common/components/clipboard.md): A Stimulus behavior that copies text to the clipboard — either a value you give it or the content of an element — with optional copied feedback.
- [closeable (Common)](https://ux.symfony.com/toolkit/kits/common/components/closeable.md): A Stimulus behavior that removes its element from the page when dismissed, with optional delayed and automatic closing and an animated countdown bar.
- [logout-link (Common)](https://ux.symfony.com/toolkit/kits/common/components/logout-link.md): A link that logs the current user out through a secure POST form.
- [post-link (Common)](https://ux.symfony.com/toolkit/kits/common/components/post-link.md): A link submitted as a form, with optional HTTP method spoofing, CSRF protection, and a confirmation prompt.
- [tooltip (Common)](https://ux.symfony.com/toolkit/kits/common/components/tooltip.md): A Stimulus behavior that shows a tooltip from a `content` value — or straight from an element's native `title`. Powered by [Floating UI](https://floating-ui.com/): the tooltip is rendered outside the trigger (appended to `<body>`), so it's never clipped by an `overflow` ancestor, and it flips and shifts to stay in view. Put it right on the trigger — it opens on hover and keyboard focus by default — and style the injected `.tooltip` once, globally.
- [alert (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/alert.md): The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
- [avatar (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/avatar.md): Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
- [badge (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/badge.md): The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
- [button-group (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/button-group.md): The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.
- [button (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/button.md): Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
- [card (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/card.md): Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
- [checkbox (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/checkbox.md): The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.
- [dropdown (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/dropdown.md): The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.
- [indicator (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/indicator.md): Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
- [input (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/input.md): The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.
- [kbd (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/kbd.md): The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.
- [label (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/label.md): A text element that identifies form controls and other content.
- [modal (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/modal.md): Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles
- [pagination (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/pagination.md): Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
- [radio (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/radio.md): The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
- [select (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/select.md): Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
- [skeleton (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/skeleton.md): Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.
- [spinner (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/spinner.md): An indicator that can be used to show a loading state.
- [table (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/table.md): Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
- [tabs (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/tabs.md): Use the following default tabs component example to show a list of links that the user can navigate from on your website.
- [textarea (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/textarea.md): The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.
- [toggle (Flowbite v4)](https://ux.symfony.com/toolkit/kits/flowbite-4/components/toggle.md): Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
- [accordion (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [alert-dialog (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [alert (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/alert.md): Displays a callout for user attention.
- [aspect-ratio (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/aspect-ratio.md): Displays content within a desired ratio.
- [avatar (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/avatar.md): An image element with a fallback for representing the user.
- [badge (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/badge.md): Displays a badge or a component that looks like a badge.
- [breadcrumb (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [button-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/button-group.md): A container that groups related buttons together with consistent styling.
- [button (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/button.md): Displays a button or a component that looks like a button.
- [card (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/card.md): Displays a card with header, content, and footer.
- [checkbox (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [collapsible (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/collapsible.md): An interactive component which expands/collapses a panel.
- [combobox (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [dialog (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [empty (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/empty.md): Use the Empty component to display an empty state.
- [field (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [hover-card (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/hover-card.md): For sighted users to preview content available behind a link.
- [input-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [input (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [item (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/item.md): A versatile component for displaying content with media, title, description, and actions.
- [kbd (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/kbd.md): Used to display textual user input from keyboard.
- [label (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/label.md): Renders an accessible label associated with controls.
- [pagination (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/pagination.md): Pagination with page navigation, next and previous links.
- [progress (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [radio-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [resizable (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [select (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/select.md): A dropdown control that allows users to choose from a list of options.
- [separator (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/separator.md): Visually or semantically separates content.
- [skeleton (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/skeleton.md): Use to show a placeholder while content is loading.
- [sonner (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/sonner.md): A Sonner-style stacked toast notification system with auto-dismiss, swipe-to-dismiss, rich colors, and JS or server-render support.
- [spinner (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/spinner.md): An indicator that can be used to show a loading state.
- [switch (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [table (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/table.md): A responsive table component.
- [tabs (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [textarea (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [toggle-group (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [toggle (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/toggle.md): A two-state button that can be either on or off.
- [tooltip (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [typography (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/typography.md): Styled HTML text elements for headings, paragraphs, quotes, lists and inline code.

## Optional

- [Official Symfony UX Documentation](https://symfony.com/bundles/ux): Full reference documentation for all Symfony UX packages
- [Symfony UX GitHub Repository](https://github.com/symfony/ux): Source code and issue tracker

</source>