Flux

https://fluxui.dev/
Admin
Flux is an official component library for Livewire that provides world-class, accessible, and fully...
Tokens:213,361
Snippets:1,986
Trust Score:8.2
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Profile switcher example

Source: https://fluxui.dev/components/profile

A dropdown menu example for switching between user profiles, with radio options and a logout item.

```blade
<flux:dropdown position="top" align="start">
    <flux:profile avatar="https://unavatar.io/x/calebporzio" name="Caleb Porzio" />

    <flux:menu>
        <flux:menu.radio.group>
            <flux:menu.radio checked>Caleb Porzio</flux:menu.radio>
            <flux:menu.radio>Hugo Sainte-Marie</flux:menu.radio>
            <flux:menu.radio>Josh Hanley</flux:menu.radio>
        </flux:menu.radio.group>

        <flux:menu.separator />

        <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
    </flux:menu>
</flux:dropdown>
```

--------------------------------

### Profile menu example

Source: https://fluxui.dev/components/profile

A complete dropdown menu example using the profile component as the trigger, with navigation items for teams, licenses, account, and logout.

```blade
<flux:dropdown align="end">
    <flux:profile avatar="https://unavatar.io/x/calebporzio" />

    <flux:navmenu class="max-w-[12rem]">
        <div class="px-2 py-1.5">
            <flux:text size="sm">Signed in as</flux:text>
            <flux:heading class="mt-1! truncate">caleb@example.com</flux:heading>
        </div>

        <flux:navmenu.separator />

        <div class="px-2 py-1.5">
            <flux:text size="sm" class="pl-7">Teams</flux:text>
        </div>

        <flux:navmenu.item href="#" icon="check" class="text-zinc-800 dark:text-white truncate">Personal</flux:navmenu.item>
        <flux:navmenu.item href="#" indent class="text-zinc-800 dark:text-white truncate">Wireable LLC</flux:navmenu.item>

        <flux:navmenu.separator />

        <flux:navmenu.item href="/dashboard" icon="key" class="text-zinc-800 dark:text-white">Licenses</flux:navmenu.item>
        <flux:navmenu.item href="/account" icon="user" class="text-zinc-800 dark:text-white">Account</flux:navmenu.item>

        <flux:navmenu.separator />

        <flux:navmenu.item href="/logout" icon="arrow-right-start-on-rectangle" class="text-zinc-800 dark:text-white">Logout</flux:navmenu.item>
    </flux:navmenu>
</flux:dropdown>
```

--------------------------------

### DateRange::start()

Source: https://fluxui.dev/components/date-picker

Method to get the start date of the DateRange.

```APIDOC
## [PHP] $range->start()

### Description
Returns the start date of the range as a Carbon instance.

### Returns
- **Carbon** - The start date.

### Example
```php
$start = $range->start();
```

```

--------------------------------

### Testimonial example with avatar

Source: https://fluxui.dev/components/avatar

A testimonial example combining star icons, a heading, and a large avatar with the person's name and role.

```blade
<div>
    <div class="flex items-center gap-2">
        <flux:icon.star variant="solid" />
        <flux:icon.star variant="solid" />
        <flux:icon.star variant="solid" />
        <flux:icon.star variant="solid" />
        <flux:icon.star variant="solid" />
    </div>

    <flux:heading size="xl" class="mt-4 italic">
        <p>IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥</p>
    </flux:heading>

    <div class="mt-6 flex items-center gap-4">
        <flux:avatar size="lg" src="https://unavatar.io/x/taylorotwell" />

        <div>
            <flux:heading size="lg">Taylor Otwell</flux:heading>
            <flux:text>Creator of Laravel</flux:text>
        </div>
    </div>
</div>
```

--------------------------------

### Install Flux with Composer

Source: https://fluxui.dev/docs/installation

Installs the Flux component library via Composer from the project root. Requires Laravel 10+, Livewire 3.7.0+, and Tailwind 4.1+.

```bash
composer require livewire/flux
```

--------------------------------

### Initialize DateRange in mount method

Source: https://fluxui.dev/components/calendar

Initializes a DateRange object in the mount method by passing a start and end date to the constructor. The example creates a range from now to seven days later.

```php
<?php

use Livewire\Component;
use Flux\DateRange;

class Dashboard extends Component {
    public DateRange $range;

    public function mount() {
        $this->range = new DateRange(now(), now()->addDays(7));
    }
}
```

--------------------------------

### Link card example

Source: https://fluxui.dev/components/card

Wrap a small card in a link for compact, clickable content like announcements or shortcuts. The example uses a card with size="xs" and includes a heading with an icon and supporting text.

