UXor

Components (56)

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

  7 live examples

• autocomplete

  Searchable selects with Symfony UX Autocomplete (Tom Select), styled with the kit's theme: one choice, several choices, values the user types, and options searched on the server.

  1 live example

• 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

  8 live examples

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

  6 live examples

• breadcrumb

  A trail of links showing where the current page sits in the site hierarchy.

  1 live example

• button

  Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

  7 live examples

• button-group

  The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

  3 live examples

• calendar

  Pick a date, several dates or a range, inline in the page: keyboard navigation, disabled dates and bounds, several months, locales and right-to-left, and hidden inputs a form or a Live Component reads.

  5 live examples

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

  4 live examples

• chart

  Charts drawn with Symfony UX Chart.js in the theme's colors, light and dark, each with its data as a table.

  5 live examples

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

  3 live examples

• data-table

  A server-driven table: search, filters, sortable columns, a page size and pages, in a Turbo Frame that keeps Back and Forward working.

  1 live example

• data-table-live

  The data-table recipe as a Live Component: search while typing, filters, sortable columns, pages and row selection, without page reloads.

  1 live example

• date-picker

  A field that opens a Calendar in a Popover: pick a date (or a range) with the mouse or the keyboard, or type it. The picked date goes into the calendar's hidden input, which forms and Live Components read.

  4 live examples

• drawer

  A panel sliding over one side of the page, for navigation, filters or details, as a native <dialog>.

  1 live example

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

  8 live examples

• dropzone

  File uploads with Symfony UX Dropzone, styled with the kit's theme: drag and drop or browse, a preview of the picked image, several files that add up across picks.

  6 live examples

• editor

  A rich text editor (Tiptap) that stores restricted HTML: paragraphs, bold, italic, strike, inline code, headings, lists, quotes, links and horizontal lines, with a keyboard-friendly toolbar. The server sanitizes the same set, so what the toolbar makes is all a field ever stores.

  4 live examples

• empty-state

  What a list or page shows when it has nothing yet, with a way forward.

  1 live example

• floating

  The positioning that dropdown, popover (and so date-picker) and tooltip share: one JavaScript module placing a floating element next to the element it belongs to, flipping it and keeping it in the viewport.

  No live examples

• form-field

  A labelled form control with its help text and error message, wired by id (used by the form theme).

  1 live example

• form-theme

  A Symfony form theme that renders every row through FormField and every control through the kit's Input, Select, Textarea, Checkbox, Radio, Label and Button components.

  No live examples

• 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

  2 live examples

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

  5 live examples

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

  2 live examples

• label

  A text element that identifies form controls and other content.

  1 live example

• layouts

  Page layouts to extend: an app shell with sidebar, navbar with its menu, and mobile nav, a centered column for login, signup and password reset, settings, errors and a blank page.

  No live examples

• markdown-editor

  A Markdown field: a native textarea with a small toolbar and a Preview tab rendered by the server, exactly as the stored Markdown will be printed. CommonMark with strikethrough; raw HTML, images and unsafe links never reach the page.

  4 live examples

• mobile-nav

  The app's navigation on small screens: a menu button in the navbar opening a modal drawer that holds the side nav, closed by a link, Escape, the backdrop and every Turbo visit.

  1 live example

• modal

  Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

  4 live examples

• nav-menu

  The navbar's menu: links and buttons opening submenus of links, nested at any depth, as a disclosure navigation; the current page and its submenus are marked, and the same menu opens in place in a mobile nav's drawer.

  2 live examples

• navbar

  The bar on top of the app: brand, navigation menu, search, actions, and the menu button opening the sidebar or a mobile nav on small screens.

  1 live example

• navigation

  What the kit's navigation controllers share, in one JavaScript module: marking the current page's link, telling whether a click on a link navigates this tab, and closing a navigation opened over the page once the screen grows.

  No live examples

• oauth

  An opinionated OAuth2/OIDC sign-in journey using Symfony Security, with Google, Facebook and GitHub adapters, single-use attempts and explicit account connections.

  No live examples

• oauth-provider-button

  A provider sign-in link that starts the application's OAuth flow with a full browser navigation.

  1 live example

• page-header

  The top of a page: its title, a short description and the page's actions.

  1 live example

• pagination

  Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes

  2 live examples

• popover

  Free content anchored to a button: text, links or a small form, in a non-modal dialog that opens on click and closes on Escape, a click outside or when the focus leaves it.

  3 live examples

• progress

  A bar showing how far a task has come.

  1 live example

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

  3 live examples

• section-nav

  Vertical tabs that navigate: one link per page of a group of pages (settings, an account, a project), the current one marked, a column on large screens and a strip that scrolls sideways on small ones.

  2 live examples

• 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

  3 live examples

• side-nav

  A multi-level navigation tree: links grouped in branches that open and close, at any depth, with the keyboard of a tree view; the open branches hold across Turbo visits, and the branch of the current page opens.

  1 live example

• sidebar

  The app's main navigation: grouped links with icons and counts, collapsible to icons, opened over the page on small screens.

  1 live example

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

  2 live examples

• spinner

  An indicator that can be used to show a loading state.

  7 live examples

• stat-card

  A key figure with its label and, optionally, how it changed over a period.

  1 live example

• 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

  3 live examples

• tabs

  Use the following default tabs component example to show a list of links that the user can navigate from on your website.

  5 live examples

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

  4 live examples

• theme

  The Flowbite color roles (light and dark) with this kit's contrast fixes and its roles for text on a solid fill, as one stylesheet for assets/styles/app.css.

  No live examples

• theme-toggle

  A button switching between the light and dark themes, remembered in localStorage and following the system preference until the user chooses.

  1 live example

• toast

  Short-lived notifications in a fixed region, added on page load or by Turbo Streams, dismissed after a timeout or by the user.

  1 live example

• 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

  2 live examples

• tooltip

  A short text shown while a control is hovered or focused, also announced as its description.

  1 live example

• turbo

  What the kit's controllers ask about Turbo's copies of a page, answered in one JavaScript module: whether a turbo:before-cache leaves the page on screen, whether an element is permanent, and whether a controller connects in a cached copy.

  No live examples

Blocks (8)

• connected-accounts

  An account settings card with connection forms, identity summaries and explicit unavailable-action feedback.

  2 live examples

• dashboard-home

  A dashboard home: page header, key figures, two cards and a table of recent orders.

  1 live example

• forgot-password

  A card asking for an email address to send a password reset link, then confirming it was sent.

  1 live example

• login

  A sign-in card rendering a Symfony login form through the form theme, with the last authentication error.

  1 live example

• not-found

  The content of a 404 (or any error) page: status, title, explanation and a way back.

  1 live example

• settings-profile

  A profile settings card: avatar, name and a Symfony form rendered through the form theme.

  1 live example

• signup

  A registration card rendering a Symfony form through the form theme.

  1 live example

• social-login

  A provider login or registration card with authentication feedback and optional password-form content.

  3 live examples