# Flux UI

World-class components, built specifically for your Livewire interfaces. Fully flexible, functional, and accessible.

## Guides

- [Installation](https://fluxui.dev/docs/installation.md)
- [Upgrade guide](https://fluxui.dev/docs/upgrading.md)
- [Principles](https://fluxui.dev/docs/principles.md)
- [Patterns](https://fluxui.dev/docs/patterns.md)
- [Theming](https://fluxui.dev/docs/theming.md)
- [Dark mode](https://fluxui.dev/docs/dark-mode.md)
- [Customization](https://fluxui.dev/docs/customization.md)
- [Help](https://fluxui.dev/docs/help.md)

## Layouts

- [Header](https://fluxui.dev/layouts/header.md)
- [Sidebar](https://fluxui.dev/layouts/sidebar.md)

## Components

- [Accordion](https://fluxui.dev/components/accordion.md) - Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.
- [Autocomplete](https://fluxui.dev/components/autocomplete.md) - Enhance an input field with autocomplete suggestions.
- [Avatar](https://fluxui.dev/components/avatar.md) - Display an image or initials as an avatar.
- [Badge](https://fluxui.dev/components/badge.md) - Highlight information like status, category, or count.
- [Brand](https://fluxui.dev/components/brand.md) - Display your company or application's logo and name in a clean, consistent way across your interface.
- [Button](https://fluxui.dev/components/button.md) - A powerful and composable button component for your application.
- [Breadcrumbs](https://fluxui.dev/components/breadcrumbs.md) - Help users navigate and understand their place within your application.
- [Calendar](https://fluxui.dev/components/calendar.md) - A flexible calendar component for date selection. Supports single dates, multiple dates, and date ranges. Perfect for scheduling and booking systems.
- [Callout](https://fluxui.dev/components/callout.md) - Highlight important information or guide users toward key actions.
- [Card](https://fluxui.dev/components/card.md) - A container for related content, such as a form, alert, or data list.
- [Carousel](https://fluxui.dev/components/carousel.md) - A horizontally scrolling row of slides with snap and edge-aware controls.
- [Chart](https://fluxui.dev/components/chart.md) - Flux's Chart component is a lightweight, zero-dependency tool for building charts in your Livewire applications. It is designed to be simple but extremely flexible, so that you can assemble and style your charts exactly as you need them.
- [Checkbox](https://fluxui.dev/components/checkbox.md) - Select one or multiple options from a set.
- [Color picker](https://fluxui.dev/components/color-picker.md) - Let users pick a color from a swatch palette, drag a saturation/value canvas, or paste a hex value. Perfect for theme settings, brand-color pickers, and any place users need to choose a color.
- [Command palette](https://fluxui.dev/components/command.md) - A searchable list of commands.
- [Context menu](https://fluxui.dev/components/context.md) - Dropdown menus that open when right clicking a designated area.
- [Composer](https://fluxui.dev/components/composer.md) - A configurable message input with support for action buttons and rich text. Ideal for chat interfaces and AI prompts.
- [Date picker](https://fluxui.dev/components/date-picker.md) - Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or scheduling events.
- [Dropdown](https://fluxui.dev/components/dropdown.md) - A composable dropdown component that can handle both simple navigation menus as well as complex action menus with checkboxes, radios, and submenus.
- [Rich text editor](https://fluxui.dev/components/editor.md) - A basic rich text editor for your application. Built using ProseMirror and Tiptap.
- [Field](https://fluxui.dev/components/field.md) - Encapsulate input elements with labels, descriptions, and validation.
- [File upload](https://fluxui.dev/components/file-upload.md) - A flexible file upload component with built-in drag-and-drop support, file previews, and Livewire integration for handling file uploads in your application.
- [Flag](https://fluxui.dev/components/flag.md) - Display a country or territory flag using its two-letter country code.
- [Heading](https://fluxui.dev/components/heading.md) - A consistent heading component for your application.
- [Icon](https://fluxui.dev/components/icon.md) - Flux uses the excellent Heroicons project for its icon collection. Heroicons is a set of beautiful and functional icons crafted by the fine folks at Tailwind Labs
- [Input](https://fluxui.dev/components/input.md) - Capture user data with various forms of text input.
- [Kanban](https://fluxui.dev/components/kanban.md) - A collection of cards arranged in columns, representing different stages of a workflow.
- [Modal](https://fluxui.dev/components/modal.md) - Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
- [Navbar](https://fluxui.dev/components/navbar.md) - Arrange navigation links vertically or horizontally.
- [OTP Input](https://fluxui.dev/components/otp-input.md) - Capture one-time passwords with a series of individual input fields.
- [Pagination](https://fluxui.dev/components/pagination.md) - Display a series of buttons to navigate through a list of items.
- [Pillbox](https://fluxui.dev/components/pillbox.md) - A multi-select component that displays selected items as removable "pills" that expand the input area as needed.
- [Popover](https://fluxui.dev/components/popover.md) - Show extra content in a popup on click or hover.
- [Profile](https://fluxui.dev/components/profile.md) - Display a user's profile with an avatar and optional name in a compact, interactive component.
- [Progress](https://fluxui.dev/components/progress.md) - A simple progress bar to indicate completion or loading status.
- [Radio](https://fluxui.dev/components/radio.md) - Select one option from a set of mutually exclusive choices. Perfect for single-choice questions and settings.
- [Select](https://fluxui.dev/components/select.md) - Choose a single option from a dropdown list.
- [Separator](https://fluxui.dev/components/separator.md) - Visually divide sections of content or groups of items.
- [Skeleton](https://fluxui.dev/components/skeleton.md) - Create placeholder content while loading data.
- [Slider](https://fluxui.dev/components/slider.md) - Select a value using a horizontal slider control.
- [Switch](https://fluxui.dev/components/switch.md) - Toggle a setting on or off. Suitable for binary options like enabling or disabling features.
- [Table](https://fluxui.dev/components/table.md) - Display structured data in a condensed, searchable format.
- [Tabs](https://fluxui.dev/components/tabs.md) - Organize content into separate panels within a single container. Easily switch between sections without leaving the page.
- [Text](https://fluxui.dev/components/text.md) - Consistent typographical components like text and link.
- [Textarea](https://fluxui.dev/components/textarea.md) - Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
- [Timeline](https://fluxui.dev/components/timeline.md) - Display a series of events or steps in a vertical or horizontal timeline.
- [Time picker](https://fluxui.dev/components/time-picker.md) - Allow users to select specific times for scheduling events or setting appointments. Perfect for time-based filtering and precise scheduling.
- [Toast](https://fluxui.dev/components/toast.md) - A message that provides feedback to users about an action or event, often temporary and dismissible.
- [Toggle](https://fluxui.dev/components/toggle.md) - Turn a setting on or off using a compact, button-shaped control.
- [Tooltip](https://fluxui.dev/components/tooltip.md) - Provide additional information when users hover over or focus on an element.

## Demos

- [Analytics](https://fluxui.dev/demo/analytics.md)
- [Auth](https://fluxui.dev/demo/auth.md)
- [Settings](https://fluxui.dev/demo/settings.md)
- [Kanban](https://fluxui.dev/demo/kanban.md)
- [Table](https://fluxui.dev/demo/table.md)
- [Qa](https://fluxui.dev/demo/qa.md)

## Blog

- [Blog](https://fluxui.dev/blog.md) - Succinct and informative updates about Flux.