```blade
<a href="#" aria-label="Latest on our blog">
    <flux:card size="xs" class="hover:bg-zinc-50 dark:hover:bg-zinc-700">
        <flux:heading class="flex items-center gap-2">Latest on our blog <flux:icon name="arrow-up-right" class="ml-auto text-zinc-400" variant="micro" /></flux:heading>
        <flux:text class="mt-2">Stay up to date with our latest insights, tutorials, and product updates.</flux:text>
    </flux:card>
</a>
```

--------------------------------

### Color Picker Format Prop Examples

Source: https://fluxui.dev/blog?page=7

Examples of the color picker with different format props, including alpha-aware formats that render an alpha slider.

```blade
<flux:color-picker format="hex" /><flux:color-picker format="hexa" /><flux:color-picker format="rgb" /><flux:color-picker format="rgba" /><flux:color-picker format="hsl" /><flux:color-picker format="hsla" />
```

--------------------------------

### Category picker example

Source: https://fluxui.dev/components/popover

A complete popover example that displays a list of selectable categories using checkboxes. It includes a button with a badge showing the count of selected categories, a popover with a checkbox group, a separator, and a 'Clear all' button that resets the selection via Livewire.

```blade
<flux:dropdown>
    <flux:button
        icon="tag"
        icon:variant="micro"
        icon:class="text-zinc-400"
    >
        Categories

        <x-slot name="iconTrailing">
            <flux:badge size="sm" class="-mr-1">
                <span x-text="$wire.categories.length" class="tabular-nums"> </span>
            </flux:badge>
        </x-slot>
    </flux:button>

    <flux:popover class="max-w-[18rem] flex flex-col gap-4">
        <flux:checkbox.group variant="pills" wire:model="categories">
            <flux:checkbox value="fantasy" label="Fantasy" />
            <flux:checkbox value="science-fiction" label="Science fiction" />
            <flux:checkbox value="horror" label="Horror" />
            <flux:checkbox value="mystery" label="Mystery" />
            <flux:checkbox value="romance" label="Romance" />
            <flux:checkbox value="autobiography" label="Autobiography" />
            <flux:checkbox value="thriller" label="Thriller" />
            <flux:checkbox value="poetry" label="Poetry" />
            <flux:checkbox value="children" label="Children" />
        </flux:checkbox.group>

        <flux:separator variant="subtle" />

        <flux:button
            variant="subtle"
            size="sm"
            class="justify-start -m-2 !px-2"
            wire:click="$set('categories', [])"
        >
            Clear all
        </flux:button>
    </flux:popover>
</flux:dropdown>
```

--------------------------------

### Alternative dropdown without brevity

Source: https://fluxui.dev/docs/principles

Contrasts with the previous example, showing what the dropdown might look like without composability and brevity as priorities.

```html
<flux:dropdown-menu>
    <flux:dropdown-menu.button>Options</flux:dropdown-menu.button>

    <flux:dropdown-menu.items>
        <!-- ... -->
    </flux:dropdown-menu.items>
</flux:dropdown-menu>
```

--------------------------------

### Flux size prop examples for smaller components

Source: https://fluxui.dev/docs/patterns

Shows components that can be sized down using the size prop with value "sm".

```html
<flux:button size="sm" />
<flux:select size="sm" />
<flux:input size="sm" />
<flux:tabs size="sm" />
```

--------------------------------

### Data Structure Example in PHP

Source: https://fluxui.dev/components/chart

Shows the expected data structure for Flux charts: an array of associative arrays with named fields. This example defines a Livewire component with a public $data property containing date and visitors values.

```php
<?php

use Livewire\Component;

class Dashboard extends Component
{
    public array $data = [
        ['date' => '2026-01-01', 'visitors' => 267],
        ['date' => '2026-01-02', 'visitors' => 259],
        ['date' => '2026-01-03', 'visitors' => 269],
        // ...
    ];

}
```

--------------------------------

### Basic Button Usage

Source: https://fluxui.dev/components/button

The simplest button example using the `flux:button` component with default styling.

```blade
<flux:button>Button</flux:button>
```

--------------------------------

### Set up listener in HTML head

Source: https://fluxui.dev/components/editor

Add a listener for the 'flux:editor' event in the <head> tag of your layout to start customizing the editor.

```html
<head>
    ...
    <script type="module">
        document.addEventListener('flux:editor', (e) => {
            ...
        })
    </script>
</head>
```

--------------------------------

### Composable Color Picker Layout

Source: https://fluxui.dev/blog?page=7

Composable layout example showing how to mix and match color picker sub-components like .input, .area, and .slider.

```blade
<flux:color-picker>    <div class="flex flex-col gap-3">        <flux:color-picker.input placeholder="#000000" />        <flux:separator />        <flux:color-picker.area />        <flux:color-picker.slider channel="hue" />    </div></flux:color-picker>
```

--------------------------------

### Flux size prop examples for larger components

Source: https://fluxui.dev/docs/patterns

Shows components that can be sized up using the size prop with value "lg" for larger visual contexts.

```html
<flux:heading size="lg" />
<flux:badge size="lg" />
```

