DOCSEARCHbyAlgolia
Submit Docs

Flux UI Component Library

repository·main·Indexed 21 days ago

https://github.com/livewire/flux

A UI component library designed for Livewire applications and built on Tailwind CSS. Flux provides a set of core components (Button, Dropdown, Icon, Separator, Tooltip) and an extended Pro version. It includes Artisan commands for activating Pro licenses, publishing component templates for customization, and importing Lucide icons as Blade components. Requirements include Laravel v10.0+, Livewire v3.5.19+, and Tailwind CSS v4.0+.

Tokens
2.9K
Snippets
19
Records
22
Agent score
76%

What's inside Flux

  1. Set up Tailwind CSS for Flux

    main

    Flux requires specific CSS imports in your resources/css/app.css file to function correctly. You must import the Flux CSS file after importing Tailwind CSS and define a custom dark mode variant.

    @import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));

  4. Customize Flux Components

    main

    To modify the underlying Blade templates of specific Flux components, use the flux:publish command. You can choose specific components to publish or use the --all flag to publish every component.

    php artisan flux:publish
# Or to publish everything:
php artisan flux:publish --all

  6. Use the Inter Font Family (Optional)

    main

    Flux recommends using the Inter font family for optimal appearance.

    1. Add the font links to your layout file's <head>:
    <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
    1. Configure Tailwind to use Inter in your resources/css/app.css:
    @import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@theme {
    --font-sans: Inter, sans-serif;
}

  7. Include Flux Assets in your Layout

    main
    To enable Flux functionality and styling, add the @fluxAppearance and @fluxScripts Blade directives to your main layout file. @fluxAppearance should be placed in the <head> section, and @fluxScripts should be placed within the <body> section.
    <head>
    ...
    @fluxAppearance
</head>

<body
    ...
    @fluxScripts
</body>

  9. Customize Flux component views

    main
    Flux uses anonymous Blade components. If you wish to override or customize the default Flux component views, you can publish them to your application's resource directory. Flux looks for component definitions in resource/views/flux before falling back to its internal stubs.

  11. Activate Flux Pro interactively

    main

    If you run php artisan flux:activate without arguments, the command will enter an interactive mode using Laravel Prompts. It will prompt you to:

    1. Enter the email address associated with your license.
    2. Enter your license key (input will be masked as a password).

    If the automatic installation fails, you can manually run composer require livewire/flux-pro after ensuring your credentials and repository are configured.

    php artisan flux:activate

  12. Use imported Lucide icons as Blade components

    main

    Once an icon is imported via flux:icon, it is available as a Blade component in resources/views/flux/icon/{icon-name}.blade.php.

    These components support a variant prop which adjusts the size and stroke width using Flux's internal class management.

    Supported Variants:

    • outline (default): size-6, stroke-width 2
    • mini: size-5, stroke-width 2.25
    • micro: size-4, stroke-width 2.5

    Note: The solid variant is not supported for Lucide icons.

    {{-- Default (outline) --}}
<x-flux:icon.arrow-left />

{{-- Mini variant --}}
<x-flux:icon.arrow-left variant="mini" />

{{-- Micro variant --}}
<x-flux:icon.arrow-left variant="micro" />