URL: https://fluxui.dev/docs/installation
Overview: Covers how to install Flux (via Composer), set up Tailwind CSS and the Inter font, activate Flux Pro, and publish assets or components. Also includes instructions for integration with Forge, GitHub Actions, CI environments, and nginx setup. (fluxui.dev)
On this page: Prerequisites, Getting started (Install Flux, Pro, assets, Tailwind, Inter font), Publishing components, Keeping Flux updated, Activating via Forge, Laravel Cloud, GitHub Actions, CI, Configuring nginx.
URL: https://fluxui.dev/docs/upgrading
Overview: A step‑by‑step resource for migrating from Flux v1.x to v2.x—including prerequisite versions, updating Composer dependencies, replacing directives, adjusting Tailwind config, migrating accent colours and grey assignments, disabling dark mode handling, and renaming components. (fluxui.dev)
On this page: Prerequisites, Update Flux, Rename @fluxStyles, Clear view cache, Tailwind config, Migrating accent colours, Re‑assigning gray, Dark mode changes, Rename components.
URL: https://fluxui.dev/docs/principles
Overview: Describes the design philosophy behind Flux—detailing its commitment to simplicity, composability, friendliness, consistency, brevity, use of browser & CSS features, and the styling vs spacing approach. (fluxui.dev)
On this page: Simplicity, Complexity, Friendliness, Composition, Consistency, Brevity, Use the browser, Use CSS, We style/you space.
URL: https://fluxui.dev/docs/patterns
Overview: Explains Flux’s internal conventions such as distinguishing props vs attributes, class merging behaviours, split attribute forwarding, common props (variant, icon, size, kbd, inset), prop forwarding, shorthand syntax, data binding, and component grouping. (fluxui.dev)
On this page: Props vs attributes, Class merging, Dealing with class merging conflicts, Split attribute forwarding, Common props, Component Groups.
URL: https://fluxui.dev/docs/theming
Overview: Guides on customising the Flux theme—selecting base and accent colours, using an interactive theme builder, defining CSS variables in @theme and @layer blocks, and opting out of accent usage via props. (fluxui.dev)
On this page: Base color, Accent color, Accent props.
URL: https://fluxui.dev/docs/dark-mode
Overview: Details how to enable and manage dark mode through Tailwind selector strategy, disable built‑in Flux handling, and use Flux’s JavaScript/Alpine utilities ($flux.appearance, $flux.dark) alongside example components (toggle button, dropdown menu, switch, segmented radio). (fluxui.dev)
On this page: Set up Tailwind, Disabling Flux dark mode, JavaScript utilities, Examples (toggle button, dropdown menu, toggle switch, segmented radio).
URL: https://fluxui.dev/docs/customization
Overview: Explores multiple levels of customisation—adding Tailwind overrides, publishing components for deeper edits, and applying global style overrides using data‑flux attributes and Tailwind’s @apply directive. (fluxui.dev)
On this page: Tailwind overrides, Publishing components, Global style overrides.
URL: https://fluxui.dev/docs/help
Overview: Lists where to seek support—reporting bugs, filing feature requests via GitHub, and contacting support for billing/licensing queries. (fluxui.dev)
On this page: Submit a bug report, Feature request, Help with billing/licensing.
URL: https://fluxui.dev/docs/layouts/header
Overview: Provides a layout component for top navigation headers in applications, supporting branding, navigation items, and custom styling. ([fluxui.dev/docs/layouts/header])
On this page: Header, Secondary sidebar
URL: https://fluxui.dev/docs/layouts/sidebar
Overview: Offers a mobile-friendly sidebar app layout component—ideal for vertical navigation using navlists and collapsible groups. ([fluxui.dev/docs/layouts/sidebar])
On this page: Secondary header, flux:sidebar.toggle
Here are the first eight Flux components captured in the requested format, with link numbering continuing from 9. I’ve pulled each component’s URL, concise overview, and a list of the sections (“On this page”) exactly as they appear in the sidebar and page headings. Let me know when you’d like me to continue with the remaining components.
URL: https://fluxui.dev/components/accordion
Overview: Collapse and expand sections of content. Perfect for FAQs and content-heavy areas. (fluxui.dev)
On this page: Shorthand, With transition, Disabled, Exclusive, Expanded, Leading icon, Reference (flux:accordion, flux:accordion.item, flux:accordion.heading, flux:accordion.content)
URL: https://fluxui.dev/components/autocomplete
Overview: Enhance an input field with autocomplete suggestions. Autocomplete suggests text as you type and inserts the selected suggestion directly into the input field. It does not support a value attribute. (fluxui.dev)
On this page: Related components, Reference (flux:autocomplete, flux:autocomplete.item)
URL: https://fluxui.dev/components/avatar
Overview: Display an image or initials as an avatar. (fluxui.dev)
On this page: Tooltip, Initials, Size, Icon, Colors, Auto color, Circle, Badge, Groups, As button, As link, Examples
URL: https://fluxui.dev/components/badge
Overview: Highlight information like status, category, or count. (fluxui.dev)
On this page: Sizes, Icons, Pill variant, As button, With close button, Colors, Solid variant, Inset, Related components, Reference (flux:badge, flux:badge.close)
URL: https://fluxui.dev/components/brand
Overview: Display your company or application’s logo and name in a clean, consistent way across your interface. (fluxui.dev)
On this page: Logo slot, Logo only, Examples, Related components, Reference (flux:brand)
URL: https://fluxui.dev/components/button
Overview: A powerful and composable button component for your application. (fluxui.dev)
On this page: Variants, Colors, Sizes, Icons, Loading, Full width, Button groups, Icon group, Attached button, As a link, As an input, Square, Inset, Related components, Reference (flux:button, flux:button.group)
URL: https://fluxui.dev/components/breadcrumbs
Overview: Help users navigate and understand their place within your application. (fluxui.dev)
On this page: With slashes, With icon, With ellipsis, With ellipsis dropdown, Reference (flux:breadcrumbs, flux:breadcrumbs.item)
URL: https://fluxui.dev/components/calendar
Overview: A flexible calendar component for date selection. Supports single dates, multiple dates, and date ranges. Perfect for scheduling and booking systems. (fluxui.dev)
On this page: Basic Usage, Multiple dates, Date range, Range Configuration, Size, Static, Min/max dates, Unavailable dates, With today shortcut, Selectable header, Fixed weeks, Start day, Open to, Week numbers, Localization, The DateRange object, Instantiation, Persisting to the session, Using with Eloquent, Available methods, Reference (flux:calendar, DateRange Object)
URL: https://fluxui.dev/components/callout
Overview: Highlight important information or guide users toward key actions. (fluxui.dev)
On this page: Icon inside heading, With actions, Inline actions, Dismissible, Variants, Colors, Custom icon, Examples, Related components, Reference (flux:callout, flux:callout.heading, flux:callout.text, flux:callout.link)
URL: https://fluxui.dev/components/card
Overview: A container for related content, such as a form, alert, or data list. (fluxui.dev)
On this page: Small card, Header actions, Simple card, Related components, Reference (flux:card)
URL: https://fluxui.dev/components/chart
Overview: Flux’s Chart component is a lightweight, zero-dependency tool for building charts in your Livewire applications. Currently supports line and area charts with more types planned. (fluxui.dev)
On this page: Data structure, Line chart, Area chart, Multiple lines, Live summary, Sparkline, Dashboard stat, Chart padding, Axis scale, Axis lines, Zero line, Grid lines
URL: https://fluxui.dev/components/checkbox
Overview: Select one or multiple options from a set. (fluxui.dev)
On this page: Checkbox group, With descriptions, Horizontal fieldset, Check-all, Checked, Disabled, Checkbox cards (Pro), Vertical cards (Pro), Cards with icons (Pro), Custom card content (Pro), Pills (Pro), Buttons (Pro), Related components, Reference (flux:checkbox, flux:checkbox.group, flux:checkbox.all)
URL: https://fluxui.dev/components/command
Overview: A searchable list of commands. (fluxui.dev)
On this page: As a modal, Reference (flux:command, flux:command.input, flux:command.items, flux:command.item)
URL: https://fluxui.dev/components/context
Overview: Dropdown menus that open when right-clicking a designated area. (fluxui.dev)
On this page: Related components, Reference (flux:context)
URL: https://fluxui.dev/components/date-picker
Overview: Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or scheduling events. (fluxui.dev)
On this page: Basic usage, Input trigger, Range picker, Range limits, Range with inputs, Presets, Available presets, All time, Custom range preset, With today shortcut, Selectable header, Fixed weeks, Start day, Open to, Week numbers, Localization, The DateRange object, Instantiation, Persisting to the session, Using with Eloquent, Available methods, Range presets, Related components, Reference (flux:date-picker)
URL: https://fluxui.dev/components/dropdown
Overview: A composable dropdown component for simple navigation menus or complex action menus with submenus, checkboxes, and radios. (fluxui.dev)
On this page: Navigation menus, Positioning, Offset & gap, Keyboard hints, Checkbox items, Radio items, Groups, Groups with headings, Submenus, Keep open, Related components, Reference (flux:dropdown, flux:menu, flux:menu.item, flux:menu.submenu, flux:menu.separator, flux:menu.checkbox, flux:menu.radio)
URL: https://fluxui.dev/components/editor
Overview: A basic rich text editor powered by ProseMirror and Tiptap, loaded on demand to avoid bloating the core bundle. (fluxui.dev)
On this page: Toolbar, Configuring items, Custom items, Customization, Height, Shortcut keys, Markdown syntax, Localization, Extensions, Set up listener, Registering extensions, Disabling extensions, Accessing the instance, Related components, Reference (flux:editor, flux:editor.toolbar, flux:editor.button, flux:editor.content, toolbar items)
URL: https://fluxui.dev/components/field
Overview: Encapsulate input elements with labels, descriptions, and validation. (fluxui.dev)
On this page: Shorthand props, With trailing description, With badge, Split layout, Fieldset, Related components, Reference (flux:field, flux:label, flux:description, flux:error, flux:fieldset, flux:legend)
URL: https://fluxui.dev/components/heading
Overview: A consistent heading component for your application. (fluxui.dev)
On this page: Sizes, Heading level, Examples, Related components, Reference (flux:heading, flux:text)
URL: https://fluxui.dev/components/icon
Overview: Flux uses the Heroicons project for its icon collection. (fluxui.dev)
On this page: Variants, Sizes, Color, Loading spinner, Dynamic icons, Lucide icons, Custom icons, Related components, Reference (flux:icon.*)
URL: https://fluxui.dev/components/input
Overview: Capture user data with various forms of text input. (fluxui.dev)
On this page: Shorthand, Class targeting, Types, File, Smaller, Disabled, Readonly, Invalid, Input masking, Icons, Icon buttons, Clearable, copyable, and viewable inputs, Keyboard hint, As a button, With buttons, Text prefixes and suffixes, Input group labels, Related components, Reference (flux:input, flux:input.group, flux:input.group.prefix, flux:input.group.suffix)
URL: https://fluxui.dev/components/modal
Overview: Display content in a layer above the main page. Ideal for confirmations, alerts, and forms. (fluxui.dev)
On this page: Unique modal names, Livewire methods, JavaScript methods, Data binding, Close events, Cancel events, Disable click outside, Confirmation, Flyout, Flyout positioning, Related components, Reference (flux:modal, flux:modal.trigger, flux:modal.close)
URL: https://fluxui.dev/components/navbar
Overview: Arrange navigation links vertically or horizontally. (fluxui.dev)
On this page: Detecting the current page, With icons, With badges, Dropdown navigation, Navlist (sidebar), Navlist group, Collapsible groups, Navlist badges, Related components, Reference (flux:navbar, flux:navbar.item, flux:navlist, flux:navlist.item, flux:navlist.group)
URL: https://fluxui.dev/components/pagination
Overview: Display a series of buttons to navigate through a list of items. (fluxui.dev)
On this page: Simple paginator, Large result set, Related components, Reference (flux:pagination)
URL: https://fluxui.dev/components/popper
Overview: Show extra content in a popup on click or hover. (fluxui.dev)
On this page: Hover trigger, Position, Gap & offset, Examples, Related components, Reference (flux:dropdown, flux:popover)
URL: https://fluxui.dev/components/profile
Overview: Display a user’s profile with an avatar and optional name in a compact, interactive component. (fluxui.dev)
On this page: With name, Without chevron, Circle avatar, Avatar with initials, Custom trailing icon, Examples, Related components, Reference (flux:profile)
URL: https://fluxui.dev/components/radio
Overview: Select one option from a set of mutually exclusive choices. Perfect for single-choice questions and settings. (fluxui.dev)
On this page: With descriptions, Within fieldset, Segmented, Segmented with icons, Radio cards, Vertical cards, Cards with icons, Cards without indicators, Custom card content, Pills, Buttons, Related components, Reference (flux:radio.group, flux:radio, flux:radio.indicator)
URL: https://fluxui.dev/components/select
Overview: Choose a single option from a dropdown list. (fluxui.dev)
On this page: Small, Custom select, The button slot, Clearable, Options with images/icons, Searchable select, The search slot, Multiple select, Selected suffix, Checkbox indicator, Clearing search, Combobox, The input slot, Dynamic options, Related components, Reference (flux:select, flux:select.option, flux:select.button, flux:select.input, flux:select.search)
URL: https://fluxui.dev/components/separator
Overview: Visually divide sections of content or groups of items. (fluxui.dev)
On this page: With text, Vertical, Limited height, Subtle, Reference (flux:separator)
URL: https://fluxui.dev/components/switch
Overview: Toggle a setting on or off. Suitable for binary options such as enabling or disabling features. (fluxui.dev)
On this page: Fieldset, Left align, Related components, Reference (flux:switch)
URL: https://fluxui.dev/components/table
Overview: Display structured data in a condensed, searchable format. (fluxui.dev)
On this page: Simple, Pagination, Sortable, Related components, Reference (flux:table, flux:table.columns, flux:table.column, flux:table.rows, flux:table.row, flux:table.cell)
URL: https://fluxui.dev/components/tabs
Overview: Organise content into separate panels within a single container. Easily switch between sections without leaving the page. (fluxui.dev)
On this page: With icons, Padded edges, Segmented tabs, Segmented with icons, Small segmented tabs, Pill tabs, Dynamic tabs, Related components, Reference (flux:tab.group, flux:tabs, flux:tab, flux:tab.panel)
URL: https://fluxui.dev/components/text
Overview: Consistent typographical components for body copy and links throughout your application. (fluxui.dev)
On this page: Size, Color, Link, Link variants, Related components, Reference (flux:text, flux:link)
URL: https://fluxui.dev/components/textarea
Overview: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback. (fluxui.dev)
On this page: With placeholder, Fixed row height, Auto-sizing textarea, Configure resize, Related components, Reference (flux:textarea)
URL: https://fluxui.dev/components/toast
Overview: A message that provides feedback to users about an action or event, often temporary and dismissible. (fluxui.dev)
On this page: With heading, Variants, Positioning, Duration, Permanent, Related components, Reference (flux:toast, Flux::toast(), $flux.toast())
URL: https://fluxui.dev/components/tooltip
Overview: Provide additional information when users hover over or focus on an element. (fluxui.dev)
On this page: Info tooltip, Position, Disabled buttons, Related components, Reference (flux:tooltip, flux:tooltip.content)