--------------------------------

### Accessibility examples

Source: https://fluxui.dev/components/flag

Flags are decorative by default and render with an empty alt. Add alternative text only when the flag communicates information not already present nearby.

```blade
<!-- Decorative because the adjacent text already names the country... -->
<div class="flex items-center gap-2">
    <flux:flag country="CA" />
    <span>Canada</span>
</div>

<!-- Informative when no nearby text communicates the country... -->
<flux:flag country="CA" alt="Canada" />
```

--------------------------------

### Header with brand and navigation

Source: https://fluxui.dev/components/brand

Complete header example combining brand, navbar, spacer, and profile components. The brand uses a custom logo slot with an 'A' character.

```blade
<flux:header class="px-4! w-full bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-white/5">
    <flux:brand href="#" name="Acme Inc.">
        <x-slot name="logo" class="bg-accent text-accent-foreground">
            <i class="font-serif font-bold">A</i>
        </x-slot>
    </flux:brand>

    <flux:navbar variant="outline">
        <flux:navbar.item href="#" current>Home</flux:navbar.item>
        <flux:navbar.item badge="12" href="#">Inbox</flux:navbar.item>
    </flux:navbar>

    <flux:spacer class="min-w-24" />

    <flux:profile circle :chevron="false" avatar="https://unavatar.io/x/calebporzio" />
</flux:header>
```

--------------------------------

### Use DateRange convenience methods

Source: https://fluxui.dev/components/calendar

Demonstrates the convenience methods inherited from CarbonPeriod: start(), end(), contains(), count(), iteration, and toArray(). The DateRange object extends CarbonPeriod.

```php
$range = new Flux\DateRange(
    now()->subDays(1),
    now()->addDays(1),
);

// Get the start and end dates as Carbon instances...
$start = $range->start();
$end = $range->end();

// Check if the range contains a date...
$range->contains(now());

// Get the number of days in the range...
$range->count();

// Loop over the range by day...
foreach ($range as $date) {
    // $date is a Carbon instance...
}

// Get the range as an array of Carbon instances representing each day in the range...
$range->toArray();
```

--------------------------------

### Specify preset order with presets prop

Source: https://fluxui.dev/components/date-picker

Specifies which presets to show and in which order using the presets prop. The example lists presets for today, yesterday, this week, last 7 days, this month, year to date, and all time.

```html
<flux:date-picker
    mode="range"
    presets="today yesterday thisWeek last7Days thisMonth yearToDate allTime"
/>
```

--------------------------------

### Flux kbd prop examples for keyboard hints

Source: https://fluxui.dev/docs/patterns

Adds decorative keyboard shortcut hints using the kbd prop. Similar to the icon prop, many components support this.

```html
<flux:button kbd="⌘S" />
<flux:tooltip kbd="D" />
<flux:input kbd="⌘K" />
<flux:menu.item kbd="⌘E" />
<flux:command.item kbd="⌘N" />
```

--------------------------------

### Position dropdown with position and align props

Source: https://fluxui.dev/components/dropdown

Sets the dropdown menu position using the `position` prop (top, bottom, left, right) and alignment via the `align` prop (start, center, end). The example shows four position/alignment combinations.

```blade
<flux:dropdown position="top" align="start">

<!-- More positions... -->
<flux:dropdown position="right" align="center">
<flux:dropdown position="bottom" align="center">
<flux:dropdown position="left" align="end">
```

--------------------------------

### Range with separate start and end inputs

Source: https://fluxui.dev/components/date-picker

Provides a clearer interface for date range selection by using separate inputs for start and end dates. The trigger slot contains two custom date-picker inputs with labels 'Start' and 'End'.

```blade
<flux:date-picker mode="range">
    <x-slot name="trigger">
        <div class="flex flex-col sm:flex-row gap-6 sm:gap-4">
            <flux:date-picker.input variant="custom" label="Start" />
            <flux:date-picker.input variant="custom" label="End" />
        </div>
    </x-slot>
</flux:date-picker>
```

--------------------------------

### Basic command palette usage

Source: https://fluxui.dev/components/command

Creates a searchable command palette with an input and a list of items. Each item can have an icon, a keyboard shortcut hint (kbd), and a wire:click action.

```blade
<flux:command>
    <flux:command.input placeholder="Search..." />

    <flux:command.items>
        <flux:command.item wire:click="..." icon="user-plus" kbd="⌘A">Assign to…</flux:command.item>
        <flux:command.item wire:click="..." icon="document-plus">Create new file</flux:command.item>
        <flux:command.item wire:click="..." icon="folder-plus" kbd="⌘⇧N">Create new project</flux:command.item>
        <flux:command.item wire:click="..." icon="book-open">Documentation</flux:command.item>
        <flux:command.item wire:click="..." icon="newspaper">Changelog</flux:command.item>
        <flux:command.item wire:click="..." icon="cog-6-tooth" kbd="⌘,">Settings</flux:command.item>
    </flux:command.items>
</flux:command>
```

