PHPackages                             theunwindfront/laravel-blade-variants - 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. theunwindfront/laravel-blade-variants

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

theunwindfront/laravel-blade-variants
=====================================

Tailwind CSS v4 plugin & Blade components for native, browser-driven variant styling.

v1.0.0(1w ago)03↓100%MITBladePHP ^8.2

Since May 30Pushed 1w agoCompare

[ Source](https://github.com/theunwindfront/laravel-blade-variants)[ Packagist](https://packagist.org/packages/theunwindfront/laravel-blade-variants)[ RSS](/packages/theunwindfront-laravel-blade-variants/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

@theunwindfront/laravel-blade-variants
======================================

[](#theunwindfrontlaravel-blade-variants)

[![Latest Version on Packagist](https://camo.githubusercontent.com/b4d8b35e7a5ca75a62a09e843dd3338eadc418e95aa122d7daaff8ba6c8e229c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f746865756e77696e6466726f6e742f6c61726176656c2d626c6164652d76617269616e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/laravel-blade-variants)[![Total Downloads](https://camo.githubusercontent.com/a853577a9bb8a7dd91adbe85d6d4ff1112ccbbc77631747b0c0bd7c884c7879a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746865756e77696e6466726f6e742f6c61726176656c2d626c6164652d76617269616e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/laravel-blade-variants)[![NPM Version](https://camo.githubusercontent.com/1dcd79c527c21f364ed0dabc03e4327b9fc60ac1d335b63e725129a620413d54/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f253430746865756e77696e6466726f6e742f6c61726176656c2d626c6164652d76617269616e74732e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@theunwindfront/laravel-blade-variants)[![License](https://camo.githubusercontent.com/d61b5e9f1daaccbb1def14104b6537e10ea5960f8c53a766803fc7190d1aeb83/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746865756e77696e6466726f6e742f6c61726176656c2d626c6164652d76617269616e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/laravel-blade-variants)

A CSS-native, browser-driven Tailwind CSS v4 plugin to manage variants, sizes, and states for Laravel Blade components with **zero server-side rendering overhead**.

---

The Problem
-----------

[](#the-problem)

Normally, implementing component variants in Laravel Blade involves complex conditional PHP arrays or calling tools like `tailwind-merge` at runtime to prevent style conflicts:

```
class([
    'px-4 py-2 rounded',
    'bg-blue-600 hover:bg-blue-700' => $variant === 'primary',
    'bg-gray-100 text-gray-900' => $variant === 'secondary',
]) }}>
```

This is hard to maintain, and merging classes via regex on the server slows down page render times.

The Solution
------------

[](#the-solution)

This plugin moves state-based styling to **native browser attribute matching**. Instead of conditionally outputting classes in PHP, you assign standard attributes (like `data-variant`, `data-size`, `data-state`) and apply clean Tailwind modifiers directly in your HTML:

```

```

The browser automatically activates styles based on DOM attributes. This **completely eliminates class conflicts** (only one state attribute matches at a time!) and requires **zero PHP parsing overhead** to merge strings.

---

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

[](#installation)

```
npm install @theunwindfront/laravel-blade-variants
```

Add the plugin to your main stylesheet (Tailwind CSS v4):

```
@import "tailwindcss";
@plugin "@theunwindfront/laravel-blade-variants";
```

For Tailwind v3, import it in `tailwind.config.js`:

```
module.exports = {
  plugins: [
    require('@theunwindfront/laravel-blade-variants'),
  ],
}
```

---

Usage Guide
-----------

[](#usage-guide)

### 1. In Your Blade Component (`components/button.blade.php`)

[](#1-in-your-blade-component-componentsbuttonbladephp)

```
@props([
    'variant' => 'primary',
    'size' => 'md',
    'state' => 'idle'
])

class([
        'inline-flex items-center rounded-lg font-semibold transition-all duration-200',

        // Variants
        'variant-primary:bg-blue-600 variant-primary:text-white',
        'variant-secondary:bg-slate-100 variant-secondary:text-slate-900',
        'variant-danger:bg-red-600 variant-danger:text-white',

        // Sizes
        'size-sm:px-3 size-sm:py-1.5 size-sm:text-xs',
        'size-md:px-4 size-md:py-2 size-md:text-sm',
        'size-lg:px-6 size-lg:py-3 size-lg:text-base',

        // States
        'state-loading:opacity-60 state-loading:cursor-not-allowed',
        'state-disabled:opacity-50 state-disabled:cursor-not-allowed'
    ]) }}
>

    {{ $slot }}

```

### 2. Available Modifiers

[](#2-available-modifiers)

Core VariantMatches AttributeParent (Group) Modifier`variant-{value}``[data-variant="{value}"]``group-variant-{value}``size-{value}``[data-size="{value}"]``group-size-{value}``state-{value}``[data-state="{value}"]``group-state-{value}``theme-{value}``[data-theme="{value}"]``group-theme-{value}`### 3. Presets & Custom Values

[](#3-presets--custom-values)

Out of the box, standard developer variants are pre-registered for IntelliSense autocomplete:

- **Variants**: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `ghost`, `link`, `outline`
- **Sizes**: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
- **States**: `active`, `inactive`, `open`, `closed`, `loading`, `disabled`, `checked`, `selected`, `expanded`
- **Themes**: `light`, `dark`, `system`

To use a custom state value not included in the presets, use Tailwind's arbitrary bracket syntax:

```

```

This compiled selector resolves natively to `[data-variant="custom-glass"]`.

👥 Credits
---------

[](#-credits)

- **[Sagar Pansuriya](https://github.com/theunwindfront)** - Lead Creator & Developer

🤝 Support
---------

[](#-support)

For questions or issues, contact ****

📄 License
---------

[](#-license)

The MIT License (MIT). Please see [License File](LICENSE) for more information.

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance98

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity45

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

10d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/57458034?v=4)[Sagar Pansuriya](/maintainers/theunwindfront)[@theunwindfront](https://github.com/theunwindfront)

---

Top Contributors

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

### Embed Badge

![Health badge](/badges/theunwindfront-laravel-blade-variants/health.svg)

```
[![Health](https://phpackages.com/badges/theunwindfront-laravel-blade-variants/health.svg)](https://phpackages.com/packages/theunwindfront-laravel-blade-variants)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.6M2.9k](/packages/craftcms-cms)[moonshine/moonshine

Laravel administration panel

1.3k239.9k72](/packages/moonshine-moonshine)[illuminate/view

The Illuminate View package.

13046.3M2.1k](/packages/illuminate-view)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

719160.4k12](/packages/tallstackui-tallstackui)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

45344.0k1](/packages/pressbooks-pressbooks)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5222.7k](/packages/hasinhayder-tyro-dashboard)

PHPackages © 2026

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