PHPackages clique-ti/laravel-html - 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. clique-ti/laravel-html ActiveLibrary[Templating & Views](/categories/templating) clique-ti/laravel-html ====================== Pacote de renderização de HTML para Laravel, com ou sem Livewire. v1.0.0(4mo ago)112MITPHPPHP ^8.2 Since Dec 18Pushed 4mo agoCompare [ Source](https://github.com/CliqueTI/LaravelHtml)[ Packagist](https://packagist.org/packages/clique-ti/laravel-html)[ Docs](https://github.com/CliqueTI/LaravelHtml)[ RSS](/packages/clique-ti-laravel-html/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (2)Used By (0) CliqueTI HTML ============= [](#cliqueti-html) Pacote Laravel para renderização simples, fluente e customizável de componentes HTML — compatível tanto com **Blade puro** quanto com **Livewire 3**. Ele facilita o desenvolvimento de interfaces limpas e reutilizáveis, eliminando duplicação de HTML e permitindo composição de componentes de forma elegante, com suporte para atributos dinâmicos, callbacks e views overrideáveis. --- Instalação ---------- [](#instalação) Via Composer: ``` composer require cliqueti/html ``` O pacote utiliza **autodiscovery**. Nada mais é necessário. --- Publicar Views (opcional) ------------------------- [](#publicar-views-opcional) Se quiser personalizar a aparência dos componentes: ``` php artisan vendor:publish --tag=views --provider="CliqueTi\LaravelHtml\Providers\HtmlProvider" ``` Isso criará: ``` resources/views/vendor/cliqueti-html/ ``` --- Uso dos Componentes =================== [](#uso-dos-componentes) Todos os componentes são acessados via **Facade**: ``` {!! Html::input(...) !!} {!! Html::label(...) !!} {!! Html::select(...) !!} {!! Html::selectMultiple(...) !!} {!! Html::checkbox(...) !!} {!! Html::radio(...) !!} {!! Html::textarea(...) !!} {!! Html::button(...) !!} {!! Html::link(...) !!} {!! Html::table(...)->column(...)->make() !!} ``` --- Componentes =========== [](#componentes) Label ----- [](#label) ``` {!! Html::label(text: 'Nome', attrs: ['class' => 'form-label']) !!} ``` --- Input ----- [](#input) `name` é opcional (compatível com Livewire). ``` {!! Html::input( type: 'text', name: 'name', params: [ 'placeholder' => 'Digite seu nome', 'class' => 'form-control', 'wire:model.live' => 'state.name' ] ) !!} ``` --- Textarea -------- [](#textarea) ``` {!! Html::textarea( name: 'obs', value: 'Texto inicial', attrs: ['class' => 'form-control'] ) !!} ``` --- Checkbox -------- [](#checkbox) ``` {!! Html::checkbox( name: 'active', value: 1, checked: true, attrs: ['class' => 'form-check-input'] ) !!} ``` --- Radio ----- [](#radio) ``` {!! Html::radio( name: 'gender', value: 'M', checkedValue: old('gender'), attrs: ['class' => 'form-check-input'] ) !!} ``` --- Select (simples) ---------------- [](#select-simples) ``` {!! Html::select( name: 'status', options: ['Ativo', 'Inativo', 'Pendente'], attrs: ['class' => 'form-select'] ) !!} ``` --- Select (associativo com selected) --------------------------------- [](#select-associativo-com-selected) ``` {!! Html::select( name: 'tipo', options: [ 10 => 'Opção A', 15 => 'Opção B' ], selected: 15 ) !!} ``` --- Select com concatenação ----------------------- [](#select-com-concatenação) ``` {!! Html::select( name: 'user_id', options: \App\Models\User::select('id','name','email')->get(), display: 'name,email', separator: ' - ' ) !!} ``` Resultado: ``` Paulo Brandeburski - paulo@cliqueti.com.br ``` --- Select Multiple --------------- [](#select-multiple) ``` {!! Html::selectMultiple( name: 'roles', options: $roles, selected: [1, 3], display: 'name', attrs: ['class' => 'form-select'] ) !!} ``` --- Link ---- [](#link) ``` {!! Html::link( text: 'Editar', href: route('users.edit', $id), attrs: ['class' => 'btn btn-primary'] ) !!} ``` --- Button ------ [](#button) ``` {!! Html::button( text: 'Salvar', attrs: ['class' => 'btn btn-success', 'wire:click' => 'save'] ) !!} ``` --- Tabela (Table Component) ======================== [](#tabela-table-component) O componente de tabela é poderoso, flexível e fácil de usar. ### Exemplo básico [](#exemplo-básico) ``` {!! Html::table(data: $users, attrs: ['class' => 'table table-striped']) ->column(header: 'ID', key: 'id') ->column(header: 'Nome', key: 'name') ->column(header: 'Email', key: 'email') ->make() !!} ``` --- Acesso seguro a relacionamento ------------------------------ [](#acesso-seguro-a-relacionamento) ``` ->column(header: 'Time', key: 'team.name') ``` Mesmo se `$user->team` for `null`, nenhum erro é lançado. --- Callback para formatação ------------------------ [](#callback-para-formatação) ``` ->column(header: 'Criado em', callback: fn($u) => $u->created_at->format('d/m/Y')) ``` --- Callback com componentes HTML ----------------------------- [](#callback-com-componentes-html) ``` ->column( header: 'Ações', attrs: ['style' => 'width: 8rem'], callback: function ($user) { return Html::link( text: 'Editar', href: '#', attrs: ['class' => 'btn btn-sm btn-primary', 'wire:click' => "edit({$user->id})"] ); } ) ``` --- Exemplo completo em Livewire ============================ [](#exemplo-completo-em-livewire) ### Componente: [](#componente) ``` class Team extends Component { public ?Collection $teams = null; public function mount() { $this->teams = \App\Models\Team::all(); } public function render() { return view('livewire.global.team'); } } ``` ### View: [](#view) ``` {!! Html::table(data: $teams) ->column(header: 'ID', key: 'id') ->column(header: 'Nome', key: 'name') ->column(header: 'Time', key: 'team.name') ->column(header: 'Ações', callback: fn($t) => Html::link( text: 'Editar', href: '#', attrs: ['wire:click' => "edit({$t->id})", 'class' => 'btn btn-warning btn-sm'] ) ) ->make() !!} ``` --- Sobrescrevendo Views ==================== [](#sobrescrevendo-views) Para personalizar qualquer componente: 1. Publique as views: ``` php artisan vendor:publish --tag=views ``` 2. Edite em: ``` resources/views/vendor/cliqueti-html/ ``` --- Licença ======= [](#licença) MIT License. ### Health Score 36 — LowBetter than 82% of packages Maintenance74 Regular maintenance activity Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity47 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 145d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/16b6a42cc04d121e777f66579e6c175870a587590599571bf08373d4e1bebd66?d=identicon)[cliqueti](/maintainers/cliqueti) --- Top Contributors [![PauloBrand](https://avatars.githubusercontent.com/u/59444288?v=4)](https://github.com/PauloBrand "PauloBrand (4 commits)") --- Tags laravelcomponentshtmlbladelivewire ### Embed Badge ![Health badge](/badges/clique-ti-laravel-html/health.svg) ``` [![Health](https://phpackages.com/badges/clique-ti-laravel-html/health.svg)](https://phpackages.com/packages/clique-ti-laravel-html) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[tomsix/laravel-components-library A collection of pre-made Blade components for Laravel 7.x and up 613.1k](/packages/tomsix-laravel-components-library) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)