--------------------------------

### Grouped feature example with avatar group

Source: https://fluxui.dev/components/avatar

A grouped feature example with a heading, a badge, descriptive text, and a group of circular avatars.

```blade
<div>
    <flux:heading size="xl">The Laravel Podcast <flux:badge inset="top bottom" class="ml-1 max-sm:hidden">New</flux:badge></flux:heading>

    <flux:text class="mt-2">
        A podcast about Laravel, development best practices, and the PHP ecosystem—hosted by Jeffrey Way, Matt Stauffer, and Taylor Otwell, later joined by Adam Wathan.
    </flux:text>

    <flux:avatar.group class="mt-6">
        <flux:avatar circle size="lg" src="https://unavatar.io/x/taylorotwell" />
        <flux:avatar circle size="lg" src="https://unavatar.io/x/adamwathan" />
        <flux:avatar circle size="lg" src="https://unavatar.io/x/jeffrey_way" />
        <flux:avatar circle size="lg" src="https://unavatar.io/x/stauffermatt" />
    </flux:avatar.group>
</div>
```

--------------------------------

### Configure Composer credentials for Flux Pro

Source: https://fluxui.dev/docs/installation

Run this command before composer install to create an auth.json file in the project root, storing your Flux account email and license key for authenticating the Flux Pro private Composer repository. Replace your-email and your-license-key with your actual credentials from the Flux dashboard. The generated auth.json should not be added to version control.

```bash
composer config http-basic.composer.fluxui.dev your-email your-license-key
```

--------------------------------

### Configure range limits and months

Source: https://fluxui.dev/components/calendar

Shows how to set minimum and maximum range limits and control the number of months displayed.

```html
<!-- Set minimum and maximum range limits -->
<flux:calendar mode="range" min-range="3" max-range="10" />
```

```html
<!-- Control number of months shown -->
<flux:calendar mode="range" months="2" />
```

--------------------------------

### Link as button

Source: https://fluxui.dev/components/text

Shows how to render a link as a button using the `as="button"` prop, with a `wire:click` handler.

```blade
<flux:link as="button" wire:click="...">Create new account →</flux:link>
```

--------------------------------

### Custom search placeholder for searchable pillbox

Source: https://fluxui.dev/components/pillbox

Customizes the search input placeholder using the 'search:placeholder' attribute. The ellipsis (...) in the example represents the option list from the previous example.

```html
<flux:pillbox multiple searchable search:placeholder="Filter skills...">
    ...
</flux:pillbox>
```

--------------------------------

### Leading subheading example

Source: https://fluxui.dev/components/heading

Example of a leading subheading: a text label above a large heading, with an icon and percentage below. Uses `size="xl"` and utility classes for spacing and colors.

```blade
<div>
    <flux:text>Year to date</flux:text>

    <flux:heading size="xl" class="mb-1">$7,532.16</flux:heading>

    <div class="flex items-center gap-2">
        <flux:icon.arrow-trending-up variant="micro" class="text-green-600 dark:text-green-500" />

        <span class="text-sm text-green-600 dark:text-green-500">15.2%</span>
    </div>
</div>
```

--------------------------------

### Create account form with Flux components

Source: https://fluxui.dev/docs/principles

Example of a 'Create account' form using Flux components. Flux handles component styling, while spacing and layout are left to the developer via utility classes like mb-6 and mt-2.

```html
<form wire:submit="createAccount">
    <div class="mb-6">
        <flux:heading>Create an account</flux:heading>
        <flux:text class="mt-2">We're excited to have you on board.</flux:text>
    </div>

    <flux:input class="mb-6" label="Email" wire:model="email" />

    <div class="mb-6 flex *:w-1/2 gap-4">
        <flux:input label="Password" wire:model="password" />
        <flux:input label="Confirm password" wire:model="password_confirmation" />
    </div>

    <flux:button type="submit" variant="primary">Create account</flux:button>
</form>
```

--------------------------------

### Set tick start position on chart axis

Source: https://fluxui.dev/components/chart

Overrides the default tick start position (zero unless negative values are present) using the tick-start attribute. Available values: auto, min, 0, or any number.

```html
<flux:chart.axis axis="y" tick-start="min">
    <!-- ... -->
</flux:chart.axis>
```

--------------------------------

### Set range limits with min-range and max-range

Source: https://fluxui.dev/components/date-picker

Sets the minimum and maximum number of days that can be selected in a range date picker. The min-range example restricts the range to at least 3 days, while the max-range example limits it to at most 10 days.

```blade
<flux:date-picker mode="range" min-range="3" />
```

```blade
<flux:date-picker mode="range" max-range="10" />
```

--------------------------------

### Analytics Dashboard Demo (PHP/Livewire)

