fluxui-docs

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 only the free components.

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.
• 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.
• Callout: Highlight important information or guide users toward key actions.
• Card: A container for related content, such as a form, alert, or data list.
• Checkbox: Select one or multiple options from a set.
• Dropdown: A composable dropdown component that can handle both simple navigation menus as well as complex a…
• Field: Encapsulate input elements with labels, descriptions, and validation.
• 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.
• 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.
• Profile: Display a user’s profile with an avatar and optional name in a compact, interactive component.
• 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.
• 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.
• Text: Consistent typographical components like text and link.
• Textarea: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
• 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