# 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.
- [drawer (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/drawer.md): A panel that slides in from the edge of the screen to display supplementary content.
- [dropdown-menu (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/dropdown-menu.md): A menu triggered by a button, providing a list of actions or links.
- [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.
- [form (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/form.md): A set of layout wrappers to build accessible forms with label, description and error-message slots.
- [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-otp (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/input-otp.md): A group of single-character inputs for one-time passwords and verification codes.
- [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.
- [menubar (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/menubar.md): A horizontal menu bar with dropdown menus, similar to desktop application menus.
- [native-select (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/native-select.md): A styled native HTML select element with consistent design system integration.
- [navigation-menu (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/navigation-menu.md): A collection of navigation links with optional hover-triggered submenus.
- [pagination (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/pagination.md): Pagination with page navigation, next and previous links.
- [popover (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/popover.md): A click-triggered popup that displays rich content, anchored to its trigger.
- [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.
- [scroll-area (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/scroll-area.md): Augments the native scroll functionality for custom, cross-browser styling.
- [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.
- [sheet (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [sidebar (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/sidebar.md): A collapsible sidebar layout with a header, body and footer.
- [skeleton (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/skeleton.md): Use to show a placeholder while content is loading.
- [slider (Shadcn UI)](https://ux.symfony.com/toolkit/kits/shadcn/components/slider.md): An input where the user selects a value from within a given range.
- [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.

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