Source: https://fluxui.dev/demos

A standalone demo of an analytics overview page built with Flux and Livewire. It includes computed properties for visitor data, stats, top pages, countries, and sources, using CarbonImmutable for date handling and Flux's DateRange for date range selection. The demo keeps its application shell inline, as noted in the comment, and should be moved to a layout in production.

```php
<?php
use Carbon\CarbonImmutable;
use Flux\DateRange;
use Illuminate\Support\Number;
use Livewire\Attributes\Computed;

new class extends \Livewire\Component {
    public string $chartType = 'bar';
    public DateRange $dateRange;

    public function mount(): void
    {
        $this->initializeDateRange();
    }

    protected function initializeDateRange(): void
    {
        $this->dateRange = DateRange::last7Days();
    }

    #[Computed]
    public function visitorData(): array
    {
        $visitorCounts = [369, 729, 852, 2150, 1250, 1383, 1165, 1875, 852, 729, 1042, 2415, 1250, 909, 1080, 1383, 814, 767, 559, 852, 1165, 767, 1761, 2150, 1165, 1042, 1496, 521, 1998, 1581, 1250];
        $startDate = CarbonImmutable::create(2025, 6, 1);
        $visitorData = [];
        foreach ($visitorCounts as $index => $visitors) {
            $visitorData[] = [
                'date' => $startDate->addDays($index)->toDateString(),
                'visitors' => $visitors,
            ];
        }
        return $visitorData;
    }

    #[Computed]
    public function stats(): array
    {
        return [
            ['label' => 'Visitors', 'value' => '128.6K', 'change' => '24.7%', 'trend' => 'up'],
            ['label' => 'Page views', 'value' => '389.1K', 'change' => '2.4%', 'trend' => 'down'],
            ['label' => 'Bounce rate', 'value' => '27.11%', 'change' => '1.7%', 'trend' => 'up'],
            ['label' => 'Average session', 'value' => '2m 57s', 'change' => '13.0%', 'trend' => 'up'],
        ];
    }

    #[Computed]
    public function topPages(): array
    {
        return [
            ['path' => '/', 'views' => 84600],
            ['path' => '/features', 'views' => 45800],
            ['path' => '/pricing', 'views' => 30700],
            ['path' => '/blog', 'views' => 29900],
            ['path' => '/docs', 'views' => 21200],
            ['path' => '/team', 'views' => 11100],
        ];
    }

    #[Computed]
    public function topPageScale(): int
    {
        return 110000;
    }

    #[Computed]
    public function countries(): array
    {
        return [
            ['name' => 'United States', 'visitors' => 42900, 'code' => 'US'],
            ['name' => 'United Kingdom', 'visitors' => 18800, 'code' => 'GB'],
            ['name' => 'Canada', 'visitors' => 12000, 'code' => 'CA'],
            ['name' => 'Germany', 'visitors' => 9500, 'code' => 'DE'],
            ['name' => 'Brazil', 'visitors' => 7700, 'code' => 'BR'],
            ['name' => 'Sweden', 'visitors' => 5400, 'code' => 'SE'],
        ];
    }

    #[Computed]
    public function sources(): array
    {
        return [
            ['name' => 'Organic search', 'percentage' => 42],
            ['name' => 'Direct', 'percentage' => 29],
            ['name' => 'Referral', 'percentage' => 13],
            ['name' => 'Social', 'percentage' => 9],
            ['name' => 'Paid search', 'percentage' => 5],
            ['name' => 'AI referrals', 'percentage' => 2],
        ];
    }
}?>
```

```php
{{-- This standalone demo keeps its application shell inline. In a production app, move shared navigation into your app layout. --}}
<div>
    <flux:sidebar sticky collapsible class="border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
```

--------------------------------

### DateRange::preset()

Source: https://fluxui.dev/components/date-picker

Method to get the preset of the DateRange.

```APIDOC
## [PHP] $range->preset()

### Description
Returns the preset as an enum value.

### Returns
- **DateRangePreset** - The preset enum value.

### Example
```php
$this->range->preset();
// Returns a value like `DateRangePreset::LastMonth`...
```

```

--------------------------------

### DateRange::count()

Source: https://fluxui.dev/components/date-picker

Method to get the number of days in the DateRange.

```APIDOC
## [PHP] $range->count()

### Description
Returns the number of days in the range.

### Returns
- **int** - The number of days.

### Example
```php
$range->count();
```

```

--------------------------------

### Add keyboard hints to dropdown menu items

Source: https://fluxui.dev/components/dropdown

Adds keyboard shortcut hints to menu items using the `kbd` prop. The example shows Save, Duplicate, and Delete items with their shortcuts.

