PHPackages                             black-paradise/admin-blade-ui - 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. [Templating & Views](/categories/templating)
4. /
5. black-paradise/admin-blade-ui

ActiveLibrary[Templating & Views](/categories/templating)

black-paradise/admin-blade-ui
=============================

Blade + Tailwind + Alpine.js UI for BPAdmin v3

3.0.7(1w ago)014MITPHPPHP ^8.2

Since May 31Pushed 3w ago1 watchersCompare

[ Source](https://github.com/BlackRider666/bp-admin-blade-ui)[ Packagist](https://packagist.org/packages/black-paradise/admin-blade-ui)[ RSS](/packages/black-paradise-admin-blade-ui/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (33)Versions (11)Used By (0)

BPAdmin Blade UI (v3)
=====================

[](#bpadmin-blade-ui-v3)

Blade + Tailwind CSS + Alpine.js UI layer for [BPAdmin](../bp-laravel-admin).

Installation
------------

[](#installation)

This package is installed automatically when you require `black-paradise/laravel-admin` with Blade UI.

After installation, publish the compiled CSS/JS assets:

```
php artisan vendor:publish --tag=bpadmin-assets
```

This copies `public/bpadmin/bpadmin.css` and `public/bpadmin/bpadmin.js` to your project's `public/vendor/bpadmin/` directory.

Tailwind CSS Integration (optional)
-----------------------------------

[](#tailwind-css-integration-optional)

If your project uses Tailwind CSS, you can integrate BPAdmin's views into your Tailwind build instead of relying solely on the pre-compiled CSS.

Add to your `tailwind.config.js`:

```
const bpadmin = require('./vendor/black-paradise/admin-blade-ui/bpadmin-tailwind-plugin.cjs')

module.exports = {
    content: [
        ...bpadmin.content,          // scans BPAdmin Blade views
        './resources/**/*.blade.php',
        // ... your other paths
    ],
    plugins: [
        ...bpadmin.plugins,          // registers --bpadmin-* CSS variables in :root
        // ... your other plugins
    ],
}
```

The plugin registers CSS custom properties in `:root` that control BPAdmin's color scheme:

VariableDefaultDescription`--bpadmin-primary``#30A488`Primary accent color`--bpadmin-primary-hover``#278a74`Primary hover state`--bpadmin-surface``#1A1C2A`Card/panel background`--bpadmin-app-bg``#0F1117`Page background`--bpadmin-border``#272B3D`Border color`--bpadmin-muted``#7C7A96`Muted text colorTo customize the theme, override these variables in your CSS:

```
:root {
    --bpadmin-primary: #6366f1;       /* indigo */
    --bpadmin-primary-hover: #4f46e5;
}
```

CSS Isolation
-------------

[](#css-isolation)

BPAdmin styles are fully isolated from your project:

- All Tailwind utilities are scoped to `#bpadmin-app` (the admin panel root element)
- CSS preflight (reset) is disabled — your project's global styles are not affected
- Custom color tokens use the `bp-` prefix (`bg-bp-primary`, `bg-bp-surface`, etc.) to avoid name collisions

Building Assets (package development)
-------------------------------------

[](#building-assets-package-development)

```
npm install
npm run build:all    # compile bpadmin.css + bpadmin.js
npm run dev          # watch CSS changes
npm run dev:js       # watch JS changes
```

Alpine.js
---------

[](#alpinejs)

The package bundles Alpine.js. If your project already uses Alpine, BPAdmin's bundle will detect `window.Alpine` and skip initialization to avoid conflicts.

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance97

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity52

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

Every ~3 days

Total

9

Last Release

8d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/11577778?v=4)[BlackRider666](/maintainers/BlackRider666)[@BlackRider666](https://github.com/BlackRider666)

---

Top Contributors

[![BlackRider666](https://avatars.githubusercontent.com/u/11577778?v=4)](https://github.com/BlackRider666 "BlackRider666 (15 commits)")

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/black-paradise-admin-blade-ui/health.svg)

```
[![Health](https://phpackages.com/badges/black-paradise-admin-blade-ui/health.svg)](https://phpackages.com/packages/black-paradise-admin-blade-ui)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3851.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.1k](/packages/area17-laravel-auto-head-tags)[ktquez/laravel-tinymce

TinyMCE editor for Laravel and Lumen Framework

2525.4k](/packages/ktquez-laravel-tinymce)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.3k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

282.2k](/packages/webkinder-sproutset)

PHPackages © 2026

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