PHPackages                             suraj-kashyap-dev/vesper - 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. suraj-kashyap-dev/vesper

ActiveLibrary[Utility & Helpers](/categories/utility)

suraj-kashyap-dev/vesper
========================

Vesper is a Filament theme plugin by Suraj Kashyap

v1.0.0(2d ago)02↑2900%MITCSSPHP ^8.3

Since Jun 7Pushed 2d agoCompare

[ Source](https://github.com/suraj-kashyap-dev/vesper)[ Packagist](https://packagist.org/packages/suraj-kashyap-dev/vesper)[ RSS](/packages/suraj-kashyap-dev-vesper/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (1)Dependencies (14)Versions (2)Used By (0)

Vesper
======

[](#vesper)

Vesper is a Composer-installable Filament 5 theme plugin with premium-style runtime customization. It supports preset-driven palettes, semantic Filament colors, runtime CSS token overrides, configurable layout behavior, and package-owned Blade overrides for the shell.

Install
-------

[](#install)

```
composer require suraj-kashyap-dev/vesper
```

Register the plugin on your panel provider:

```
use Kashyap\Vesper\VesperPlugin;

$panel->plugins([
    VesperPlugin::make(),
]);
```

What You Can Customize
----------------------

[](#what-you-can-customize)

- Preset theme palette: `cassandra`, `emerald`, `sunset`, `amethyst`
- Semantic Filament colors: `primary`, `success`, `warning`, `danger`, `info`, `gray`
- Runtime CSS tokens for light and dark surfaces, accent colors, gradients, shadows, radii, and typography variables
- Shell sizing tokens for dropdown widths, search widths, control radii, avatars, and panel chrome
- Layout behavior: default theme mode, sidebar widths, collapsibility, search shortcuts, debounce, and content widths
- Font loading: use the default Google font stylesheet, swap it for your own, or set it to `null`
- Header actions: help URL and theme-toggle visibility
- Branding copy: name, eyebrow, mark
- Sidebar fallback labels and role label

Example Configuration
---------------------

[](#example-configuration)

```
use Filament\Enums\ThemeMode;
use Filament\Support\Enums\Width;

return [
    'preset' => 'emerald',

    'layout' => [
        'default_theme_mode' => ThemeMode::System,
        'sidebar_width' => '17rem',
        'collapsed_sidebar_width' => '4.75rem',
        'global_search_key_bindings' => ['mod+k', 'ctrl+/'],
        'global_search_debounce' => '350ms',
        'max_content_width' => Width::SevenExtraLarge,
    ],

    'fonts' => [
        'body' => "'Instrument Sans', sans-serif",
        'mono' => "'JetBrains Mono', monospace",
        'heading' => "'Sora', sans-serif",
        'stylesheet' => null,
    ],

    'header' => [
        'help_url' => 'https://example.com/docs',
        'show_theme_toggle' => true,
    ],

    'colors' => [
        'primary' => 'teal',
        'info' => 'sky',
    ],

    'tokens' => [
        'shared' => [
            'vs-control-radius' => '999px',
            'vs-user-menu-width' => '18rem',
            'vs-search-width-focus' => '24rem',
            'vs-brand-gradient-end' => '#123456',
            'vs-avatar-gradient-end' => '#22d3ee',
        ],
        'light' => [
            'vs-surface-2' => '#eefbf5',
        ],
        'dark' => [
            'vs-surface-3' => '#173328',
        ],
    ],
];
```

The published config defaults `fonts.stylesheet` to the package's Google Fonts URL. Set it to `null` if you want to self-host fonts or avoid external requests entirely.

Useful Token Names
------------------

[](#useful-token-names)

- Shared: `vs-control-radius`, `vs-kbd-radius`, `vs-radius-pill`, `vs-search-width`, `vs-search-width-focus`, `vs-dropdown-width`, `vs-user-menu-width`, `vs-notifications-width`, `vs-user-avatar-size`, `vs-user-avatar-lg-size`
- Shared: `vs-accent`, `vs-accent-strong`, `vs-accent-soft`, `vs-accent-glow`, `vs-success`, `vs-warning`, `vs-danger`, `vs-brand-gradient-start`, `vs-brand-gradient-end`, `vs-avatar-gradient-start`, `vs-avatar-gradient-end`
- Light: `vs-bg`, `vs-surface-1`, `vs-surface-2`, `vs-surface-3`, `vs-surface-4`, `vs-border`, `vs-border-strong`, `vs-shadow`, `vs-shadow-soft`, `vs-panel-highlight-border`
- Dark: `vs-bg`, `vs-surface-1`, `vs-surface-2`, `vs-surface-3`, `vs-surface-4`, `vs-border`, `vs-border-strong`, `vs-shadow`, `vs-shadow-soft`, `vs-panel-highlight-border`

Presets
-------

[](#presets)

- `cassandra`: cool blue default
- `emerald`: green/teal shell
- `sunset`: warm orange/coral shell
- `amethyst`: violet/pink shell

Build
-----

[](#build)

From the package directory:

```
npm install
npm run build
```

That rebuilds `dist/vesper.css` and republishes the package asset for local app testing.

Docs
----

[](#docs)

- `docs/README.md` contains the package map.
- `docs/config-reference.md` documents the config surface in detail.
- `docs/files/*.md` contains file-level runtime docs.

Verification
------------

[](#verification)

For the local app in this repository:

```
php artisan test tests/Filament/Pages/TopbarOverrideTest.php
php artisan test tests/Filament/Pages/ThemeCustomizationTest.php
```

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance100

Actively maintained with recent releases

Popularity3

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity48

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

Unknown

Total

1

Last Release

2d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/69279728?v=4)[Suraj Kashyap](/maintainers/suraj-kashyap-dev)[@suraj-kashyap-dev](https://github.com/suraj-kashyap-dev)

---

Top Contributors

[![suraj-kashyap-dev](https://avatars.githubusercontent.com/u/69279728?v=4)](https://github.com/suraj-kashyap-dev "suraj-kashyap-dev (2 commits)")

---

Tags

phplaravelthemefilamentfilamentphpfilament-themevesper

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/suraj-kashyap-dev-vesper/health.svg)

```
[![Health](https://phpackages.com/badges/suraj-kashyap-dev-vesper/health.svg)](https://phpackages.com/packages/suraj-kashyap-dev-vesper)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3913.7k](/packages/rawilk-profile-filament-plugin)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

127173.7k3](/packages/dotswan-filament-map-picker)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

327482.0k25](/packages/codewithdennis-filament-select-tree)[tapp/filament-google-autocomplete-field

Filament plugin that provides a Google Autocomplete field

30122.2k](/packages/tapp-filament-google-autocomplete-field)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17758.9k2](/packages/stephenjude-filament-jetstream)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

57301.3k3](/packages/creagia-filament-code-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)