PHPackages wishborn/fancy-flux - 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. [Utility & Helpers](/categories/utility) 4. / 5. wishborn/fancy-flux ActiveLibrary[Utility & Helpers](/categories/utility) wishborn/fancy-flux =================== Custom Flux UI components - carousel, color-picker, and emoji-select 1.0.22(1mo ago)3157↑750%MITBladePHP ^8.2 Since Jan 17Pushed 2mo agoCompare [ Source](https://github.com/wishborn/fancy)[ Packagist](https://packagist.org/packages/wishborn/fancy-flux)[ RSS](/packages/wishborn-fancy-flux/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (8)Versions (23)Used By (0) [![Guided by Tynn](https://camo.githubusercontent.com/97727232c39047fd5bfb4ced1671ef413344467ad145e1665e2477e6bcd2abfc/68747470733a2f2f696d672e736869656c64732e696f2f656e64706f696e743f75726c3d687474707325334125324625324674796e6e2e61692532467525324677697368626f726e253246666c75782d64657625324662616467652e6a736f6e)](https://tynn.ai/u/wishborn/flux-dev)[![Latest Version](https://camo.githubusercontent.com/fa7812a28d65514df27e5cad6f330113af07eb9c32eeb03b4af255f83f20860d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f77697368626f726e2f66616e63792d666c75783f7374796c653d666c61742d737175617265)](https://github.com/wishborn/fancy-flux/releases)[![License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE) Fancy Flux ========== [](#fancy-flux) Custom Flux UI components for Laravel Livewire applications. [![Fancy Flux Components](docs/screenshot.png)](docs/screenshot.png) Components ---------- [](#components) ### ⚡ Action [](#-action) A reusable button component with standalone colors, behavioral states, shape variants, avatars, badges, icons, emojis, and flexible placement. **Quick Example:** ``` Edit Hot! Alerts John ``` [📖 Full Documentation](docs/action.md) | [💡 Examples](demos/action-examples/) --- ### 🎠 Carousel [](#-carousel) A flexible carousel/slideshow component with multiple variants: - **Directional** - Navigation with prev/next arrows, supports autoplay - **Wizard** - Step-based navigation with numbered indicators, perfect for multi-step forms - **Thumbnail** - Image-based navigation with preview thumbnails **Quick Example:** ``` ``` [📖 Full Documentation](docs/carousel.md) | [💡 Examples](demos/basic-carousel/) --- ### 🎨 Color Picker [](#-color-picker) A native color input component with enhanced UI, swatch preview, and preset support. **Quick Example:** ``` ``` [📖 Full Documentation](docs/color-picker.md) | [💡 Examples](demos/color-picker-examples/) --- ### 😀 Emoji [](#-emoji) Display emojis using slugs, classic emoticons, or raw characters - like `flux:icon` but for emoji. **Quick Example:** ``` {{-- 🔥 from slug --}} {{-- 😊 from emoticon --}} ``` [📖 Full Documentation](docs/emoji.md) --- ### 🎯 Emoji Select [](#-emoji-select) A composable emoji picker component with category navigation, search, and customizable styling. **Quick Example:** ``` ``` [📖 Full Documentation](docs/emoji-select.md) | [💡 Examples](demos/emoji-select-examples/) --- ### 📅 Timeline [](#-timeline) Interactive narrative timelines powered by [TimelineJS3](https://timeline.knightlab.com/). Supports eras, groups, media, lazy loading in carousels, and dark mode. **Quick Example:** ``` {{-- Shorthand with just events --}} {{-- Named with custom controls --}} ``` [📖 Full Documentation](docs/timeline.md) | [💡 Examples](demos/timeline-examples/) --- ### 📈 D3 Visualizations (Moved to Fancy Pro) [](#-d3-visualizations-moved-to-fancy-pro) > **Note:** D3 visualizations have been moved to the [wishborn/fancy-pro](https://github.com/wishborn/fancy-pro) package for better separation of premium features. ``` composer require wishborn/fancy-pro ``` --- ### 📊 Fancy Table [](#-fancy-table) Advanced data table with composable architecture, expandable row trays, and Carousel-powered pagination. > **Note:** Named `` to avoid conflicts with official Flux Pro table component. **Quick Example:** ``` {{-- Data-driven mode --}} {{-- Composable mode --}} {{ $row->name }} {{ $row->email }} ``` **Features:** - Data-driven and composable slot-based modes - Sortable, resizable, and reorderable columns - Expandable row trays with nested content support - Multi-select with `wire:model` binding - Search with deep path query support - Carousel-powered pagination [📖 Full Documentation](docs/table.md) --- FANCY Facade ------------ [](#fancy-facade) The `FANCY` facade provides programmatic access to FancyFlux features: ``` // Emoji lookup (787+ emojis with slug-based access) FANCY::emoji('fire'); // Returns: 🔥 FANCY::emoji(':)'); // Returns: 😊 (emoticon support!) FANCY::emoji()->list(); // Get all emoji slugs FANCY::emoji()->search('heart'); // Search emojis FANCY::emoji()->emoticons(); // Get all supported emoticons // Carousel control FANCY::carousel('wizard')->next(); FANCY::carousel('wizard')->goTo('step-3'); // Timeline control FANCY::timeline('my-timeline')->goToNext(); FANCY::timeline('my-timeline')->zoomIn(); FANCY::timeline('my-timeline')->add([...]); // Table control FANCY::table('users')->nextPage(); FANCY::table('users')->sortBy('name', 'asc'); FANCY::table('users')->toggleTray('row-1'); // Configuration FANCY::prefix(); // Custom prefix or null FANCY::components(); // List of components ``` [📖 Full Documentation](docs/facade.md) --- Installation ------------ [](#installation) ``` composer require wishborn/fancy-flux ``` ### Component Prefix Configuration [](#component-prefix-configuration) To avoid naming conflicts with official Flux components or other custom components, you can configure a custom prefix for Fancy Flux components. **Publish the config file:** ``` php artisan vendor:publish --tag=fancy-flux-config ``` **Configure in `config/fancy-flux.php`:** ``` return [ 'prefix' => 'fancy', 'use_flux_namespace' => true, 'enable_demo_routes' => false, ]; ``` **Configuration Priority:** Configuration is loaded in this order (later values override earlier ones): 1. **Default PHP config** (`config/fancy-flux.php`) - Base defaults 2. **Environment variables** (`.env`) - **Highest priority**, overrides PHP config **Environment Variables (Optional Override):** You can override PHP config with environment variables for environment-specific settings: ``` FANCY_FLUX_PREFIX=fancy FANCY_FLUX_USE_FLUX_NAMESPACE=true FANCY_FLUX_ENABLE_DEMO_ROUTES=false ``` **Usage Examples:** - **No prefix (default):** Components available as `` - **With prefix 'fancy':** Components available as `` (and optionally `` if `use_flux_namespace` is `true`) **Configuration Options:** - `prefix` - Custom prefix for components (e.g., `"fancy"`, `"custom"`, `"myapp"`). Set to `null` for no prefix. - `use_flux_namespace` - When `true`, components are also available in the `flux` namespace for backward compatibility. Set to `false` to use ONLY the prefixed namespace. - `enable_demo_routes` - When `true`, demo routes are loaded from the package at `/fancy-flux-demos/*`. Set to `false` to publish and customize routes yourself. **Why use a prefix?** - **Avoid conflicts:** If Flux releases an official `carousel` component, your prefixed version won't conflict - **Multiple packages:** If you use multiple custom Flux component packages, prefixes prevent conflicts - **Clear ownership:** Makes it clear which components are from Fancy Flux vs official Flux Documentation ------------- [](#documentation) - **[Usage Guide](USAGE.md)** - Comprehensive documentation for all components - **[Component Docs](docs/)** - Detailed guides for each component: - [Action](docs/action.md) - [Carousel](docs/carousel.md) - [Color Picker](docs/color-picker.md) - [Emoji](docs/emoji.md) - [Emoji Select](docs/emoji-select.md) - [Timeline](docs/timeline.md) - [Fancy Table](docs/table.md) - [FANCY Facade](docs/facade.md) - **[Prefix Configuration](docs/prefix-configuration.md)** - Configure custom component prefixes to avoid naming conflicts - **[Troubleshooting](TROUBLESHOOT.md)** - Common issues and solutions by version Demos ----- [](#demos) Ready-to-use examples are available in the `demos/` folder. Copy the demo files into your Laravel application to get started quickly: - **Action Examples** - State variants, icons, emojis, and placements - **Basic Carousel** - Simple data-driven carousel - **Wizard Form** - Multi-step form with validation - **Nested Carousel** - Nested carousels with parent advancement - **Dynamic Carousel** - Add/remove slides dynamically - **Color Picker Examples** - All color picker variants - **Emoji Select Examples** - All emoji select variants - **Timeline Examples** - Standalone, with controls, inside carousel See the [demos README](demos/README.md) for details. Laravel Boost Integration ------------------------- [](#laravel-boost-integration) Fancy Flux includes AI guidelines for [Laravel Boost](https://github.com/laravel/boost). When you install this package and run `php artisan boost:install`, Boost will automatically load the guidelines to help AI assistants generate correct code for Fancy Flux components. ### Custom AI Guidelines [](#custom-ai-guidelines) You can also add custom AI guidelines for Fancy Flux by creating a `.ai/guidelines/fancy-flux.md` file in your application. This allows you to customize how AI assistants understand and use Fancy Flux components in your specific project context. Upgrade Guide ------------- [](#upgrade-guide) ### General Upgrade Steps [](#general-upgrade-steps) 1. **Update via Composer:** ``` # Update to latest version composer update wishborn/fancy-flux # Or update to a specific version composer require wishborn/fancy-flux:^1.0.8 ``` 2. **Clear caches:** ``` php artisan config:clear php artisan view:clear ``` 3. **Review changelog:** Check [CHANGELOG.md](CHANGELOG.md) for version-specific changes 4. **Test your application:** Verify all components work as expected ### Upgrading to 1.0.8+ [](#upgrading-to-108) **New Feature: Component Prefix Configuration** Version 1.0.8 introduces optional component prefix configuration to avoid naming conflicts. This is **backward compatible** - existing code will continue to work without changes. **Optional: Configure a Prefix** If you want to use a custom prefix (recommended for new projects): 1. **Publish the config file:** ``` php artisan vendor:publish --tag=fancy-flux-config ``` 2. **Set prefix in `config/fancy-flux.php`:** ``` return [ 'prefix' => 'fancy', 'use_flux_namespace' => true, 'enable_demo_routes' => false, ]; ``` 3. **Clear config cache:** ``` php artisan config:clear ``` **No Action Required** If you don't configure a prefix, components continue to work exactly as before: - `` - Still works - `` - Still works - `` - Still works **Migration Path (Optional)** If you want to migrate to a prefixed namespace: 1. Set `FANCY_FLUX_PREFIX` and keep `FANCY_FLUX_USE_FLUX_NAMESPACE=true` 2. Gradually update templates to use the prefixed version 3. Once all templates are updated, optionally set `FANCY_FLUX_USE_FLUX_NAMESPACE=false` See [Prefix Configuration](docs/prefix-configuration.md) for detailed migration steps. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 10+ / 11+ / 12+ - Livewire 3.7+ / 4.0+ - Flux UI 2.0+ License ------- [](#license) MIT ### Health Score 45 — FairBetter than 92% of packages Maintenance87 Actively maintained with recent releases Popularity18 Limited adoption so far Community6 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~4 days Total 20 Last Release 45d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3af1e64dc359664cd7a3cc9f6f4030ec8bce17d587eff9f41a7ca84cfda2285a?d=identicon)[wishborn](/maintainers/wishborn) --- Top Contributors [![wishborn](https://avatars.githubusercontent.com/u/461446?v=4)](https://github.com/wishborn "wishborn (43 commits)") --- Tags laraveluicomponentsfluxlivewirecarouselcolor pickeremoji-select ### Embed Badge ![Health badge](/badges/wishborn-fancy-flux/health.svg) ``` [![Health](https://phpackages.com/badges/wishborn-fancy-flux/health.svg)](https://phpackages.com/packages/wishborn-fancy-flux) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9385.0M86](/packages/livewire-flux)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[ympact/flux-icons A package to provide icons from different vendors for Livewire Flux. 116.2k](/packages/ympact-flux-icons)[masmerise/livewire-toaster Beautiful toast notifications for Laravel / Livewire. 505550.3k6](/packages/masmerise-livewire-toaster)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)