Fluxui Docs Pro

fluxui-docs (Pro)

Flux is the official Livewire component library built with Tailwind CSS. Provides fully flexible, functional, and accessible UI components for Livewire applications. This skill includes all components (free and Pro).

How to use this skill

1. Find the relevant component or doc from the lists below
2. Read the reference file for full documentation, props, and code examples
3. Use the code examples to help the user implement the component

Component reference frontmatter

Each component reference file may include YAML frontmatter with:

• components_used: List of other Flux components used in the examples

Use components_used to find related components and real-world usage patterns.

Components

• Button: A powerful and composable button component for your application.
• Accordion: Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.
• Autocomplete: Enhance an input field with autocomplete suggestions.
• Avatar: Display an image or initials as an avatar.
• Badge: Highlight information like status, category, or count.
• Brand: Display your company or application's logo and name in a clean, consistent way across your interf...
• Breadcrumbs: Help users navigate and understand their place within your application.
• Calendar: A flexible calendar component for date selection. Supports single dates, multiple dates, and date...
• Callout: Highlight important information or guide users toward key actions.
• Card: A container for related content, such as a form, alert, or data list.
• Carousel: A horizontally scrolling row of slides with snap and edge-aware controls.
• Chart: Flux's Chart component is a lightweight, zero-dependency tool for building charts in your Livewir...
• Checkbox: Select one or multiple options from a set.
• Color picker: Let users pick a color from a swatch palette, drag a saturation/value canvas, or paste a hex valu...
• Command palette: A searchable list of commands.
• Context menu: Dropdown menus that open when right clicking a designated area.
• Composer: A configurable message input with support for action buttons and rich text. Ideal for chat interf...
• Date picker: Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or...
• Dropdown: A composable dropdown component that can handle both simple navigation menus as well as complex a...
• Rich text editor: A basic rich text editor for your application. Built using ProseMirror...
• Field: Encapsulate input elements with labels, descriptions, and validation.
• File upload: A flexible file upload component with built-in drag-and-drop support, file previews, and Livewire...
• Flag: Display a flag using its two-letter Unicode region code.
• Heading: A consistent heading component for your application.
• Icon: Flux uses the excellent Heroicons project for its icon collection. Heroicons is a set of beautifu...
• Input: Capture user data with various forms of text input.
• Kanban: A collection of cards arranged in columns, representing different stages of a workflow.
• Modal: Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
• Navbar: Arrange navigation links vertically or horizontally.
• OTP Input: Capture one-time passwords with a series of individual input fields.
• Pagination: Display a series of buttons to navigate through a list of items.
• Pillbox: A multi-select component that displays selected items as removable "pills" that expand the input...
• Popover: Show extra content in a popup on click or hover.
• Profile: Display a user's profile with an avatar and optional name in a compact, interactive component.
• Progress: A simple progress bar to indicate completion or loading status.
• Radio: Select one option from a set of mutually exclusive choices. Perfect for single-choice questions a...
• Select: Choose a single option from a dropdown list.
• Separator: Visually divide sections of content or groups of items.
• Skeleton: Create placeholder content while loading data.
• Slider: Select a value using a horizontal slider control.
• Switch: Toggle a setting on or off. Suitable for binary options like enabling or disabling features.
• Table: Display structured data in a condensed, searchable format.
• Tabs: Organize content into separate panels within a single container. Easily switch between sections w...
• Text: Consistent typographical components like text and link.
• Textarea: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
• Time picker: Allow users to select specific times for scheduling events or setting appointments. Perfect for t...
• Timeline: Display a series of events or steps in a vertical or horizontal timeline.
• Toast: A message that provides feedback to users about an action or event, often temporary and dismissible.
• Toggle: Turn a setting on or off using a compact, button-shaped control.
• Tooltip: Provide additional information when users hover over or focus on an element.

Docs

• Installation
• Upgrade guide
• Principles
• Patterns
• Theming
• Dark mode
• Customization
• Help

Layouts

• Header
• Sidebar