PHPackages joshcirre/tweakflux - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [CLI & Console](/categories/cli) 4. / 5. joshcirre/tweakflux ActiveLibrary[CLI & Console](/categories/cli) joshcirre/tweakflux =================== Deep theming for Flux UI. Override Tailwind v4 CSS custom properties to transform every Flux component. v1.6.0(3mo ago)1112.1k↑222.2%3MITPHPPHP ^8.2 Since Feb 11Pushed 3mo agoCompare [ Source](https://github.com/joshcirre/tweakflux)[ Packagist](https://packagist.org/packages/joshcirre/tweakflux)[ RSS](/packages/joshcirre-tweakflux/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (2)Versions (22)Used By (0) TweakFlux ========= [](#tweakflux) Deep theming for [Flux UI](https://fluxui.dev). Override Tailwind v4 CSS custom properties to transform every Flux component — free and pro — with a single command. Zero vendor files touched. Installation ------------ [](#installation) ### Global (recommended) [](#global-recommended) ``` composer global require joshcirre/tweakflux ``` Then run from any project: ``` tweakflux apply bubblegum ``` ### Per-project [](#per-project) ``` composer require joshcirre/tweakflux --dev ``` Then run via vendor bin: ``` ./vendor/bin/tweakflux apply bubblegum ``` The `apply` command generates the theme CSS at `resources/css/tweakflux-theme.css` and automatically adds the import to your `resources/css/app.css`. With Vite running, you'll see the changes instantly. If `app.css` doesn't exist, the command prints the import and font URLs for you to add manually. Commands -------- [](#commands) CommandDescription`tweakflux apply {theme?}`Apply a theme (interactive picker if no name given)`tweakflux apply {theme} --no-effects`Apply a theme without visual effects (if applicable)`tweakflux list`List all available themes`tweakflux create {name}`Scaffold a new theme JSON file`tweakflux boost`Copy Boost guidelines and skills into your projectPreset Themes ------------- [](#preset-themes) ThemeDescription**Default**Flux defaults — zinc neutrals, standard radius, Inter font**Bubblegum**Playful pink accents with warm rose-tinted neutrals and rounded corners**Brutalist**Sharp corners, hard shadows, high contrast monospace aesthetic**Catppuccin**Soothing pastel purple and lavender tones from the popular dev theme**Claude**Warm terra cotta and cream tones inspired by Anthropic's Claude**Coffee**Warm brown and gold tones with a cozy coffeehouse feel**Dracula**The iconic dark palette with vibrant pastels on deep purple-gray backgrounds**Forest**Warm earthy greens with stone-tinted neutrals and muted shadows**Laravel**Boxy cards, pure neutral grays, and the iconic red — modeled after laravel.com**Neon**Hackerman terminal aesthetic with vivid green glow effects on dark backgrounds**Nord**Arctic-inspired muted blue-gray palette with clean, minimal aesthetics**Ocean**Cool blue-tinted slate palette with sky accents**Perpetuity**Monospace teal aesthetic with tight shadows and minimal rounding**Posty**PostHog-inspired raised buttons, warm creams, and amber accents**Posty Charcoal**Muted slate Posty variant with raised buttons, cool grays, and violet-slate accents**Posty Fresh**Mint green Posty variant with raised buttons, fresh neutrals, and emerald accents**Posty Ice**Cool blue Posty variant with raised buttons, icy neutrals, and sky blue accents**Retro**Warm vintage parchment tones with salmon and sage green accents**Sunset**Warm coral and orange tones inspired by golden hour horizons**Synthwave**Neon 80s retrowave with hot pink accents on deep purple backgroundsCreating Your Own Theme ----------------------- [](#creating-your-own-theme) ``` tweakflux create my-theme ``` This scaffolds a JSON file at `resources/themes/my-theme.json`. Set any value to `null` to keep the Flux default. Only override what you need. ``` { "fonts": { "sans": "Quicksand, sans-serif", "urls": ["https://fonts.googleapis.com/css2?family=Quicksand:wght@400..700&display=swap"] }, "light": { "accent": "oklch(0.65 0.24 350)" }, "radius": { "lg": "1rem" } } ``` Effects ------- [](#effects) Some themes include visual effects like glows and animations. These are stored in the `effects` field (separate from `css`) so users can toggle them off. When applying a theme with effects, the CLI will ask if you'd like to disable them. You can also skip the prompt: ``` # Apply with effects (default) tweakflux apply neon # Apply without effects tweakflux apply neon --no-effects ``` When creating a theme, use `effects` for decorative CSS that users might want to disable (hover glows, animated borders) and `css` for structural CSS that is essential to the theme's identity (raised buttons, custom borders). ``` { "css": null, "effects": "/* Glow on button hover */\n[data-flux-button]:hover {\n box-shadow: 0 0 12px oklch(0.83 0.28 142 / 0.3);\n}" } ``` Path Conventions ---------------- [](#path-conventions) All paths are relative to your project root (cwd): PathPurpose`./resources/themes/`User theme JSON files`./resources/css/tweakflux-theme.css`Generated CSS output`./resources/css/app.css`CSS entry point (for import injection)Using with Flux's Built-in Theming ---------------------------------- [](#using-with-fluxs-built-in-theming) TweakFlux replaces Flux's manual `@theme` theming approach. If you already have `@theme` or `@layer theme` blocks in your `app.css` for Flux colors/accents, TweakFlux will override them — the import is appended to the end of your CSS file so it always takes precedence. You can safely remove any existing Flux `@theme` color blocks from `app.css` once you're using TweakFlux, since TweakFlux manages the same variables through its JSON themes. Published Flux components (`php artisan flux:publish`) work seamlessly — they read the same CSS custom properties that TweakFlux overrides. How It Works ------------ [](#how-it-works) Flux UI components resolve their styles through Tailwind v4 CSS custom properties. TweakFlux generates a stylesheet that overrides these properties at `:root` (and `.dark` for dark mode), so every component picks up the changes natively — no patches, no vendor modifications. The generated CSS uses Flux's own `@layer theme` pattern for dark mode, ensuring proper specificity and compatibility. What You Can Override --------------------- [](#what-you-can-override) - **Fonts** — sans, mono, serif families + Google Fonts URLs - **Colors** — accent, accent-content, accent-foreground, full zinc palette, semantic colors - **Radius** — sm, md, lg, xl, 2xl - **Shadows** — 2xs through 2xl - **Spacing** — base spacing unit - **Dark mode** — separate light/dark palettes per theme - **Custom CSS** — structural CSS always included (e.g., button shapes, layout overrides via `[data-flux-button]` selectors) - **Effects** — toggleable visual effects (glows, animations) that users can disable with `--no-effects` AI Theme Generation ------------------- [](#ai-theme-generation) TweakFlux ships with AI guidelines and a skill for [Laravel Boost](https://laravel.com/docs/boost) that lets your coding agent generate themes from descriptions, color palettes, screenshots, or brand guidelines. Run `tweakflux boost` to copy the guidelines and skills into your project, then ask your AI agent things like: - "Create a TweakFlux theme inspired by Spotify" - "Generate a theme from this color palette: #1a1a2e, #16213e, #0f3460, #e94560" - "Make a warm earth-tones theme with serif fonts" The agent will generate a valid theme JSON file and apply it for you. Requirements ------------ [](#requirements) - PHP 8.2+ - Flux UI (free or pro) - Tailwind CSS v4 License ------- [](#license) MIT ### Health Score 50 — FairBetter than 96% of packages Maintenance82 Actively maintained with recent releases Popularity37 Limited adoption so far Community11 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 90.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 20 Last Release 94d ago Major Versions v0.7.0 → v1.0.02026-02-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/e649f8d73257941573d972ca3d263116738b8b4de708d54ad107e17c38522dd2?d=identicon)[joshcirre](/maintainers/joshcirre) --- Top Contributors [![joshcirre](https://avatars.githubusercontent.com/u/8452303?v=4)](https://github.com/joshcirre "joshcirre (28 commits)")[![clivesbot](https://avatars.githubusercontent.com/u/258909935?v=4)](https://github.com/clivesbot "clivesbot (2 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (1 commits)") --- Tags clifluxlivewiretailwindtheming ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/joshcirre-tweakflux/health.svg) ``` [![Health](https://phpackages.com/badges/joshcirre-tweakflux/health.svg)](https://phpackages.com/packages/joshcirre-tweakflux) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9475.0M86](/packages/livewire-flux)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[tightenco/takeout Manage your dev dependencies with simple one-off Docker containers. 1.6k20.9k](/packages/tightenco-takeout)[churchtools/changelogger CLI Tool for creating consistent and committable changelog entries. 3415.3k1](/packages/churchtools-changelogger)[mwguerra/web-terminal A web-based terminal component for Filament/Laravel with command whitelisting and multiple connection types 251.1k](/packages/mwguerra-web-terminal) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)