PHPackages                             uendelsilveira/laravel-design-system - 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. uendelsilveira/laravel-design-system

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

uendelsilveira/laravel-design-system
====================================

A beautiful Laravel Design System package with reusable Blade components including tables, charts, and form elements with modern styling.

v1.0.4(3mo ago)03MITBladePHP ^8.2CI passing

Since Jan 24Pushed 3mo agoCompare

[ Source](https://github.com/uendelsilveira/laravel-design-system)[ Packagist](https://packagist.org/packages/uendelsilveira/laravel-design-system)[ RSS](/packages/uendelsilveira-laravel-design-system/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (8)Versions (5)Used By (0)

Laravel Design System
=====================

[](#laravel-design-system)

[![Latest Stable Version](https://camo.githubusercontent.com/e19df34d98ade7722dbf98669b4345a459d2d9b30f0380990f87f7214916ffce/68747470733a2f2f706f7365722e707567782e6f72672f75656e64656c73696c76656972612f6c61726176656c2d64657369676e2d73797374656d2f762f737461626c65)](https://packagist.org/packages/uendelsilveira/laravel-design-system)[![Total Downloads](https://camo.githubusercontent.com/15eb2ac458f066e73fa8550e7c06c0bf17fdedfeaf799fe9d4b3c428fcc57302/68747470733a2f2f706f7365722e707567782e6f72672f75656e64656c73696c76656972612f6c61726176656c2d64657369676e2d73797374656d2f646f776e6c6f616473)](https://packagist.org/packages/uendelsilveira/laravel-design-system)[![License](https://camo.githubusercontent.com/21125ad45e8eee5c31edb23802b94cf47663938ac99a887377839e4738a64b9f/68747470733a2f2f706f7365722e707567782e6f72672f75656e64656c73696c76656972612f6c61726176656c2d64657369676e2d73797374656d2f6c6963656e7365)](https://packagist.org/packages/uendelsilveira/laravel-design-system)

Um pacote de Design System bonito e moderno para Laravel, fornecendo componentes Blade reutilizáveis com estilo elegante. Este pacote inclui uma interface de guia de estilo abrangente para mostrar todos os componentes e tokens de design.

📖 Índice
--------

[](#-índice)

- [Funcionalidades](#funcionalidades)
- [Instalação](#instala%C3%A7%C3%A3o)
    - [Quick Start](#-quick-start)
    - [Comando de Instalação](#comando-de-instala%C3%A7%C3%A3o)
- [Comandos CLI Disponíveis](#comandos-cli-dispon%C3%ADveis)
    - [Criar Novo Componente](#-criar-novo-componente)
    - [Criar Documentação do Styleguide](#-criar-documenta%C3%A7%C3%A3o-do-styleguide)
- [Passo a Passo: Criando Seu Primeiro Componente](#passo-a-passo-criando-seu-primeiro-componente)
- [Configuração](#configura%C3%A7%C3%A3o)
- [Publicando Assets](#publicando-assets)
- [Componentes](#componentes)
    - [Estrutura do Template](#%EF%B8%8F-estrutura-do-template-de-componente)
    - [Variantes e Tamanhos](#-variantes-dispon%C3%ADveis)
- [Tokens de Design](#-tokens-de-design)
- [Guia de Estilo](#guia-de-estilo)
- [Personalização Avançada](#-personaliza%C3%A7%C3%A3o-avan%C3%A7ada)
- [Exemplos Práticos](#-exemplos-pr%C3%A1ticos)
- [Solução de Problemas](#-solu%C3%A7%C3%A3o-de-problemas)
- [Testes](#testes)
- [Contribuindo](#-contribuindo)
- [Licença](#licen%C3%A7a)

Funcionalidades
---------------

[](#funcionalidades)

- 🎨 **Design System Moderno** - Componentes limpos e bonitos com estilo inspirado no Tailwind
- 🧩 **Componentes Blade Reutilizáveis** - Tabela, Select Nativo e componentes de Gráfico
- 📚 **Guia de Estilo Interativo** - Interface de guia de estilo integrada para explorar componentes
- 🛠️ **Comandos CLI** - Comandos Artisan para criar novos componentes rapidamente
- 🎯 **Integração Fácil** - Instalação simples com auto-discovery do Laravel
- 🎭 **Personalizável** - Publique e personalize views, assets e configurações
- 🌗 **Modo Escuro** - Suporte nativo a dark mode com Alpine.js
- ✅ **Bem Testado** - Cobertura de testes abrangente para todos os componentes

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

[](#componentes)

### 🏗️ Estrutura do Template de Componente

[](#️-estrutura-do-template-de-componente)

Quando você cria um componente com `design-system:make-component`, ele vem com um template completo:

```
{{-- Cabeçalho com informações do autor --}}
{{--
By Uendel Silveira
Full Stack Developer
IDE: PHPStorm
Created: 24/01/2026
--}}

{{-- Props do componente --}}
@props([
    'variant' => 'default',  // Variante visual
    'size' => 'md',         // Tamanho do componente
])

{{-- Lógica PHP para classes dinâmicas --}}
@php
    // Classes baseadas na variante
    $classes = match($variant) {
        'primary' => 'bg-primary text-primary-foreground',
        'secondary' => 'bg-secondary text-secondary-foreground',
        'success' => 'bg-success text-success-foreground',
        'danger' => 'bg-destructive text-destructive-foreground',
        default => 'bg-card text-foreground border border-border',
    };

    // Classes baseadas no tamanho
    $sizes = match($size) {
        'sm' => 'text-sm p-2',
        'lg' => 'text-lg p-6',
        default => 'text-base p-4',
    };
@endphp

{{-- Elemento HTML com merge de classes --}}
merge(['class' => "rounded-xl transition-colors {$classes} {$sizes}"]) }}>
    {{ $slot }}

```

### 🎯 Variantes Disponíveis

[](#-variantes-disponíveis)

Todos os componentes gerados suportam estas variantes:

VarianteClasse CSSUso`default``bg-card text-foreground border`Padrão, estilo neutro`primary``bg-primary text-primary-foreground`Ação principal`secondary``bg-secondary text-secondary-foreground`Ação secundária`success``bg-success text-success-foreground`Estado de sucesso`danger``bg-destructive text-destructive-foreground`Ação destrutiva### 📏 Tamanhos Disponíveis

[](#-tamanhos-disponíveis)

TamanhoClasse CSSUso`sm``text-sm p-2`Elementos pequenos`md``text-base p-4`Tamanho padrão`lg``text-lg p-6`Elementos grandes### Componente de Tabela

[](#componente-de-tabela)

Uma tabela de dados completa com ordenação, listras e estados vazios.

### Componente de Select Nativo

[](#componente-de-select-nativo)

Um elemento select nativo estilizado com labels, dicas e estados de erro.

### Componente de Gráfico

[](#componente-de-gráfico)

Um gráfico de barras em CSS puro com tooltips, legendas e alturas personalizáveis.

Instalação
----------

[](#instalação)

### Requisitos

[](#requisitos)

- PHP 8.2 ou superior
- Laravel 12.0 ou superior
- Tailwind CSS v4 (recomendado)

### Instalação via Composer

[](#instalação-via-composer)

```
composer require uendelsilveira/laravel-design-system
```

O service provider será registrado automaticamente via auto-discovery de pacotes do Laravel.

⚡ Quick Start
-------------

[](#-quick-start)

Comece a usar o Design System em 3 passos:

### 1. Instalar o pacote

[](#1-instalar-o-pacote)

```
php artisan design-system:install
```

### 2. Acessar o Styleguide

[](#2-acessar-o-styleguide)

Abra seu navegador em: `http://seu-app.test/styleguide`

### 3. Usar os componentes

[](#3-usar-os-componentes)

```
{{-- Use os componentes pré-construídos --}}

{{-- Ou crie seus próprios componentes --}}
php artisan design-system:make-component notification --styleguide
```

### Comando de Instalação

[](#comando-de-instalação)

Para publicar todos os arquivos necessários do pacote, execute:

```
php artisan design-system:install
```

Este comando irá:

- ✅ Publicar as views para `resources/views/vendor/design-system`
- ✅ Publicar os assets CSS para `resources/css/vendor/design-system`
- ✅ Publicar o arquivo de configuração para `config/styleguide.php`
- ✅ Publicar as imagens públicas para `public/vendor/design-system/img`

Comandos CLI Disponíveis
------------------------

[](#comandos-cli-disponíveis)

O pacote fornece comandos Artisan poderosos para acelerar o desenvolvimento de componentes.

### 🎨 Criar Novo Componente

[](#-criar-novo-componente)

Gere um novo componente Blade com template completo e documentação opcional:

```
# Considere usar https://ui.shadcn.com/ para componentes pré-construídos
php artisan design-system:make-component {nome} [--styleguide] [--force]
```

**Opções:**

- `{nome}` - Nome do componente (será convertido para kebab-case)
- `--styleguide` - Também criar a documentação do styleguide
- `--force` - Sobrescrever componente existente

**Exemplos práticos:**

```
# Criar apenas o componente
php artisan design-system:make-component button

# Criar componente + documentação no styleguide
php artisan design-system:make-component card --styleguide

# Criar componente modal com documentação
php artisan design-system:make-component modal --styleguide

# Sobrescrever um componente existente
php artisan design-system:make-component alert --styleguide --force
```

**O que este comando cria:**

1. **Arquivo do componente:** `resources/views/components/{nome}.blade.php`

    - Template com suporte a variantes (default, primary, secondary, success, danger)
    - Template com suporte a tamanhos (sm, md, lg)
    - Props configuráveis via `@props`
    - Classes CSS dinâmicas com `match()`
2. **Documentação do styleguide** (se usar `--styleguide`): `resources/views/styleguide/components/{nome}.blade.php`

    - Página completa com preview do componente
    - Exemplos de todas as variantes
    - Exemplos de todos os tamanhos
    - Seção de uso com código
    - Tabela de props documentada

**Após criar um componente**, lembre-se de registrá-lo no `DesignSystemServiceProvider`:

```
// src/DesignSystemServiceProvider.php
Blade::component('design-system::components.button', 'button');
```

### 📚 Criar Documentação do Styleguide

[](#-criar-documentação-do-styleguide)

Gere documentação do styleguide para componentes ou páginas já existentes:

```
php artisan design-system:make-styleguide {componente} [--type=component|page] [--force]
```

**Opções:**

- `{componente}` - Nome do componente/página
- `--type` - Tipo de documentação: `component` (padrão) ou `page`
- `--force` - Sobrescrever documentação existente

**Exemplos práticos:**

```
# Criar documentação para um componente existente
php artisan design-system:make-styleguide alert --type=component

# Criar documentação de página (exemplo completo)
php artisan design-system:make-styleguide dashboard --type=page

# Criar documentação para página de clientes
php artisan design-system:make-styleguide clientes --type=page

# Sobrescrever documentação existente
php artisan design-system:make-styleguide card --type=component --force
```

**O que este comando cria:**

1. **Para componentes** (`--type=component`): `resources/views/styleguide/components/{nome}.blade.php`

    - Preview interativo do componente
    - Galeria de variantes
    - Exemplos de código
    - Documentação de props
2. **Para páginas** (`--type=page`): `resources/views/styleguide/pages/{nome}.blade.php`

    - Template de página completa
    - Exemplos de layout
    - Composição de componentes

Passo a Passo: Criando Seu Primeiro Componente
----------------------------------------------

[](#passo-a-passo-criando-seu-primeiro-componente)

Vamos criar um componente de badge do zero:

### 1️⃣ Gerar o Componente

[](#1️⃣-gerar-o-componente)

```
php artisan design-system:make-component badge --styleguide
```

**Saída esperada:**

```
Component 'badge' created successfully!
Location: resources/views/components/badge.blade.php
Styleguide view created successfully!
Location: resources/views/styleguide/components/badge.blade.php
Access at: /styleguide/components/badge

Don't forget to register the component in DesignSystemServiceProvider:
Blade::component('design-system::components.badge', 'badge');

```

### 2️⃣ Registrar o Componente

[](#2️⃣-registrar-o-componente)

Edite `src/DesignSystemServiceProvider.php` e adicione:

```
// Na seção de registro de componentes (por volta da linha 51)
Blade::component('design-system::components.badge', 'badge');
```

### 3️⃣ Personalizar o Componente (Opcional)

[](#3️⃣-personalizar-o-componente-opcional)

Abra `resources/views/components/badge.blade.php` e customize conforme necessário:

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

@php
    $classes = match($variant) {
        'primary' => 'bg-primary text-primary-foreground',
        'success' => 'bg-success text-success-foreground',
        'warning' => 'bg-warning text-warning-foreground',
        'danger' => 'bg-destructive text-destructive-foreground',
        default => 'bg-muted text-muted-foreground',
    };

    $sizes = match($size) {
        'sm' => 'text-xs px-2 py-0.5',
        'lg' => 'text-base px-4 py-2',
        default => 'text-sm px-3 py-1',
    };
@endphp

merge(['class' => "inline-flex items-center rounded-full font-medium {$classes} {$sizes}"]) }}>
    {{ $slot }}

```

### 4️⃣ Visualizar no Styleguide

[](#4️⃣-visualizar-no-styleguide)

Acesse: `http://seu-app.test/styleguide/components/badge`

### 5️⃣ Usar o Componente

[](#5️⃣-usar-o-componente)

```
{{-- Em qualquer view Blade --}}
Ativo
Erro
Novo
```

Configuração
------------

[](#configuração)

O pacote funciona imediatamente com padrões sensatos. Se você precisar personalizar a configuração, publique o arquivo de configuração:

```
php artisan vendor:publish --tag=design-system-config
```

Isso criará um arquivo `config/styleguide.php` onde você pode configurar a navegação do guia de estilo e metadados da página.

Publicando Assets
-----------------

[](#publicando-assets)

### Publicar Views

[](#publicar-views)

Para personalizar as views dos componentes, publique-as em sua aplicação:

```
php artisan vendor:publish --tag=design-system-views
```

As views serão publicadas em `resources/views/vendor/design-system/`.

### Publicar Assets CSS

[](#publicar-assets-css)

Para personalizar o estilo CSS:

```
php artisan vendor:publish --tag=design-system-assets
```

Os arquivos CSS serão publicados em `resources/css/vendor/design-system/`.

### Publicar Assets Públicos

[](#publicar-assets-públicos)

Para publicar imagens e outros assets públicos:

```
php artisan vendor:publish --tag=design-system-public
```

Os assets serão publicados em `public/vendor/design-system/`.

Uso
---

[](#uso)

### Componente de Tabela

[](#componente-de-tabela-1)

```

```

**Props:**

- `headers` (array) - Cabeçalhos das colunas
- `rows` (array) - Linhas de dados da tabela
- `striped` (bool) - Habilitar linhas listradas (padrão: false)

### Componente de Select Nativo

[](#componente-de-select-nativo-1)

```

```

**Props:**

- `options` (array) - Opções do select como pares valor => label
- `label` (string|null) - Texto do label
- `placeholder` (string|null) - Texto da opção de placeholder
- `hint` (string|null) - Texto de ajuda abaixo do select
- `error` (string|null) - Mensagem de erro (também altera o estilo)
- `disabled` (bool) - Desabilitar o select (padrão: false)

### Componente de Gráfico

[](#componente-de-gráfico-1)

```

```

**Props:**

- `data` (array) - Dados do gráfico com chaves 'label' e 'value'
- `type` (string) - Tipo de gráfico (atualmente apenas 'bar' é suportado) (padrão: 'bar')
- `height` (string) - Classe de altura do Tailwind (padrão: 'h-64')
- `showLegend` (bool) - Exibir a legenda (padrão: true)

🎨 Tokens de Design
------------------

[](#-tokens-de-design)

### Paleta de Cores

[](#paleta-de-cores)

O Design System inclui uma paleta de cores completa:

#### Cores Primárias

[](#cores-primárias)

- `bg-primary` / `text-primary` - Cor principal da marca
- `bg-primary-foreground` / `text-primary-foreground` - Texto sobre primária

#### Cores Semânticas

[](#cores-semânticas)

- `bg-success` / `text-success` - Verde (sucesso)
- `bg-info` / `text-info` - Azul (informação)
- `bg-warning` / `text-warning` - Amarelo (aviso)
- `bg-destructive` / `text-destructive` - Vermelho (erro/destrutivo)

#### Variantes Claras

[](#variantes-claras)

- `bg-orange-light` - Fundo laranja claro
- `bg-green-light` - Fundo verde claro
- `bg-blue-light` - Fundo azul claro

#### Cores de Superfície

[](#cores-de-superfície)

- `bg-background` - Fundo da página
- `bg-card` - Fundo de cards
- `bg-sidebar` - Fundo da sidebar
- `bg-muted` - Elementos discretos
- `bg-accent` - Estados de hover

### Tipografia

[](#tipografia)

**Fonte:** Kodchasan (Google Fonts)

```
{{-- Títulos --}}
Título Principal
Título de Seção
Subtítulo
Título de Card

{{-- Texto --}}
Texto do corpo
Texto secundário

{{-- Destaque --}}
R$ 110,00
```

### Border Radius

[](#border-radius)

**Padrão:** `rounded-xl`

Opções: `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-full`

Guia de Estilo
--------------

[](#guia-de-estilo)

O pacote inclui uma interface de guia de estilo integrada e interativa, acessível automaticamente após a instalação.

### 🌐 Acessando o Styleguide

[](#-acessando-o-styleguide)

Visite: `http://seu-app.test/styleguide`

### 📍 Rotas Disponíveis

[](#-rotas-disponíveis)

- **`/styleguide`** - Página principal com tokens de design (cores, tipografia, bordas)
- **`/styleguide/components/{componente}`** - Documentação de componentes individuais
- **`/styleguide/pages/{pagina}`** - Exemplos de páginas completas

**Exemplos:**

- `http://seu-app.test/styleguide` - Tokens de design
- `http://seu-app.test/styleguide/components/table` - Componente de tabela
- `http://seu-app.test/styleguide/components/chart` - Componente de gráfico
- `http://seu-app.test/styleguide/pages/clients` - Página de exemplo

### 🎨 O que você encontra no Styleguide

[](#-o-que-você-encontra-no-styleguide)

1. **Design Tokens**

    - Paleta de cores completa (primárias, semânticas, superfícies)
    - Sistema de tipografia (Kodchasan)
    - Escalas de border-radius
    - Preview de componentes básicos (botões, cards, badges, alerts)
2. **Documentação de Componentes**

    - Preview interativo
    - Exemplos de variantes (default, primary, secondary, success, danger)
    - Exemplos de tamanhos (sm, md, lg)
    - Código de uso
    - Tabela de props
3. **Páginas de Exemplo**

    - Composições completas de componentes
    - Templates prontos para uso
    - Exemplos de layouts

### 🔒 Desabilitar Styleguide em Produção

[](#-desabilitar-styleguide-em-produção)

Para desabilitar as rotas do styleguide em produção, edite `config/styleguide.php`:

```
return [
    'routes' => [
        'enabled' => env('STYLEGUIDE_ENABLED', app()->environment('local')),
    ],
];
```

E no seu arquivo `.env`:

```
# Desenvolvimento
STYLEGUIDE_ENABLED=true

# Produção
STYLEGUIDE_ENABLED=false
```

Testes
------

[](#testes)

Execute os testes do pacote com PHPUnit:

```
php artisan test
```

Ou execute suítes de teste específicas:

```
php artisan test --filter=ComponentsTest
php artisan test --filter=ServiceProviderTest
```

Estrutura do Pacote
-------------------

[](#estrutura-do-pacote)

```
laravel-design-system/
├── src/
│   └── DesignSystemServiceProvider.php
├── resources/
│   ├── views/
│   │   ├── components/
│   │   │   ├── table.blade.php
│   │   │   ├── native-select.blade.php
│   │   │   └── chart.blade.php
│   │   ├── layouts/
│   │   └── styleguide/
│   └── css/
│       └── app.css
├── routes/
│   └── styleguide.php
├── config/
│   └── styleguide.php
├── tests/
│   └── Feature/
│       ├── ComponentsTest.php
│       └── ServiceProviderTest.php
└── composer.json

```

🔧 Personalização Avançada
-------------------------

[](#-personalização-avançada)

### Workflow Completo de Personalização

[](#workflow-completo-de-personalização)

#### 1. Criar um Componente Customizado

[](#1-criar-um-componente-customizado)

```
# Gerar o componente base
php artisan design-system:make-component avatar --styleguide
```

#### 2. Customizar o Template

[](#2-customizar-o-template)

Edite `resources/views/components/avatar.blade.php`:

```
@props([
    'size' => 'md',
    'src' => null,
    'name' => '',
    'status' => null,
])

@php
    $sizes = match($size) {
        'xs' => 'w-6 h-6 text-xs',
        'sm' => 'w-8 h-8 text-sm',
        'lg' => 'w-16 h-16 text-xl',
        'xl' => 'w-24 h-24 text-2xl',
        default => 'w-10 h-10 text-base',
    };

    $initials = collect(explode(' ', $name))
        ->map(fn($word) => mb_substr($word, 0, 1))
        ->take(2)
        ->join('');
@endphp

    merge(['class' => "rounded-full bg-primary text-primary-foreground flex items-center justify-center font-semibold {$sizes}"]) }}>
        @if($src)

        @else
            {{ $initials }}
        @endif

    @if($status)

    @endif

```

#### 3. Registrar o Componente

[](#3-registrar-o-componente)

Em `src/DesignSystemServiceProvider.php`:

```
Blade::component('design-system::components.avatar', 'avatar');
```

#### 4. Atualizar a Documentação

[](#4-atualizar-a-documentação)

Edite `resources/views/styleguide/components/avatar.blade.php` com exemplos de uso.

#### 5. Usar o Componente

[](#5-usar-o-componente)

```

```

### Customizar Cores do Design System

[](#customizar-cores-do-design-system)

#### 1. Publique os Assets CSS

[](#1-publique-os-assets-css)

```
php artisan vendor:publish --tag=design-system-assets
```

#### 2. Edite as Variáveis CSS

[](#2-edite-as-variáveis-css)

Abra `resources/css/vendor/design-system/app.css` e customize as cores:

```
:root {
    /* Cores Primárias Customizadas */
    --primary: 220 90% 56%;
    --primary-foreground: 0 0% 100%;

    /* Cores Semânticas Customizadas */
    --success: 142 71% 45%;
    --warning: 38 92% 50%;
    --destructive: 0 84% 60%;
}
```

### Adicionar Novas Páginas ao Styleguide

[](#adicionar-novas-páginas-ao-styleguide)

#### 1. Criar a Página

[](#1-criar-a-página)

```
php artisan design-system:make-styleguide produtos --type=page
```

#### 2. Configurar a Rota

[](#2-configurar-a-rota)

Edite `config/styleguide.php`:

```
return [
    'pages' => [
        'produtos' => [
            'title' => 'Catálogo de Produtos',
            'description' => 'Página de exemplo do catálogo',
        ],
    ],
];
```

#### 3. Acessar a Página

[](#3-acessar-a-página)

`http://seu-app.test/styleguide/pages/produtos`

💡 Exemplos Práticos
-------------------

[](#-exemplos-práticos)

### Criar um Sistema de Notificações

[](#criar-um-sistema-de-notificações)

```
# 1. Criar o componente de notificação
php artisan design-system:make-component notification --styleguide

# 2. Criar a página de exemplo
php artisan design-system:make-styleguide notifications --type=page
```

Customizar o componente em `resources/views/components/notification.blade.php`:

```
@props([
    'type' => 'info',
    'title' => '',
    'dismissible' => true,
])

@php
    $types = match($type) {
        'success' => 'bg-green-light border-success text-foreground',
        'warning' => 'bg-warning/10 border-warning text-foreground',
        'error' => 'bg-destructive/10 border-destructive text-foreground',
        default => 'bg-blue-light border-info text-foreground',
    };

    $icons = match($type) {
        'success' => '✓',
        'warning' => '⚠',
        'error' => '✗',
        default => 'ℹ',
    };
@endphp

merge(['class' => "rounded-xl border p-4 flex items-start gap-3 {$types}"]) }}>
    {{ $icons }}

        @if($title)
            {{ $title }}
        @endif
        {{ $slot }}

    @if($dismissible)
        ×
    @endif

```

Uso:

```

    Sua alteração foi salva com sucesso.

    Ocorreu um erro ao processar sua solicitação.

```

### Criar um Componente de Badge de Status

[](#criar-um-componente-de-badge-de-status)

```
php artisan design-system:make-component status-badge --styleguide
```

```
@props([
    'status' => 'pending',
])

@php
    $config = match($status) {
        'active', 'approved', 'completed' => [
            'class' => 'bg-success text-success-foreground',
            'label' => 'Ativo',
        ],
        'inactive', 'pending' => [
            'class' => 'bg-warning text-warning-foreground',
            'label' => 'Pendente',
        ],
        'cancelled', 'rejected' => [
            'class' => 'bg-destructive text-destructive-foreground',
            'label' => 'Cancelado',
        ],
        default => [
            'class' => 'bg-muted text-muted-foreground',
            'label' => ucfirst($status),
        ],
    };
@endphp

merge(['class' => "inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {$config['class']}"]) }}>
    {{ $slot->isEmpty() ? $config['label'] : $slot }}

```

Uso:

```

Em Análise

```

🔍 Solução de Problemas
----------------------

[](#-solução-de-problemas)

### Componente não é reconhecido

[](#componente-não-é-reconhecido)

**Problema:** `View [components.meu-componente] not found`

**Solução:**

1. Verifique se o componente foi registrado no `DesignSystemServiceProvider`: ```
    Blade::component('design-system::components.meu-componente', 'meu-componente');
    ```
2. Limpe o cache de views: ```
    php artisan view:clear
    php artisan config:clear
    ```

### Styleguide não carrega

[](#styleguide-não-carrega)

**Problema:** Rota `/styleguide` retorna 404

**Solução:**

1. Verifique se o service provider está registrado em `bootstrap/providers.php`: ```
    UendelSilveira\DesignSystem\DesignSystemServiceProvider::class,
    ```
2. Limpe o cache de rotas: ```
    php artisan route:clear
    php artisan optimize:clear
    ```
3. Liste as rotas para verificar: ```
    php artisan route:list --path=styleguide
    ```

### Classes CSS não aplicam

[](#classes-css-não-aplicam)

**Problema:** Componentes aparecem sem estilo

**Solução:**

1. Certifique-se de que o Tailwind CSS está configurado
2. Adicione o caminho dos componentes ao `tailwind.config.js`: ```
    content: [
      './resources/views/**/*.blade.php',
      './resources/views/vendor/design-system/**/*.blade.php',
    ]
    ```
3. Recompile os assets: ```
    npm run build
    ```

### Views publicadas não atualizam

[](#views-publicadas-não-atualizam)

**Problema:** Mudanças nas views não aparecem

**Solução:**

1. Limpe o cache de views: ```
    php artisan view:clear
    ```
2. Se estiver usando Laravel Debugbar ou similar, desabilite temporariamente
3. Verifique se está editando o arquivo correto (pacote vs publicado)

### Namespace 'design-system' não encontrado

[](#namespace-design-system-não-encontrado)

**Problema:** `InvalidArgumentException: No hint path defined for [design-system]`

**Solução:**

1. O service provider não está carregado. Adicione em `bootstrap/providers.php`: ```
    return [
        App\Providers\AppServiceProvider::class,
        UendelSilveira\DesignSystem\DesignSystemServiceProvider::class,
    ];
    ```
2. Execute: ```
    php artisan package:discover
    php artisan config:clear
    ```

📋 Lista de Verificação para Deploy
----------------------------------

[](#-lista-de-verificação-para-deploy)

Antes de fazer deploy em produção:

- Desabilitar styleguide em produção (`STYLEGUIDE_ENABLED=false`)
- Compilar assets para produção (`npm run build`)
- Otimizar autoloader (`composer install --optimize-autoloader --no-dev`)
- Cachear configurações (`php artisan config:cache`)
- Cachear rotas (`php artisan route:cache`)
- Cachear views (`php artisan view:cache`)
- Verificar se todas as imagens públicas foram publicadas

🤝 Contribuindo
--------------

[](#-contribuindo)

Contribuições são bem-vindas! Siga estes passos:

1. Fork o projeto
2. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`)
3. Commit suas mudanças (`git commit -m 'Adiciona MinhaFeature'`)
4. Push para a branch (`git push origin feature/MinhaFeature`)
5. Abra um Pull Request

### Diretrizes de Contribuição

[](#diretrizes-de-contribuição)

- Mantenha o código limpo e bem documentado
- Adicione testes para novas funcionalidades
- Siga os padrões PSR-12
- Atualize a documentação quando necessário

💬 Suporte
---------

[](#-suporte)

- **Issues:** [GitHub Issues](https://github.com/uendelsilveira/laravel-design-system/issues)
- **Discussões:** [GitHub Discussions](https://github.com/uendelsilveira/laravel-design-system/discussions)
- **Email:**

📝 Comandos Rápidos (Cheat Sheet)
--------------------------------

[](#-comandos-rápidos-cheat-sheet)

```
# Instalação
composer require uendelsilveira/laravel-design-system
php artisan design-system:install

# Criar componentes
php artisan design-system:make-component {nome} --styleguide
php artisan design-system:make-styleguide {nome} --type=component

# Publicar assets
php artisan vendor:publish --tag=design-system-views
php artisan vendor:publish --tag=design-system-assets
php artisan vendor:publish --tag=design-system-config
php artisan vendor:publish --tag=design-system-public

# Limpar cache
php artisan view:clear
php artisan config:clear
php artisan route:clear

# Acessar styleguide
http://seu-app.test/styleguide
```

🌟 Recursos Úteis
----------------

[](#-recursos-úteis)

- **Styleguide Local:** `/styleguide`
- **Tailwind CSS:** [Documentação](https://tailwindcss.com)
- **Alpine.js:** [Documentação](https://alpinejs.dev)
- **Laravel Blade:** [Documentação](https://laravel.com/docs/blade)

---

Licença
-------

[](#licença)

A Licença MIT (MIT). Veja [LICENSE](LICENSE) para detalhes.

Autor
-----

[](#autor)

**[Uendel Silveira](https://github.com/uendelsilveira)**

[![Mail](https://camo.githubusercontent.com/00396455193d8753343fc20ab7dfb878766433afc579e3e27433e88e116e75e6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d456d61696c2d4431343833363f7374796c653d666c61742d737175617265266c6f676f3d476d61696c266c6f676f436f6c6f723d7768697465)](mailto:uendelsilveira@gmail.com)[![Linkedin](https://camo.githubusercontent.com/4d1182ca3632cdf96e65cc5e6b835624cacceaea03e3d61b5da38c68c9beca6d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4c696e6b6564496e2d3030373742353f7374796c653d666c61742d737175617265266c6f676f3d4c696e6b6564696e266c6f676f436f6c6f723d7768697465)](https://linkedin.com/in/uendelsilveira)[![GitHub](https://camo.githubusercontent.com/72449f629c59cbb6694aafa1339768eacf4b5590ef2b23d13d82ad999c11bcaf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4769744875622d3138313731373f7374796c653d666c61742d737175617265266c6f676f3d476974487562266c6f676f436f6c6f723d7768697465)](https://github.com/uendelsilveira)

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance79

Regular maintenance activity

Popularity3

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

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 ~0 days

Total

4

Last Release

108d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/9297d8e7fe16b509423d16efb4959688388743af689ddd494cd560806c6366af?d=identicon)[uendelsilveira](/maintainers/uendelsilveira)

---

Tags

laravelstyleguidedesign-systemblade-componentsui-components

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/uendelsilveira-laravel-design-system/health.svg)

```
[![Health](https://phpackages.com/badges/uendelsilveira-laravel-design-system/health.svg)](https://phpackages.com/packages/uendelsilveira-laravel-design-system)
```

###  Alternatives

[mkocansey/bladewind

Laravel UI Components using TailwindCSS, Blade Templates and vanilla Javascript

680109.4k](/packages/mkocansey-bladewind)[cagilo/cagilo

A set of open-source Blade components for the Laravel Framework

172996.5k](/packages/cagilo-cagilo)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1672.4k](/packages/developermithu-tallcraftui)[wireui/heroicons

The Tailwind Heroicons for laravel blade by WireUI

43390.8k5](/packages/wireui-heroicons)[itstructure/laravel-grid-view

Grid view for laravel framework

2546.6k2](/packages/itstructure-laravel-grid-view)[ycs77/inertia-laravel-ssr-head

Simple SSR Head for Inertia Laravel

3211.5k](/packages/ycs77-inertia-laravel-ssr-head)

PHPackages © 2026

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