> ## 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 Cappuccino Theme

> A warm, compact Filament v5 theme designed for extended screen time.

<span className="inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-800">
  ★ Paid · Commercial license
</span>

<p className="mt-3 text-lg text-gray-600 dark:text-gray-300">
  A soothing, compact Filament panel theme in cream, sand, and gold — built for people who spend long hours in the admin panel.
</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.3</span>
  <span className="rounded-md border border-gray-300 px-2 py-1 text-xs font-mono text-gray-600">Filament ^4.0 | ^5.0</span>
</div>

<div className="flex flex-wrap gap-3 mt-4">
  <a href="https://checkout.anystack.sh/filament-cappuccino-theme" className="inline-flex items-center gap-2 rounded-lg bg-[#84C225] px-4 py-2 font-semibold text-white no-underline hover:opacity-90">
    Buy on AnyStack →
  </a>

  <a href="https://buy.stripe.com/eVq4gB6Rn9Cy6NG0MBdby03" className="inline-flex items-center gap-2 rounded-lg bg-[#635BFF] px-4 py-2 font-semibold text-white no-underline hover:opacity-90">
    Buy on Stripe →
  </a>

  <a href="/filament/cappuccino-theme/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://mintcdn.com/andreia-6c5d77f3/5pb3jZ5-Avd1Dt4z/filament/cappuccino-theme/images/dashboard02.png?fit=max&auto=format&n=5pb3jZ5-Avd1Dt4z&q=85&s=d64dc55a8d81070a44ad10b770f11e69" alt="Filament Cappuccino Theme dashboard" width="3008" height="1460" data-path="filament/cappuccino-theme/images/dashboard02.png" />

Prefer to watch it in action first? Check out the [walkthrough video](https://youtu.be/lA2T1oKqVn0) applied to a Filament demo project.

<a href="https://youtu.be/lA2T1oKqVn0" target="_blank">
  <img className="rounded-xl" src="https://mintcdn.com/andreia-6c5d77f3/5pb3jZ5-Avd1Dt4z/filament/cappuccino-theme/images/youtube_cover.jpg?fit=max&auto=format&n=5pb3jZ5-Avd1Dt4z&q=85&s=0de9edd673a6a7f11582cd9893974d66" alt="Filament Cappuccino Theme YouTube video" width="1280" height="720" data-path="filament/cappuccino-theme/images/youtube_cover.jpg" />
</a>

## Features

<CardGroup cols={2}>
  <Card title="Compact UI" icon="compress">
    Dense schema spacing and compact components enabled by default, tunable per panel.
  </Card>

  <Card title="Cappuccino palette" icon="palette">
    A pleasant, low-glare cream, sand, and gold color scheme.
  </Card>

  <Card title="Per-panel scoping" icon="layer-group">
    Register the theme on only the panels that need it.
  </Card>

  <Card title="Customizable primary color" icon="droplet">
    Swap the gold palette for any 50–950 color array, in hex or OKLCH.
  </Card>

  <Card title="Markdown mail theme" icon="envelope">
    An optional matching theme for Laravel's markdown mail notifications.
  </Card>
</CardGroup>

## Requirements

* PHP 8.3+
* Filament v4 or v5
* A custom Filament panel (the theme registers as a panel plugin)