> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devdeia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Filament UI Switcher

> Let users switch layout, color, font, and font size from a settings modal in the topbar.

<span className="inline-flex items-center gap-1 rounded-full border border-green-300 bg-green-50 px-3 py-1 text-xs font-semibold text-green-800">
  ★ Free · Open Source (MIT)
</span>

<p className="mt-3 text-lg text-gray-600 dark:text-gray-300">
  A settings slideover, opened from a ⚙️ icon in the topbar, that lets each user pick their own layout, primary color, font, and font size — without touching your panel's code.
</p>

<div className="flex flex-wrap gap-2 mt-3">
  <span className="rounded-md border border-gray-300 px-2 py-1 text-xs font-mono text-gray-600">PHP ^8.2 – ^8.5</span>
  <span className="rounded-md border border-gray-300 px-2 py-1 text-xs font-mono text-gray-600">Filament ^4.1 | ^5.0</span>
  <span className="rounded-md border border-gray-300 px-2 py-1 text-xs font-mono text-gray-600">Livewire ^3 | ^4</span>
</div>

<div className="flex flex-wrap gap-3 mt-4">
  <a href="https://github.com/andreia/filament-ui-switcher" className="inline-flex items-center gap-2 rounded-lg bg-[#84C225] px-4 py-2 font-semibold text-white no-underline hover:opacity-90">
    View on GitHub →
  </a>

  <a href="/filament/filament-ui-switcher/installation" className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2 font-semibold text-gray-800 no-underline hover:bg-gray-50 dark:text-gray-100">
    Installation
  </a>
</div>

<img className="rounded-xl mt-8" src="https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/screenshot.png" alt="Filament UI Switcher settings modal" />

<a href="https://www.youtube.com/watch?v=aEBp4mYrej8" target="_blank">
  <img className="rounded-xl mt-4" src="https://raw.githubusercontent.com/andreia/filament-ui-switcher/main/docs/demo_video.jpg" alt="Filament UI Switcher demo video" />
</a>

## Features

<CardGroup cols={2}>
  <Card title="Primary color" icon="droplet">
    Pick from predefined colors or add custom brand colors.
  </Card>

  <Card title="Font family" icon="font">
    Choose from 6 popular Google Fonts, or wire in your own local fonts.
  </Card>

  <Card title="Font size" icon="text-height">
    Adjust the base font size within a configurable range (12–20px by default).
  </Card>

  <Card title="Layout" icon="table-columns">
    Switch between Sidebar, Compact Sidebar, Sidebar (no topbar), and Topbar navigation.
  </Card>

  <Card title="Mode switcher (optional)" icon="circle-half-stroke">
    Optionally surface Filament's own light/dark/system switcher in the same modal.
  </Card>

  <Card title="Session or database storage" icon="database">
    Store preferences per-session by default, or persist them per-user in the database.
  </Card>
</CardGroup>

## Requirements

* PHP 8.2, 8.3, 8.4, or 8.5
* Laravel 11.x or 12.x
* Filament 4.1+ or 5.x (Filament 4.0 works except for the "no topbar" layout option)
* Livewire 3.x or 4.x