Brutalist
Bubblegum
Catppuccin
Claude
Coffee
Default
Dracula
Forest
Nord
Ocean
Retro
Sunset
Synthwave
Works with every Flux component, free and pro

Tweak your Flux components.
Make them yours. |

TweakFlux overrides Tailwind v4 CSS custom properties at :root level. Radius, shadows, fonts, the entire color palette. All 43 Flux components transform instantly. One command. Zero vendor files touched.

Star on GitHub
1
>_ composer require joshcirre/tweakflux
>_ php artisan tweakflux:apply default
And that's it. Refresh your browser.
Zero Vendor Modifications
Tailwind v4 Native
Free + Pro Components
13 Preset Themes
Every Flux component. Themed.
All 43 components work out of the box. Free and pro. Every Laravel starter kit too.
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
Flux Free
Flux Pro
All Laravel Starter Kits

Flux is the official Livewire component library that ships with every Laravel starter kit. TweakFlux gives you deep control over how it looks, whether you're on the free tier or pro.

Live theme preview
Pick a theme and watch every component update in real time.
Component Preview
Acme Inc.
JD
John Doe
john@acme.com
Dashboard
Total Revenue
$45,231
+12.5%
vs last month
New Customers
+2,350
+18.2%
vs last month
Active Users
12,789
+2.1%
vs last month
Growth Rate
4.5%
+0.3%
vs last month
Name
Email
Role
Status
Revenue
Alice Johnson alice@example.com Admin
Active
$12,450
Bob Smith bob@example.com Editor
Active
$8,320
Carol White carol@example.com Viewer
Inactive
$3,890
Dan Rivera dan@example.com Editor
Active
$6,721
Eve Martinez eve@example.com Admin
Active
$15,200
Buttons
Inputs
Name
Email
Password
Search
Disabled
With description A helpful hint.
Select
Role Status
Typography
Extra Large Heading
Large Heading
Default Heading
This is a subheading with supporting text.

Regular body text for paragraphs and descriptions.

Checkboxes, Radios & Switches
 Accept terms
Send newsletter
Disabled
Plan
Free
Pro
Enterprise
Notifications Dark mode Disabled
Badges
Default
Success
Error
Warning
Info
Purple
Pink
Zinc
Small
Large
Callouts
This is a default callout with helpful information.
Something went wrong. Please try again.
Be careful with this action.
Modal
Confirm Action

Are you sure you want to proceed? This action cannot be undone.
Dropdown
Table
Name
Email
Status
Alice Johnson alice@example.com
Active
Bob Smith bob@example.com
Inactive
Tabs
Accordion
TweakFlux overrides Tailwind v4 CSS custom properties to deeply theme every Flux component.
Yes, all 43 components are supported — both free and pro.
No. TweakFlux works at the CSS layer. Zero vendor files touched.
Tooltip
This is a tooltip
Another tooltip
Separator

Content above the separator.

Content below the separator.

or

Separator with label text.

One command. Every component transforms.
No build pipeline changes. No vendor overrides. No ejecting.
~/my-project
$ php artisan tweakflux:apply default
Theme "default" applied to public/css/tweakflux-theme.css
$ # Or create your own
$ php artisan tweakflux:create my-theme
Theme scaffolded at resources/themes/my-theme.json
$ # Or let AI generate one for you
$ php artisan boost:install
Ships a Laravel Boost skill — ask your AI agent to generate themes from any inspiration.

Pick from 13 presets or scaffold your own JSON file. Only override what you need — everything else stays default.

How it works under the hood
Tailwind v4 resolves utility classes to CSS custom properties. TweakFlux overrides them at :root.
Deep CSS Variable Override
Override every design token at :root. Every Flux component reads these natively — no patches.
:root {
--radius-lg : 1rem ;
--shadow-xs : 0 1px 2px pink ;
--font-sans : Quicksand ;
--color-accent : oklch(0.65 0.24 350) ;
--color-zinc-50 : oklch(0.98 0.005 350) ;
}
JSON Theme Schema
Simple JSON. Set a value to null to keep the default. Only specify what you change.
{
"radius" : {
"lg" : "1rem" ,
"xl" : null // keep default
},
"fonts" : { "sans" : "Quicksand" }
}
Dark Mode Support
Separate light and dark palettes per theme. Matches Flux's own CSS layer pattern.
@layer theme {
.dark {
--color-accent : oklch(0.80 0.15 80) ;
--color-zinc-50 : oklch(0.20 0.01 350) ;
}
}
Artisan CLI
Three commands for the full workflow. Apply, explore, and create.
$ tweakflux:apply bubblegum
$ tweakflux:list
$ tweakflux:create my-theme