PHPackages                             sampaui/sampaui - 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. sampaui/sampaui

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

sampaui/sampaui
===============

Livewire-first Blade UI components for Laravel 13, Tailwind CSS 4 and AlpineJS

v0.1.21(3w ago)019↓77.8%MITBladePHP ^8.3CI passing

Since Jun 2Pushed 3w agoCompare

[ Source](https://github.com/Wandilson-Oliver/sampaUI)[ Packagist](https://packagist.org/packages/sampaui/sampaui)[ Docs](https://github.com/Wandilson-Oliver/sampaUI)[ RSS](/packages/sampaui-sampaui/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (8)Versions (21)Used By (0)

SampaUI
=======

[](#sampaui)

SampaUI e um pacote de componentes Blade Livewire-first para Laravel 13, Livewire 4, Tailwind CSS 4 e AlpineJS. O pacote foi padronizado para produtos digitais, CRMs, dashboards operacionais, atendimento, propostas, sistemas internos e paginas de autenticacao.

Requisitos
----------

[](#requisitos)

- PHP 8.3+
- Laravel 13+
- Livewire 4+
- AlpineJS
- Bootstrap Icons incluido no CSS compilado do pacote

Instalacao
----------

[](#instalacao)

```
composer require sampaui/sampaui
```

Finalize a instalacao:

```
php artisan sampaui:install
```

O instalador publica a configuracao/assets e registra o pacote no build principal do Vite:

```
/* resources/css/app.css */
@import "../../vendor/sampaui/sampaui/dist/sampaui.css";
```

```
// resources/js/app.js
import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm';
import "../../vendor/sampaui/sampaui/dist/sampaui.js";

Livewire.start();
```

Quando o projeto faz bundle manual do Livewire, importe o SampaUI de forma estatica antes de chamar `Livewire.start()`. Nao use `import()` assincrono para o SampaUI: os controladores Alpine de selects e uploads precisam estar registrados antes da inicializacao do Livewire.

Depois rode o build normal do projeto consumidor:

```
npm run build
```

O CSS compilado ja importa a fonte padrao do pacote: `Plus Jakarta Sans`, com `Outfit` como fallback visual. O arquivo JS registra `window.SampaUI` e mantem um ponto unico para comportamentos futuros do pacote.

Comandos
--------

[](#comandos)

```
php artisan sampaui:about
php artisan sampaui:list
php artisan sampaui:doctor
php artisan sampaui:docs-export --format=json
```

O pacote mantem um registry oficial em `resources/metadata/components.php`, exportado para `docs/registry/components.json` e descrito em `llms.txt`/`llms-full.txt` para facilitar uso por Codex e outras ferramentas de IA.

Componentes
-----------

[](#componentes)

Use os componentes do namespace `sampaui` antes de criar HTML solto. O objetivo e manter telas de produto com a mesma hierarquia visual, bordas, foco, estados e densidade de informacao.

Fluxos recomendados:

- **Cadastros e qualificacao**: `input`, `phone`, `currency-br`, `cep`, `select-search`, `select-multiple`, `textarea`, `file-upload` e `avatar-upload`.
- **CRM e funil**: `card`, `badge`, `progress`, `table`, `table-search`, `dropdown`, `drawer`, `tabs`, `pagination` e `empty-state`.
- **Atendimento**: `chat-layout`, `chat-sidebar`, `chat-conversation`, `chat-message`, `chat-composer`, `avatar`, `indicator` e `toast`.
- **Operacao e seguranca**: `header`, `sidebar`, `command-palette`, `modal`, `alert`, `pin`, `checkbox` e `button`.

Exemplo rapido de card operacional:

```

        Ativo
        R$ 8.900
        Plano anual

        Agendar reunião
        Conversar

```

Fundamentos adotados
--------------------

[](#fundamentos-adotados)

O SampaUI segue o conceito Blade-first: componentes anonimos, CSS compilado, Bootstrap Icons e customizacao por `class=""`. A refatoracao de referencia incorporou boas praticas dos frameworks mais usados em 2025 sem mudar a identidade do pacote:

- stack fechado e previsivel: Laravel 13+, Livewire 4+, Tailwind 4 e AlpineJS;
- API publica pensada para Livewire: `wire:model`, `wire:click`, `wire:navigate`, eventos do browser e estados reativos sem adaptadores extras;
- helpers internos para padronizar foco, erro, disabled, triggers e variantes com a paleta semantica SampaUI;
- exemplos copiaveis e composicao por slots;
- props previsiveis para variantes, tamanhos e estados;
- foco em acessibilidade, `aria-*`, labels e estados desabilitados;
- preservacao de atributos Livewire/Alpine no elemento real;
- documentacao com preview renderizado, API completa e checklist de uso.

Paleta oficial
--------------

[](#paleta-oficial)

O SampaUI usa uma paleta semantica personalizada, publicada em `config/sampaui.php` e compilada no CSS do pacote:

```
primary, secondary, accent, danger, light, surface, success, warning, info, purple, muted, border, text
```

Use classes como `bg-primary`, `text-secondary`, `border-border`, `bg-accent/10` e `focus:ring-primary/20`. A customizacao local deve preferir `class=""` e tokens oficiais antes de usar hexadecimais diretos.

Variantes principais:

- `Button`: `primary`, `secondary`, `accent`, `danger`, `success`, `warning`, `info`, `purple`, `muted`, `light`, `ghost`, `outline`
- `Badge` e `Progress`: `primary`, `secondary`, `accent`, `danger`, `success`, `warning`, `info`, `purple`, `muted`, `light`
- `Alert`: `success`, `danger`/`error`, `warning`, `info`
- `Card` e `Drawer`: `default`, `muted`, `primary`, `secondary`, `accent`, `danger`, `success`, `warning`, `info`, `purple`

### Button

[](#button)

```

    Adicionar

    Continuar

    Ver clientes

```

### Input

[](#input)

```

```

Todos os componentes de entrada aceitam `wire:model` diretamente no controle real ou via `x-modelable`, sem exigir a prop `value`.

Campos textuais e triggers de formulario usam `border-secondary/20` como borda padrao, incluindo `input`, campos com mascara, `textarea`, `select`, `select-search`, `select-multiple` e `date-picker`. Controles fisicos de escolha, como `checkbox`, `radio` e areas de upload, mantem `border-secondary/40` para preservar contraste. O `toggle` usa a cor definida em `color` no trilho e no botao interno quando desligado.

```

```

Os campos `phone`, `currency-br` e `cep` formatam valores internamente com Alpine e nao exigem plugin externo de mascara. O Phone usa o controlador distribuido em `sampaui.js`, sem funcoes inline na view.

### Select

[](#select)

```

    Ativo
    Inativo

```

### Select Search

[](#select-search)

```

```

### Textarea

[](#textarea)

```

```

### Checkbox

[](#checkbox)

```

```

### Radio

[](#radio)

```

```

### DatePicker

[](#datepicker)

```

```

### Alert

[](#alert)

```

    As alteracoes foram sincronizadas.

```

### Card

[](#card)

```

    Proposta aguardando revisao juridica.

        Atualizado ha 3 minutos.

```

### Header

[](#header)

```

        Novo cliente

```

### Sidebar

[](#sidebar)

```

```

### Toast

[](#toast)

Inclua uma vez no layout e dispare eventos `toast` no browser:

```

    Abrir toast

```

### Table

[](#table)

```

```

### Pagination

[](#pagination)

```

```

```
window.dispatchEvent(new CustomEvent('toast', {
    detail: { type: 'success', title: 'Salvo', message: 'Alteracoes publicadas.' }
}))
```

Customizacao
------------

[](#customizacao)

Todos os componentes aceitam `class=""` e preservam atributos Livewire/Alpine:

```

    Salvar

```

Desenvolvimento
---------------

[](#desenvolvimento)

```
composer install
npm install
npm run build
composer test
```

Licenca
-------

[](#licenca)

MIT.

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance95

Actively maintained with recent releases

Popularity8

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

Every ~1 days

Total

19

Last Release

23d ago

### Community

Maintainers

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

---

Top Contributors

[![Wandilson-Oliver](https://avatars.githubusercontent.com/u/206931296?v=4)](https://github.com/Wandilson-Oliver "Wandilson-Oliver (38 commits)")

---

Tags

laraveluicomponentsbladelivewiretailwindcss

###  Code Quality

TestsPHPUnit

### Embed Badge

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

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

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k570.6k23](/packages/robsontenorio-mary)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.4k](/packages/tomshaw-electricgrid)[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.5k1](/packages/electrik-slate)

PHPackages © 2026

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