```blade
<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Options</flux:button>

    <flux:menu>
        <flux:menu.item icon="pencil-square" kbd="⌘S">Save</flux:menu.item>
        <flux:menu.item icon="document-duplicate" kbd="⌘D">Duplicate</flux:menu.item>
        <flux:menu.item icon="trash" variant="danger" kbd="⌘⌫">Delete</flux:menu.item>
    </flux:menu>
</flux:dropdown>
```

--------------------------------

### DateRange::end()

Source: https://fluxui.dev/components/date-picker

Method to get the end date of the DateRange.

```APIDOC
## [PHP] $range->end()

### Description
Returns the end date of the range as a Carbon instance.

### Returns
- **Carbon** - The end date.

### Example
```php
$end = $range->end();
```

```

--------------------------------

### Create a pie chart with flux:chart.pie

Source: https://fluxui.dev/components/chart

Create a pie chart by including a single <flux:chart.pie> component inside <flux:chart.svg>. Each data row becomes a slice; field sets its size and label-field names it. A pie always draws a full circle starting at 12 o'clock and moving clockwise. Hovering a slice shows the tooltip; a single <flux:chart.tooltip.value> row with a label-field reads best, and <flux:chart.tooltip.indicator> adds a dot in the hovered slice's color.

```blade
<flux:chart wire:model="data">
    <flux:chart.viewport class="aspect-square">
        <flux:chart.svg>
            <flux:chart.pie field="value" label-field="label" />
        </flux:chart.svg>
    </flux:chart.viewport>

    <flux:chart.tooltip>
        <flux:chart.tooltip.value label-field="label" field="value" suffix="%">
            <flux:chart.tooltip.indicator />
        </flux:chart.tooltip.value>
    </flux:chart.tooltip>
</flux:chart>
```

--------------------------------

### flux:color-picker

Source: https://fluxui.dev/components/color-picker

The main color picker component with all its props and usage examples.

```APIDOC
## [COMPONENT] flux:color-picker

### Description
Renders a color picker popover with a trigger. Supports multiple trigger types, output formats, and custom layouts.

### Props
- `wire:model` (string) - Optional - Binds the color picker to a Livewire property. The value is a CSS color string in the configured format.
- `value` (string) - Optional - Initial value as any CSS color string. Auto-normalized to the configured format on display.
- `name` (string) - Optional - Generates a hidden form input with this name for native form submission (no `wire:model` required).
- `format` (string) - Optional - Output format. Options: `hex` (default), `hexa`, `rgb`, `rgba`, `hsl`, `hsla`. Alpha-aware formats automatically render an alpha slider in the popover.
- `type` (string) - Optional - Trigger type. Options: `input` (default), `button`. The default `input` trigger lets users type or paste a color directly. The `button` trigger shows the value and opens the popover on click.
- `placeholder` (string) - Optional - Placeholder text for the input trigger. Default: format-specific (e.g. `#000000` for hex).
- `size` (string) - Optional - Trigger size. Options: `sm`, `xs`. Default: base.
- `:swatches` (array|false) - Optional - Custom swatch palette as an array of hex strings or `[value, label]` pairs, or `false` to hide the default swatch grid entirely.
- `dropper` (boolean) - Optional - Render a dropper button in the popover that lets users pick a color from the screen. Uses the EyeDropper API — automatically disabled in unsupported browsers. Default: `false`.
- `clearable` (boolean) - Optional - Render a clear (X) button on the trigger when a value is set. Default: `false`.
- `copyable` (boolean) - Optional - Render a clipboard-copy button on the trigger. Only available with the default input trigger. Default: `false`.
- `label` (string) - Optional - Field label. Forwarded to `flux:with-field`.
- `description` (string) - Optional - Field description. Forwarded to `flux:with-field`.
- `disabled` (boolean) - Optional - Disable the picker. Default: `false`.
- `invalid` (boolean) - Optional - Mark the trigger as invalid. Auto-detected from the field's error bag when bound via `wire:model`.

### Example
```blade
<flux:color-picker :swatches="false" />
```
```

--------------------------------

### Textarea with Placeholder

Source: https://fluxui.dev/components/textarea

Displays a textarea with a label and placeholder text to guide user input.

```blade
<flux:textarea
    label="Order notes"
    placeholder="No lettuce, tomato, or onion..."
/>
```

--------------------------------

### flux:carousel

Source: https://fluxui.dev/components/carousel

Documentation for the flux:carousel component, including its props, CSS variables, and usage examples.

```APIDOC
## [COMPONENT] flux:carousel

### Description
A carousel component that displays a scrollable track of slides with optional arrow controls, indicators, autoplay, and fade effects.

