playbooks

home / skills / tompec / fluxui-docs-skill / fluxui-docs-pro

fluxui-docs-pro skill

/skills/fluxui-docs-pro

This skill helps you implement Flux UI Livewire components with Tailwind CSS across pages, cards, forms, and layouts.

npx playbooks add skill tompec/fluxui-docs-skill --skill fluxui-docs-pro

Review the files below or copy the command above to add this skill to your agents.

Files (55)
SKILL.md
6.9 KB
---
name: fluxui-docs-pro
description: 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). Use
  when building UI with fluxui docs components.
---

# 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](references/components/button.md)**: A powerful and composable button component for your application.
- **[Accordion](references/components/accordion.md)**: Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.
- **[Autocomplete](references/components/autocomplete.md)**: Enhance an input field with autocomplete suggestions.
- **[Avatar](references/components/avatar.md)**: Display an image or initials as an avatar.
- **[Badge](references/components/badge.md)**: Highlight information like status, category, or count.
- **[Brand](references/components/brand.md)**: Display your company or application's logo and name in a clean, consistent way across your interf...
- **[Breadcrumbs](references/components/breadcrumbs.md)**: Help users navigate and understand their place within your application.
- **[Calendar](references/components/calendar.md)**: A flexible calendar component for date selection. Supports single dates, multiple dates, and date...
- **[Callout](references/components/callout.md)**: Highlight important information or guide users toward key actions.
- **[Card](references/components/card.md)**: A container for related content, such as a form, alert, or data list.
- **[Chart](references/components/chart.md)**: Flux's Chart component is a lightweight, zero-dependency tool for building charts in your Livewir...
- **[Checkbox](references/components/checkbox.md)**: Select one or multiple options from a set.
- **[Command palette](references/components/command.md)**: A searchable list of commands.
- **[Context menu](references/components/context.md)**: Dropdown menus that open when right clicking a designated area.
- **[Composer](references/components/composer.md)**: A configurable message input with support for action buttons and rich text. Ideal for chat interf...
- **[Date picker](references/components/date-picker.md)**: Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or...
- **[Dropdown](references/components/dropdown.md)**: A composable dropdown component that can handle both simple navigation menus as well as complex a...
- **[Rich text editor](references/components/editor.md)**: A basic rich text editor for your application. Built using [ProseMirror](https://prosemirror.net)...
- **[Field](references/components/field.md)**: Encapsulate input elements with labels, descriptions, and validation.
- **[File upload](references/components/file-upload.md)**: A flexible file upload component with built-in drag-and-drop support, file previews, and Livewire...
- **[Heading](references/components/heading.md)**: A consistent heading component for your application.
- **[Icon](references/components/icon.md)**: Flux uses the excellent Heroicons project for its icon collection. Heroicons is a set of beautifu...
- **[Input](references/components/input.md)**: Capture user data with various forms of text input.
- **[Kanban](references/components/kanban.md)**: A collection of cards arranged in columns, representing different stages of a workflow.
- **[Modal](references/components/modal.md)**: Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
- **[Navbar](references/components/navbar.md)**: Arrange navigation links vertically or horizontally.
- **[OTP Input](references/components/otp-input.md)**: Capture one-time passwords with a series of individual input fields.
- **[Pagination](references/components/pagination.md)**: Display a series of buttons to navigate through a list of items.
- **[Pillbox](references/components/pillbox.md)**: A multi-select component that displays selected items as removable "pills" that expand the input...
- **[Popover](references/components/popover.md)**: Show extra content in a popup on click or hover.
- **[Profile](references/components/profile.md)**: Display a user's profile with an avatar and optional name in a compact, interactive component.
- **[Radio](references/components/radio.md)**: Select one option from a set of mutually exclusive choices. Perfect for single-choice questions a...
- **[Select](references/components/select.md)**: Choose a single option from a dropdown list.
- **[Separator](references/components/separator.md)**: Visually divide sections of content or groups of items.
- **[Skeleton](references/components/skeleton.md)**: Create placeholder content while loading data.
- **[Slider](references/components/slider.md)**: Select a value using a horizontal slider control.
- **[Switch](references/components/switch.md)**: Toggle a setting on or off. Suitable for binary options like enabling or disabling features.
- **[Table](references/components/table.md)**: Display structured data in a condensed, searchable format.
- **[Tabs](references/components/tabs.md)**: Organize content into separate panels within a single container. Easily switch between sections w...
- **[Text](references/components/text.md)**: Consistent typographical components like text and link.
- **[Textarea](references/components/textarea.md)**: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
- **[Time picker](references/components/time-picker.md)**: Allow users to select specific times for scheduling events or setting appointments. Perfect for t...
- **[Toast](references/components/toast.md)**: A message that provides feedback to users about an action or event, often temporary and dismissible.
- **[Tooltip](references/components/tooltip.md)**: Provide additional information when users hover over or focus on an element.

## Docs

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

## Layouts

- [Header](references/layouts/header.md)
- [Sidebar](references/layouts/sidebar.md)

Overview

This skill provides comprehensive documentation and usage references for Flux, the Livewire component library built with Tailwind CSS. It includes both free and Pro components, detailed docs for installation, theming, and patterns, and ready-to-use code examples to speed UI development. Use it to find component APIs, props, and integration notes for building accessible Livewire interfaces.

How this skill works

Search or browse the component list to find a reference file for the UI piece you need. Each component reference includes usage examples, props, and optional YAML frontmatter that lists related components used in examples. Follow the examples and prop descriptions to copy code into your Livewire project and adapt styles or behavior as needed.

When to use it

  • Building or prototyping Livewire UIs with Tailwind CSS
  • Needing accessible, composable UI primitives like modals, dropdowns, and forms
  • Looking for production-ready components with examples and prop details
  • Integrating Pro-only functionality alongside free components
  • Customizing themes, dark mode, or component behavior in a Livewire app

Best practices

  • Read the component reference and examples before copying code to understand required props and expected Livewire hooks
  • Use the components_used frontmatter to discover related components and realistic composition patterns
  • Keep styles consistent by following the theming and dark mode docs for global tokens and Tailwind config
  • Prefer composable components (Button, Field, Card) to build complex UI without reinventing behavior
  • Test components with keyboard navigation and screen readers to ensure accessibility

Example use cases

  • Create a settings panel using Tabs, Switch, and Field components for toggleable options
  • Build a file upload form with File Upload, Progress, and Toast for feedback
  • Implement a scheduling UI with Date Picker, Time Picker, and Calendar components
  • Add searchable actions via Command Palette and Autocomplete for power-user workflows
  • Compose a dashboard with Card, Chart, Table, and Pagination components for admin interfaces

FAQ

Does this include Pro components or only free ones?

This documentation set includes both free and Pro components so you can reference the full component library.

Where can I find related components used in examples?

Check the YAML frontmatter field components_used in each reference file to discover related components and usage patterns.