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

# Filament 5 Theme & Visual Panel Editor

> Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.

[Skip to content](#fl-main)

[![FLEX](https://flex-theme.bjanczak.com/docs/assets/home/wordmark.svg)Theme](https://flex-theme.bjanczak.com/docs/index.md)

[Design](#fl-design)[Experience](#fl-workflow)[Pricing](#fl-pricing)[Documentation](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md)

[Start building](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md#installation)[Buy now](https://shop.bjanczak.com/checkout/buy/2fa1e181-74d4-4889-994c-d066dcfc88b3)

Your panel.

# FLEX Theme for Filament 5. Reimagined.

## Less code.More character.

[Explore FLEX Theme](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md)

<picture>
  <source media="(max-width: 1023px)" />
</picture>

0 / 06

Previous laptop screenNext laptop screen

[Skip the presentation and explore FLEX Theme](#fl-after-laptop)
[Watch the film ↗](https://www.youtube.com/watch?v=POkDG3aMmgw)

FLEX THEME FOR FILAMENT 5

## Same Filament.

A whole new feel.

A visual theme editor, Global Search and keyboard controls for your Filament admin panel. Built on the components you already know.

[Make it your own](#fl-design)

01

### Native at heart.

Real Filament components. One consistent design language.

02

### Your signature, throughout.

Colors, type, corners and layouts. All in the theme editor.

03

### Keep your flow.

Global Search, shortcuts and floating panels. Work stays within reach.

01 / MAKE IT YOURS

## Your app.

Your signature.

A color. A typeface. A softer corner.
Change the look. Keep the foundations.
[Explore Appearance](https://flex-theme.bjanczak.com/docs/theme-settings/appearance.md)

0 / 03

·

Previous appearanceNext appearance

02 / LESS LOOKING. MORE DOING.

## Find it.

Act on it.
*Keep moving.*

Search people, pages and resources from one place. Open a record, edit it in a modal, or run an authorized action without losing your context.

[Go inside Global Search](https://flex-theme.bjanczak.com/docs/global-search/overview.md)

![The real FLEX Global Search modal in dark mode with Discover, Users, Recent and Favorites navigation](https://flex-theme.bjanczak.com/docs/assets/home/search.webp)

Everything in reach. Nothing out of place.

03 / FORMS, PANELS & NOTIFICATIONS

## Small details.

Better everyday work.

Keep forms clear. Give tasks room.
Let updates stay out of the way.

01

### [More room.](https://flex-theme.bjanczak.com/docs/components/bottom-sheet.md)

One smooth move.

Floating side panels and expandable bottom sheets. Keep the task in focus and the page within reach.

![A detached, rounded bottom sheet in FLEX Theme dark mode](https://flex-theme.bjanczak.com/docs/assets/home/bottom-sheet.webp)

02

### [Clear labels.](https://flex-theme.bjanczak.com/docs/components/field-groups.md)

A better flow.

Field groups pair labels and descriptions with native form controls. Settings that are easier to scan, and easier to use.

![Workspace overview and Field groups with a switch and a provider select](https://flex-theme.bjanczak.com/docs/assets/home/field-groups.webp)

03

### Stay informed.

Stay in your flow.

Stacked notifications expand when you need them and step aside when you don’t.

<picture><source media="(prefers-reduced-motion: reduce)" />![Close-up of real FLEX notifications in the panel’s upper-right corner, expanding and collapsing as a stack](https://flex-theme.bjanczak.com/docs/assets/home/notification-stack-motion.webp)</picture>

LESS REACHING. MORE DOING.

## Your keyboard.

A faster workflow.

Move through records. Select rows. Open filters. Assign the shortcuts that work for you — and keep your hands on the keyboard.

<kbd>J</kbd><kbd>K</kbd> Navigate<kbd>A</kbd> Select<kbd>F</kbd> Filter

[Explore table shortcuts](https://flex-theme.bjanczak.com/docs/workspace/table-shortcuts.md)

A change of mind? Undo supported actions when recovery is configured. [See how recovery works.](https://flex-theme.bjanczak.com/docs/workspace/recovery.md)

<picture><source media="(prefers-reduced-motion: reduce)" />![Real FLEX campaign table: J and K move between rows, A selects and deselects records](https://flex-theme.bjanczak.com/docs/assets/home/table-keyboard-native.webp)</picture>

YOUR NEWS. PART OF THE EXPERIENCE.

## A little space.

A message that matters.

Reach the whole panel or a single page.
Rotate your news. Schedule your launch.
Count down to what’s next.

Global or inline. Scheduled or live.
Configured in PHP. Styled by FLEX.

[Explore announcements](https://flex-theme.bjanczak.com/docs/announcements/overview.md)

THE THEME EDITOR

## One editor.

Every side of your theme.

From the first color to the last shortcut.
Explore seven tabs for your panel’s
appearance, identity and workflow.

Explore Theme Settings

0 / 07

Previous settings tabNext settings tab

Real panel. Real settings. Scroll the preview to see more.Explore

04 / A SPACE THAT WORKS FOR YOU

## A different point of view.

The same attention to detail.

Sidebar, topbar or a little of both. Give your workspace the structure it needs.

Preview navigation layouts

[Explore every layout option](https://flex-theme.bjanczak.com/docs/theme-settings/layout.md)

FLEX THEME. NATIVE FILAMENT.

## Keep your logic.

Change the experience.

Keep the forms, tables, actions and permissions your app already relies on. Add FLEX, then shape your colors, typography, branding and layouts in one visual editor.

A FAMILIAR STARTING POINT

### Your panel.

Your codebase.

Register the plugin in your Panel Provider and add FLEX to your native theme build. The installation guide covers licensing, assets and permissions.

[Read the installation guide](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md#installation)[Multiple panels & permissions](https://flex-theme.bjanczak.com/docs/theme-settings/panels-permissions.md)

FLEX integration examples

AFTER LICENSE SETUP`composer require flex/theme:^0.1`

Copy Composer installation command

01**Native components.** Keep the foundations you know.

02**Visual settings.** Make the design your own.

03**PHP control.** Set the rules for each panel.

MAKE YOUR NEXT PANEL A FLEX PANEL.

## Buy once.

Make it yours.

Single or Unlimited. No subscription.
A full year of free updates with either license.

FOCUS ON WHAT’S NEXT

### Single

One project. Make it unmistakably yours.

\$49USD

**One-time payment.** No subscription.

[Get Single](https://shop.bjanczak.com/checkout/buy/2fa1e181-74d4-4889-994c-d066dcfc88b3)

THE COMPLETE FLEX EXPERIENCE

All FLEX features.
**All updates free for one year.**

KEEP THE POSSIBILITIES OPEN

### Unlimited

Your next project. And the one after that.

\$139USD

**One-time payment.** No subscription.

[Get Unlimited](https://shop.bjanczak.com/checkout/buy/2fa1e181-74d4-4889-994c-d066dcfc88b3)

THE COMPLETE FLEX EXPERIENCE

All FLEX features. Unlimited projects.
**All updates free for one year.**

One payment. One year of updates included. Prices in USD. [Explore the documentation](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md)

A FEW THINGS WORTH KNOWING

## Before you build.

<details>
  <summary>What is FLEX Theme?</summary>

  FLEX Theme is a design and workflow toolkit for Filament 5. It combines a configurable admin panel theme with Global Search, keyboard navigation, announcements, Field groups and floating panels.
</details>

<details>
  <summary>Can I customize my Filament panel without writing CSS?</summary>

  Yes. Theme Settings lets you change colors, typography, corner styles, branding and layouts visually. Register FLEX in your Panel Provider first. Announcements and advanced integrations are configured in PHP. [Explore Theme Settings.](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md)
</details>

<details>
  <summary>Does FLEX support keyboard navigation in tables?</summary>

  Yes. Navigate rendered records, select rows, open filters and move between pages. Record your own shortcuts in Theme Settings. Supported actions can also offer Undo when you configure recovery. [See table controls.](https://flex-theme.bjanczak.com/docs/workspace/table-shortcuts.md)
</details>

<details>
  <summary>Can different panels have different settings?</summary>

  Yes. Each panel can have its own branding and saved configuration. PHP can enforce settings, hide individual tabs or disable the settings page. Your application’s permissions control who can make changes. [Read about panels and permissions.](https://flex-theme.bjanczak.com/docs/theme-settings/panels-permissions.md)
</details>

<details>
  <summary>Is FLEX Theme a subscription?</summary>

  No. Single and Unlimited are one-time purchases. Both include every update released during the first year, at no extra cost.
</details>

<details>
  <summary>Which Filament and PHP versions do I need?</summary>

  FLEX Theme is built for Filament 5 and PHP 8.3 or later. The installation guide covers the native theme build, package registration and license setup. [Read the installation guide.](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md#installation)
</details>

THE DOCUMENTATION

## Get into the details.

Everything you need to make it yours.

[![FLEX](https://flex-theme.bjanczak.com/docs/assets/home/wordmark.svg)Theme](https://flex-theme.bjanczak.com/docs/index.md)

Your panel.
*Reimagined.*

[Watch the film ▶](https://www.youtube.com/watch?v=POkDG3aMmgw)

FLEX Theme · Built for Filament 5[Documentation](https://flex-theme.bjanczak.com/docs/theme-settings/overview.md)[GitHub](https://github.com/janczakb/filament-flex-theme)[Back to top ↑](#fl-main)

<dialog aria-label="Meet FLEX Theme — product film">
  Meet FLEX ThemeClose film

  [Watch on YouTube ↗](https://www.youtube.com/watch?v=POkDG3aMmgw)
</dialog>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.