# 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

- [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.
- [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