fluxui-development

name	fluxui-development
description	Use this skill for Flux UI development in Livewire applications only. Trigger when working with <flux:*> components, building or customizing Livewire component UIs, creating forms, modals, tables, or other interactive elements. Covers: flux: components (buttons, inputs, modals, forms, tables, date-pickers, kanban, badges, tooltips, etc.), component composition, Tailwind CSS styling, Heroicons/Lucide icon integration, validation patterns, responsive design, and theming. Do not use for non-Livewire frameworks or non-component styling.
license	MIT
metadata	{"author":"laravel"}

Flux UI Development

Documentation

Use search-docs for detailed Flux UI patterns and documentation.

Basic Usage

This project uses the Pro version of Flux UI, which includes all free and Pro components and variants.

Flux UI is a component library for Livewire built with Tailwind CSS. It provides components that are easy to use and customize.

Use Flux UI components when available. Fall back to standard Blade components when no Flux component exists for your needs.

<flux:button variant="primary">Click me</flux:button>

Available Components (Pro Edition)

Available: accordion, autocomplete, avatar, badge, brand, breadcrumbs, button, calendar, callout, card, chart, checkbox, command, composer, context, date-picker, dropdown, editor, field, file-upload, heading, icon, input, kanban, modal, navbar, otp-input, pagination, pillbox, popover, profile, radio, select, separator, skeleton, slider, switch, table, tabs, text, textarea, time-picker, toast, tooltip

Icons

Flux includes Heroicons as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.

<flux:button icon="arrow-down-tray">Export</flux:button>

For icons not available in Heroicons, use Lucide. Import the icons you need with the Artisan command:

php artisan flux:icon crown grip-vertical github

Common Patterns

Form Fields

<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>

Tables

<flux:table>
    <flux:table.columns>
        <flux:table.cell>Column Name</flux:table.cell>
    </flux:table.columns>
    <flux:table.row>
        <flux:table.cell>Value</flux:table.cell>
    </flux:table.row>
</flux:table>

Verification

1. Check component renders correctly
2. Test interactive states
3. Verify mobile responsiveness

Common Pitfalls

• Not checking if a Flux component exists before creating custom implementations
• Forgetting to use the search-docs tool for component-specific documentation
• Not following existing project patterns for Flux usage