### Props
- `arrows` (boolean) - If `true`, shows previous and next arrow controls over the carousel. Default: `true`.
- `arrows:position` (string) - Position for the built-in arrow controls. Options: `inside`, `overlap`, `outside`. Default: `inside`.
- `arrows:class` (string) - Additional classes applied to the built-in arrow controls.
- `autoplay` (boolean) - If `true`, automatically advances slides. Autoplay pauses on hover, focus, or manual interaction, and is disabled when reduced motion is preferred.
- `autoplay:interval` (number) - Time between autoplay advances in milliseconds. Default: `5000`.
- `indicators` (boolean) - If `true`, shows slide indicators below the carousel. Default: `false`.
- `disabled` (boolean) - If `true`, disables carousel controls and indicators.
- `fade` (boolean) - If `true`, fades the scrollable track edges when additional slides are overflowed.
- `bleed` (boolean) - Extends the carousel through surrounding horizontal padding while keeping slides and scroll snap positions aligned to the content gutter. Defaults to `1.5rem` and respects an inherited `--flux-bleed` value.
- `snap` (string) - Scroll snap behavior. Options: `proximity`, `mandatory`. Default: `proximity`.
- `scroll` (string) - Arrow and indicator scroll behavior. Options: `smooth`, `instant`. Default: `smooth`.
- `advance` (string) - How many slides arrow controls move. Options: `slide`, `page`. Default: `slide`.
- `wrap` (string) - What happens when advancing past the final slide. Options: `none`, `rewind`. With `rewind`, the next control remains available at the end and returns to the first slide. Default: `none`.
- `name` (string) - Unique name used to connect the carousel with external controls.
- `track:class` (string) - Additional classes applied to the scrollable track.

### CSS Variables
- `--flux-bleed` - Horizontal distance the carousel extends through its parent container. Set this to match the parent's horizontal padding. Flux cards provide it automatically.

### Examples
```blade
<flux:carousel arrows:position="inside">...</flux:carousel>
<flux:carousel arrows:position="overlap">...</flux:carousel>
<flux:carousel arrows:position="outside">...</flux:carousel>
<flux:carousel fade bleed>
    <!-- ... -->
</flux:carousel>
<flux:carousel advance="page">
    <!-- ... -->
</flux:carousel>
```
```

--------------------------------

### Import Lucide icons via artisan command

Source: https://fluxui.dev/components/icon

Prompts to select icons to import. You can also specify icon names as arguments.

```blade
php artisan flux:icon
```

--------------------------------

### Circle avatar profile

Source: https://fluxui.dev/components/profile

Displays a circular avatar using the circle prop. The second example also includes a name.

```blade
<flux:profile circle :chevron="false" avatar="https://unavatar.io/x/calebporzio" />

<flux:profile circle name="Caleb Porzio" avatar="https://unavatar.io/x/calebporzio" />
```

--------------------------------

### Use accent utility classes

Source: https://fluxui.dev/docs/theming

Use the ergonomic utility classes bg-accent and text-accent-foreground instead of the arbitrary variable syntax.

```html
<button class="bg-accent text-accent-foreground">
```

--------------------------------

### Range picker component

Source: https://fluxui.dev/components/date-picker

Enables selection of date ranges for reporting, booking systems, or any scenario requiring a start and end date.

```blade
<flux:date-picker mode="range" />
```

--------------------------------

### Blade layout with inset main

Source: https://fluxui.dev/layouts/header

Complete Blade layout using `flux:main inset` to create a bordered panel. Includes header, sidebar, and main content. On large screens content scrolls inside the panel; on smaller screens the panel becomes full width. Set the background around the panel on your layout and header, and add `lg:mt-0` to the main to remove the margin below the header. Add `container` to center the content inside the full-width panel. Keep the header and main as direct siblings so the panel can adjust to the header's height.

```blade
<head>
    <!-- ... -->

    @fluxAppearance
