PHPackages                             dannyguevara1/zest - 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. dannyguevara1/zest

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

dannyguevara1/zest
==================

Laravel component toolkit for rapid UI development

v1.0.2(1y ago)04MITPHPPHP ^8.1

Since Mar 23Pushed 1y ago1 watchersCompare

[ Source](https://github.com/DannyGuevara1/zest)[ Packagist](https://packagist.org/packages/dannyguevara1/zest)[ RSS](/packages/dannyguevara1-zest/feed)WikiDiscussions master Synced 1mo ago

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

Zest - Gestor de Clases CSS para Laravel
========================================

[](#zest---gestor-de-clases-css-para-laravel)

Zest es una herramienta minimalista para gestionar clases CSS en aplicaciones Laravel. Permite crear, organizar y reutilizar clases CSS mediante un sistema de presets, facilitando el mantenimiento y la consistencia del código.

Características
---------------

[](#características)

- **Sistema de presets**: Define conjuntos reutilizables de clases CSS
- **API fluida**: Utiliza una interfaz de encadenamiento de métodos para construir clases
- **Directivas Blade**: Integración con Blade mediante directivas `@preset` y `@presetIf`
- **Sin opiniones de estilo**: Zest no impone ningún framework CSS o sistema de diseño
- **Liviano y enfocado**: Hace una cosa y la hace bien - gestionar clases CSS

Instalación
-----------

[](#instalación)

```
composer require dannyguevara1/zest
```

Opcionalmente, publica el archivo de configuración:

```
php artisan vendor:publish --tag=zest-config
```

Uso básico
----------

[](#uso-básico)

### Definiendo presets

[](#definiendo-presets)

Define presets globales en el archivo de configuración o mediante código:

```
// En config/zest.php
'presets' => [
    'btn' => 'inline-flex items-center justify-center font-medium rounded',
    'btn-primary' => 'bg-blue-600 text-white hover:bg-blue-700',
    'card' => 'bg-white rounded-lg shadow overflow-hidden',
],

// O mediante código
use Dannyguevara1\Zest\Facades\Zest;

Zest::definePreset('btn', 'inline-flex items-center justify-center font-medium rounded');
Zest::definePresets([
    'btn-primary' => 'bg-blue-600 text-white hover:bg-blue-700',
    'card' => 'bg-white rounded-lg shadow overflow-hidden',
]);
```

### Usando presets en vistas Blade

[](#usando-presets-en-vistas-blade)

```

    Enviar formulario

```

### Usando la API fluida para combinar clases

[](#usando-la-api-fluida-para-combinar-clases)

```

    Contenido

```

### Usando las directivas de Blade

[](#usando-las-directivas-de-blade)

```

    Botón

```

Organizando tus presets
-----------------------

[](#organizando-tus-presets)

Recomendamos organizar tus presets con prefijos claros según el tipo de componente:

```
// Botones
'btn' => 'base-styles...',
'btn-primary' => 'variant-styles...',
'btn-sm' => 'size-styles...',

// Tarjetas
'card' => 'base-styles...',
'card-header' => 'part-styles...',
'card-body' => 'part-styles...',
```

Integrando con tus componentes Blade
------------------------------------

[](#integrando-con-tus-componentes-blade)

Zest es una herramienta excelente para usar en componentes Blade personalizados:

```

@props(['variant' => 'default', 'size' => 'md'])

class([
    Zest::preset('btn'),
    Zest::preset('btn-'.$variant),
    Zest::preset('btn-size-'.$size)
]) }}>
    {{ $slot }}

```

API
---

[](#api)

### Facade Zest

[](#facade-zest)

- `Zest::classBuilder($initialClasses = null)`: Crea una nueva instancia de ClassComposer
- `Zest::definePreset($name, $classes)`: Define un preset global
- `Zest::definePresets($presetsArray)`: Define múltiples presets globales
- `Zest::getPreset($name)`: Obtiene un preset por su nombre
- `Zest::preset($name)`: Crea un ClassComposer y aplica un preset

### Clase ClassComposer

[](#clase-classcomposer)

- `add($classes)`: Añade clases CSS
- `addIf($condition, $classes)`: Añade clases CSS condicionalmente
- `preset($name)`: Aplica un preset
- `presetIf($condition, $name)`: Aplica un preset condicionalmente

Ejemplos avanzados
------------------

[](#ejemplos-avanzados)

### Componente de botón

[](#componente-de-botón)

```
// AppServiceProvider.php
public function boot()
{
    Zest::definePresets([
        'btn' => 'inline-flex items-center justify-center font-medium transition-colors rounded-md',
        'btn-primary' => 'bg-blue-600 text-white hover:bg-blue-700',
        'btn-secondary' => 'bg-gray-200 text-gray-800 hover:bg-gray-300',
        'btn-sm' => 'text-sm px-3 py-1.5',
        'btn-md' => 'px-4 py-2',
        'btn-lg' => 'text-lg px-5 py-3',
    ]);
}
```

```

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

class([
    '@preset("btn")',
    '@preset("btn-'.$variant.'")',
    '@preset("btn-'.$size.'")',
]) }}>
    {{ $slot }}

```

### Componente de tabla

[](#componente-de-tabla)

```
// AppServiceProvider.php
public function boot()
{
    Zest::definePresets([
        'table' => 'min-w-full divide-y divide-gray-200',
        'table-head' => 'bg-gray-50',
        'table-th' => 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider',
        'table-body' => 'bg-white divide-y divide-gray-200',
        'table-td' => 'px-6 py-4 whitespace-nowrap text-sm text-gray-500',
    ]);
}
```

```

            @foreach($headers as $header)
                {{ $header }}
            @endforeach

        @foreach($rows as $row)

                @foreach($row as $cell)
                    {{ $cell }}
                @endforeach

        @endforeach

```

Licencia
--------

[](#licencia)

MIT

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance47

Moderate activity, may be stable

Popularity3

Limited adoption so far

Community7

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

Every ~9 days

Total

3

Last Release

397d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/63ea8c87485a9ba447bf68fe467f653a8c58f8bbc0cb8d125d21343680fc3da1?d=identicon)[DannyGuevara1](/maintainers/DannyGuevara1)

---

Top Contributors

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

---

Tags

laraveluicomponentsblade

### Embed Badge

![Health badge](/badges/dannyguevara1-zest/health.svg)

```
[![Health](https://phpackages.com/badges/dannyguevara1-zest/health.svg)](https://phpackages.com/packages/dannyguevara1-zest)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast

Storybook for Laravel Blade

308664.1k](/packages/area17-blast)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)

PHPackages © 2026

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