fluxui.digiart.club
Open in
urlscan Pro
188.114.97.3
Public Scan
URL:
https://fluxui.digiart.club/
Submission: On October 20 via api from US — Scanned from NL
Submission: On October 20 via api from US — Scanned from NL
Form analysis 0 forms found in the DOM
Text Content
Docs
Pricing
Docs Pricing
Toggle dark mode
Toggle dark mode
Signed in as
loocklys@gmail.com
Licenses Account
Logout
Guides
Installation
Guides
Installation Principles Patterns Customization
Layouts
Header Sidebar
Components
Accordion Autocomplete Badge Button Breadcrumbs Card Checkbox Command Context
Dropdown Field Heading Icon Input Modal Navbar Radio Select Separator Switch
Table Tabs Textarea Toast Tooltip
INSTALLATION
Flux is a robust, hand-crafted, UI component library for your Livewire
applications. It's built using Tailwind CSS and provides a set of components
that are easy to use and customize.
PREREQUISITES
Flux requires the following before installing:
Laravel
Version 10 or later
Livewire
Version 3 or later
Tailwind CSS
Version 3.4.10 or later
GETTING STARTED
1
Install Flux
Flux can be installed via composer from your project root:
Copy to clipboard
composer require livewire/flux
2
Activate your license
During the activation process, you will be prompted to enter an email and
license key.
Purchase a Flux license here ->
Once you've purchased a license key, you can now activate your project using the
following command:
Copy to clipboard
php artisan flux:activate
The above command will create an
auth.json
file in your project's root directory. This file contains your email and license
key for downloading and installing Flux.
Because
auth.json
is not version controlled, you will need to manually recreate it in every new
project environment. View your licenses and their associated install
instructions here ->
3
Include Flux assets
Now, add the
@fluxStyles
and
@fluxScripts
Blade directives to your layout file:
Copy to clipboard
<head> ... @fluxStyles </head> <body> ... @fluxScripts </body>
4
Set up Tailwind CSS
The last step is to set up Tailwind CSS. Flux uses Tailwind CSS for its default
styling.
If you already have Tailwind installed in your project, just add the following
paths to your
tailwind.config.js
file:
Copy to clipboard
module.exports = { content: [ ...,
"./vendor/livewire/flux-pro/stubs/**/*.blade.php",
"./vendor/livewire/flux/stubs/**/*.blade.php", ], ... }
If you don't have Tailwind installed, you can learn how to install it on the
Tailwind website.
Note: Flux is not compatible with the
tailwindcss/forms
plugin.
5
Use the Inter font family
Although completely optional, we recommend using the Inter font family for your
application.
Add the following to the
head
tag in your layout file to ensure the font is loaded:
Copy to clipboard
<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" /> </head>
You can configure Tailwind to use this font family in your
tailwind.config.js
file:
Copy to clipboard
module.exports = { ... theme: { fontFamily: { sans: ['Inter', 'sans-serif'], },
}, }
PUBLISHING COMPONENTS
To keep things simple, you can use the internal Flux components in your Blade
files directly. However, if you'd like to customize a specific Flux component,
you can publish its blade file(s) into your project using the following Artisan
command:
Copy to clipboard
php artisan flux:publish
You will be prompted to search and select which components you want to publish.
If you want to publish all components at once, you can use the
--all
flag.
Learn more about customizing Flux ->
KEEPING FLUX UPDATED
To ensure you have the latest version of Flux, regularly update your composer
dependencies:
Copy to clipboard
composer update livewire/flux livewire/flux-pro
If you've published Flux components, make sure to check the changelog for any
breaking changes before updating:
Flux release notes (changelog) ->
ACTIVATING IN CI
If you are using Flux in a CI environment without an
auth.json
file, you can add the following environment variables and command to your CI
script:
Copy to clipboard
composer config http-basic.composer.fluxui.dev "${FLUX_USERNAME}"
"${FLUX_LICENSE_KEY}"
ACTIVATING USING LARAVEL FORGE
If you are using Laravel Forge, you can take advantage of their built in
Packages feature for authenticating private composer packages.
Laravel Forge allows you to manage packages on a server or site level. If you
have multiple sites using Flux, then it's recommended to manage Packages on the
server level.
To authenticate Flux, head over to the packages page on either the server or
site. You will then see the following:
Click the "Add Credential" button to authenticate with a new private composer
package and enter the following details:
* Enter
composer.fluxui.dev
as the Repository URL
* Enter your Flux account email as the username
* Enter your Flux license key as the password
Finally, click the "Save" button. You should now be authenticated with the Flux
private composer server and be able install Flux using
composer require livewire/flux-pro
For more information, please refer to the Laravel Forge Packages documentation.
USING DARK MODE
If you are installing Flux in a project that uses classes such as
.dark
for toggling dark mode—instead of detecting a user's operating system
preference—you will need to add the following to your
tailwind.config.js
file:
Copy to clipboard
module.exports = { darkMode: 'selector', ... }
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie
On this page
On this page
Introduction
Prerequisites
Getting started
Publishing components
Keeping Flux updated
Activating in CI
Activating using Laravel Forge
Using dark mode