</head>
<body class="min-h-dvh bg-zinc-50 dark:bg-zinc-900">
    <flux:header class="bg-zinc-50 dark:bg-zinc-900">
        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

        <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />
        <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" />

        <flux:navbar class="-mb-px max-lg:hidden">
            <flux:navbar.item icon="home" href="#" current>Home</flux:navbar.item>
            <flux:navbar.item icon="inbox" badge="12" href="#">Inbox</flux:navbar.item>
            <flux:navbar.item icon="document-text" href="#">Documents</flux:navbar.item>
            <flux:navbar.item icon="calendar" href="#">Calendar</flux:navbar.item>

            <flux:separator vertical variant="subtle" class="my-2"/>

            <flux:dropdown class="max-lg:hidden">
                <flux:navbar.item icon:trailing="chevron-down">Favorites</flux:navbar.item>

                <flux:navmenu>
                    <flux:navmenu.item href="#">Marketing site</flux:navmenu.item>
                    <flux:navmenu.item href="#">Android app</flux:navmenu.item>
                    <flux:navmenu.item href="#">Brand guidelines</flux:navmenu.item>
                </flux:navmenu>
            </flux:dropdown>
        </flux:navbar>

        <flux:spacer />

        <flux:navbar class="mr-4">
            <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
            <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="#" label="Settings" />
            <flux:navbar.item class="max-lg:hidden" icon="information-circle" href="#" label="Help" />
        </flux:navbar>

        <flux:dropdown position="top" align="start">
            <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />

            <flux:menu>
                <flux:menu.radio.group>
                    <flux:menu.radio checked>Olivia Martin</flux:menu.radio>
                    <flux:menu.radio>Truly Delta</flux:menu.radio>
                </flux:menu.radio.group>

                <flux:menu.separator />

                <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
            </flux:menu>
        </flux:dropdown>
    </flux:header>

    <flux:sidebar sticky collapsible="mobile" class="lg:hidden bg-zinc-50 dark:bg-zinc-900">
        <flux:sidebar.header>
            <flux:sidebar.brand
                href="#"
                logo="https://fluxui.dev/img/demo/logo.png"
                logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"
                name="Acme Inc."
            />

            <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
        </flux:sidebar.header>

        <flux:sidebar.nav>
            <flux:sidebar.item icon="home" href="#" current>Home</flux:sidebar.item>
            <flux:sidebar.item icon="inbox" badge="12" href="#">Inbox</flux:sidebar.item>
            <flux:sidebar.item icon="document-text" href="#">Documents</flux:sidebar.item>
            <flux:sidebar.item icon="calendar" href="#">Calendar</flux:sidebar.item>

            <flux:sidebar.group expandable heading="Favorites" class="grid">
                <flux:sidebar.item href="#">Marketing site</flux:sidebar.item>
                <flux:sidebar.item href="#">Android app</flux:sidebar.item>
                <flux:sidebar.item href="#">Brand guidelines</flux:sidebar.item>
            </flux:sidebar.group>
        </flux:sidebar.nav>

        <flux:sidebar.spacer />

        <flux:sidebar.nav>
            <flux:sidebar.item icon="cog-6-tooth" href="#">Settings</flux:sidebar.item>
            <flux:sidebar.item icon="information-circle" href="#">Help</flux:sidebar.item>
        </flux:sidebar.nav>
    </flux:sidebar>

    <flux:main inset container class="lg:mt-0">
        <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>

        <flux:text class="mt-2 mb-6 text-base">Here's what's new today</flux:text>

        <flux:separator variant="subtle" />
    </flux:main>
    @fluxScripts
</body>
```

--------------------------------

### Inline Actions

Source: https://fluxui.dev/components/callout

Use the inline prop to display actions inline with the callout. This example shows two callouts with inline actions.

```blade
<flux:callout icon="cube" variant="secondary" inline>
    <flux:callout.heading>Your package is delayed</flux:callout.heading>

    <x-slot name="actions">
        <flux:button>Track order -></flux:button>
        <flux:button variant="ghost">Reschedule</flux:button>
    </x-slot>
</flux:callout>

<flux:callout icon="exclamation-triangle" variant="secondary" inline>
    <flux:callout.heading>Payment issue detected</flux:callout.heading>
    <flux:callout.text>Your last payment attempt failed. Update your billing details to prevent service interruption.</flux:callout.text>

    <x-slot name="actions">
        <flux:button>Update billing</flux:button>
    </x-slot>
</flux:callout>
```

--------------------------------

### Country select example

Source: https://fluxui.dev/components/flag

Pairs flags with localized country names in a searchable select. Uses the listbox variant and a searchable prop.

```blade
<flux:select wire:model="country" variant="listbox" searchable>
    @foreach ($countries as $country)
        <flux:select.option :value="$country['code']" :label="$country['name']">
            <div class="flex items-center gap-2">
                <flux:flag :country="$country['code']" size="xs" />
                <span>{{ $country['name'] }}</span>
            </div>
        </flux:select.option>
    @endforeach
</flux:select>
```

--------------------------------

### Publish all Flux components

Source: https://fluxui.dev/docs/customization

Publishes all Flux components at once using the --all flag.

```bash
php artisan flux:publish --all
```

--------------------------------

### Range presets array structure

Source: https://fluxui.dev/components/date-picker

Shows the associative array structure used by the `presets` prop, containing `start`, `end`, and `preset` keys.

```php
[
    'start' => null,
    'end' => null,
    'preset' => 'lastMonth',
]
```

--------------------------------

### Set up listener in app.js

Source: https://fluxui.dev/components/editor

Alternatively, add the listener to your app.js file to handle the 'flux:editor' event.

```javascript
...

document.addEventListener('flux:editor', (e) => {
    ...
})
```

--------------------------------

### Access range as associative array in Livewire

Source: https://fluxui.dev/components/calendar

Shows how to access the selected range from a Livewire component as an associative array with 'start' and 'end' keys.

```php
<?php

use Livewire\Component;

class BookFlight extends Component {
    public ?array $range;

    public function book() {
        // ...

        $flight->depart_on = $this->range['start'];
        $flight->return_on = $this->range['end'];

        // ...
    }
}
```
Tokens:
Raw