// Flux UI component library for Livewire. Use when building UIs with Flux components like buttons, inputs, modals, tables, forms, navigation, or any Livewire interface using the flux: Blade component prefix. Triggers include "Flux component", "flux:button", "flux:input", "Livewire UI components", or building admin/dashboard interfaces.
| name | flux-ui |
| description | Flux UI component library for Livewire. Use when building UIs with Flux components like buttons, inputs, modals, tables, forms, navigation, or any Livewire interface using the flux: Blade component prefix. Triggers include "Flux component", "flux:button", "flux:input", "Livewire UI components", or building admin/dashboard interfaces. |
Hand-crafted UI component library for Livewire applications, built with Tailwind CSS.
// Layout file
<head>
@fluxAppearance
</head>
<body>
@fluxScripts
</body>
/* resources/css/app.css */
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@custom-variant dark (&:where(.dark, .dark *));
<flux:button>Default</flux:button>
<flux:button variant="primary">Primary</flux:button>
<flux:button variant="filled">Filled</flux:button>
<flux:button variant="danger">Danger</flux:button>
<flux:button variant="ghost">Ghost</flux:button>
<flux:button variant="subtle">Subtle</flux:button>
<!-- With icons -->
<flux:button icon="arrow-down-tray">Export</flux:button>
<flux:button icon:trailing="chevron-down">Open</flux:button>
<flux:button icon="x-mark" variant="subtle" />
<!-- Sizes -->
<flux:button size="sm">Small</flux:button>
<flux:button size="xs">Extra Small</flux:button>
<!-- Loading (automatic with wire:click) -->
<flux:button wire:click="save">Save</flux:button>
<!-- As link -->
<flux:button href="/dashboard">Dashboard</flux:button>
<!-- Full width -->
<flux:button variant="primary" class="w-full">Submit</flux:button>
<!-- Button groups -->
<flux:button.group>
<flux:button>Option 1</flux:button>
<flux:button>Option 2</flux:button>
</flux:button.group>
<flux:input wire:model="email" label="Email" type="email" />
<flux:input wire:model="search" placeholder="Search..." icon="magnifying-glass" />
<flux:textarea wire:model="content" label="Content" rows="4" />
<flux:select wire:model="status" label="Status">
<flux:select.option value="draft">Draft</flux:select.option>
<flux:select.option value="published">Published</flux:select.option>
</flux:select>
<flux:field>
<flux:label>Email</flux:label>
<flux:input wire:model="email" type="email" />
<flux:error name="email" />
<flux:description>We'll never share your email.</flux:description>
</flux:field>
<flux:modal.trigger name="confirm-delete">
<flux:button variant="danger">Delete</flux:button>
</flux:modal.trigger>
<flux:modal name="confirm-delete">
<flux:heading>Delete item?</flux:heading>
<flux:text>This action cannot be undone.</flux:text>
<div class="flex gap-2 mt-4">
<flux:modal.close>
<flux:button>Cancel</flux:button>
</flux:modal.close>
<flux:button variant="danger" wire:click="delete">Delete</flux:button>
</div>
</flux:modal>
<flux:table>
<flux:table.columns>
<flux:table.column>Name</flux:table.column>
<flux:table.column>Status</flux:table.column>
<flux:table.column></flux:table.column>
</flux:table.columns>
<flux:table.rows>
@foreach($items as $item)
<flux:table.row :key="$item->id">
<flux:table.cell>{{ $item->name }}</flux:table.cell>
<flux:table.cell>
<flux:badge color="green">Active</flux:badge>
</flux:table.cell>
<flux:table.cell>
<flux:button size="sm" variant="ghost" icon="pencil" />
</flux:table.cell>
</flux:table.row>
@endforeach
</flux:table.rows>
</flux:table>
<flux:navlist>
<flux:navlist.item href="/dashboard" icon="home">Dashboard</flux:navlist.item>
<flux:navlist.item href="/users" icon="users">Users</flux:navlist.item>
<flux:navlist.group heading="Settings">
<flux:navlist.item href="/settings/general">General</flux:navlist.item>
<flux:navlist.item href="/settings/security">Security</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>
<flux:card>
<flux:heading>Card Title</flux:heading>
<flux:text>Card content goes here.</flux:text>
</flux:card>
<flux:separator />
<flux:heading size="lg">Page Title</flux:heading>
<flux:subheading>Subtitle text</flux:subheading>
<flux:badge>Default</flux:badge>
<flux:badge color="green">Success</flux:badge>
<flux:badge color="red">Error</flux:badge>
<flux:badge color="yellow">Warning</flux:badge>
<flux:dropdown>
<flux:button icon:trailing="chevron-down">Options</flux:button>
<flux:menu>
<flux:menu.item icon="pencil">Edit</flux:menu.item>
<flux:menu.item icon="trash" variant="danger">Delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
| Prop | Options |
|---|---|
variant | outline, primary, filled, danger, ghost, subtle |
size | base, sm, xs |
icon | Heroicon name |
icon:trailing | Icon on right side |
loading | true/false (auto with wire:click) |
| Prop | Description |
|---|---|
wire:model | Livewire binding |
label | Field label |
placeholder | Placeholder text |
icon | Leading icon |
type | text, email, password, etc. |
Publish components for customization:
php artisan flux:publish
For complete component docs, see references/components.md
Create, schedule, and manage social media posts via Typefully. ALWAYS use this skill when asked to draft, schedule, post, or check tweets, posts, threads, or social media content for Twitter/X, LinkedIn, Threads, Bluesky, or Mastodon.
Update Spatie package documentation on spatie.be by re-importing docs for a given repo. Use after merging a PR that touches docs/, or when the user says 'update docs for [package]', 'rebuild docs for [repo]', 'import docs for [repo]', or invokes /update-spatie-docs [repo-name]. Takes a repo name argument (e.g., 'backup', 'laravel-medialibrary', 'laravel-pdf').
Generate beautiful code snippet images (PNG) for social media, tweets, LinkedIn, and documentation. Creates light-themed, macOS-style window chrome screenshots from code using HTML templates and Chrome headless. Use when asked to create code images, tweet images, snippet screenshots, code cards, or visual code examples for sharing. Supports single snippets, multi-image sets, and 2x2 grid composites.
Create and schedule link posts on freek.dev blog. Use when asked to publish, post, or share a link on freek.dev. Handles post creation, updating, and scheduling via the blog API.
Laravel PHP framework conventions and best practices. Use when building Laravel applications, writing controllers, models, migrations, routes, middleware, form requests, policies, jobs, events, or any Laravel-specific code. Triggers include "Laravel", "Eloquent", "Artisan", "php artisan", routing, migrations, or working with Laravel projects.
Build Livewire 4 components and applications. Use when creating reactive Laravel interfaces, single-file components, multi-file components, page components, forms, actions, or any Livewire-based UI. Triggers include "Livewire component", "wire:model", "wire:click", building interactive Laravel UIs, or working with Livewire 4 projects.