Brutalist
Bubblegum
Catppuccin
Claude
Coffee
Default
Dracula
Forest
Laravel
Neon
Nord
Ocean
Perpetuity
Posty Charcoal
Posty Fresh
Posty Ice
Posty
Retro
Sunset
Synthwave
Works with every Flux component, free and pro

Tweak your Flux components.
Make them yours. |

Pick a theme or build your own. Colors, fonts, radius, and shadows update across every Livewire Flux component from a single JSON file. No vendor files. No build changes. Just your app, your way.

Star on GitHub
112
>_ composer global require joshcirre/tweakflux
>_ tweakflux apply default
And that's it. Refresh your browser.
Zero Vendor Modifications
Tailwind v4 Native
Free + Pro Components
20+ Preset Themes
Every Flux component. Themed.
All 45 components work out of the box. Free and pro. The official Livewire 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 Progress Radio Select Separator Skeleton Slider Switch Table Tabs Text Textarea Time Picker Timeline Toast Tooltip
Flux Free
Flux Pro
Official Livewire Starter Kit

Flux is the official Livewire component library that ships with the official Livewire 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
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 45 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
Progress
Storage
75%
Timeline
  1. Order placed

    Your order has been confirmed.

  2. Processing

    Package is being prepared.

  3. Shipped

    In transit to your address.

  4. Delivered

    Estimated arrival tomorrow.

Separator

Content above the separator.

Content below the separator.

or

Separator with label text.

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

Pick from 20+ 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
Tweak with AI
Tweaking current theme

Tweak the current theme with AI

Try "make the accents warmer" or "rounder corners"

Using Claude Code?

Run tweakflux boost to install the AI skill, then describe a theme directly in your editor.