PHPackages jksantos/jetax - 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. [Utility & Helpers](/categories/utility) 4. / 5. jksantos/jetax ActiveLibrary[Utility & Helpers](/categories/utility) jksantos/jetax ============== Design system TALL Stack para Laravel — componentes Livewire, Alpine.js e Tailwind CSS. v1.1.2(3w ago)010↓100%MITBladePHP ^8.4 Since May 7Pushed 3w agoCompare [ Source](https://github.com/JotaKSantos/jetax)[ Packagist](https://packagist.org/packages/jksantos/jetax)[ RSS](/packages/jksantos-jetax/feed)WikiDiscussions main Synced 1w ago READMEChangelog (4)Dependencies (6)Versions (6)Used By (0) [![Jetax Design System](https://camo.githubusercontent.com/fcfa83282d728644c4a70364c256097250d6b195de987b9a5216683b1134849b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a657461782d44657369676e25323053797374656d2d3030363161353f7374796c653d666f722d7468652d6261646765266c6162656c436f6c6f723d313431413330)](https://camo.githubusercontent.com/fcfa83282d728644c4a70364c256097250d6b195de987b9a5216683b1134849b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a657461782d44657369676e25323053797374656d2d3030363161353f7374796c653d666f722d7468652d6261646765266c6162656c436f6c6f723d313431413330) **Design System opinativo para TALL Stack — TailwindCSS, Alpine.js, Laravel e Livewire.** [![Latest Version](https://camo.githubusercontent.com/f0c5008af37ef8c64e7cac1e31313ea7c3c7714a5cf0e21145c5eeb2bec67955/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a6b73616e746f732f6a657461783f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jksantos/jetax) [![Total Downloads](https://camo.githubusercontent.com/4b996f6749056891587b569997d4a791250cd8fadb04daa95001f30550ce363b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a6b73616e746f732f6a657461783f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jksantos/jetax) [![License](https://camo.githubusercontent.com/c4abee06acdd09200e6c131eed3390b7181ec437c8bcc3454824337fd6bb5e11/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6a6b73616e746f732f6a657461783f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jksantos/jetax) [![PHP 8.4+](https://camo.githubusercontent.com/4fc9b2b2def3086c8c17ad0da3a54ef454a9448d6ed816da7837f1bfb5212a73/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e342532422d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870)](https://camo.githubusercontent.com/4fc9b2b2def3086c8c17ad0da3a54ef454a9448d6ed816da7837f1bfb5212a73/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e342532422d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870) [![Laravel 12+](https://camo.githubusercontent.com/1935ba84f80d8fd0428eeb3f169ff5e17470fcee31ea645e9eceff09797937be/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322532422d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c)](https://camo.githubusercontent.com/1935ba84f80d8fd0428eeb3f169ff5e17470fcee31ea645e9eceff09797937be/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322532422d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c) [![Livewire 4+](https://camo.githubusercontent.com/9da05d4cf74838ed94a6387548c111eff24babaee5179b08371b5637319ffa5b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d342532422d4642373041393f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/9da05d4cf74838ed94a6387548c111eff24babaee5179b08371b5637319ffa5b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d342532422d4642373041393f7374796c653d666c61742d737175617265) [![Tailwind 4+](https://camo.githubusercontent.com/f3ba7f9e44afffa03a51f6680e84252878dd3dce65a1a7fb43a3dec6a78f0bf2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5461696c77696e642d342532422d3036423644343f7374796c653d666c61742d737175617265266c6f676f3d7461696c77696e64637373)](https://camo.githubusercontent.com/f3ba7f9e44afffa03a51f6680e84252878dd3dce65a1a7fb43a3dec6a78f0bf2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5461696c77696e642d342532422d3036423644343f7374796c653d666c61742d737175617265266c6f676f3d7461696c77696e64637373) --- Sobre o Jetax ------------- [](#sobre-o-jetax) **Jetax** (`jksantos/jetax`) é um pacote Composer que entrega um design system completo para a TALL Stack. Instale um comando, rode o instalador, e tenha imediatamente sidebar, topbar, workspace e 60+ componentes Blade/Livewire prontos para uso. ### Por que Jetax? [](#por-que-jetax) - Componentes construídos nativamente para **Livewire v4** com props, attributes e slots - Design system coeso com dark mode nativo e script anti-FOUC - Totalmente publicável — customize qualquer view, config ou asset via `vendor:publish` - AlpineJS carregado automaticamente via `@livewireScripts` — zero configuração extra - Tipografia profissional com **Manrope** (headlines) e **Inter** (body) - Icones via **Material Symbols Outlined** com componente `` --- Requisitos ---------- [](#requisitos) DependenciaVersaoPHP8.4+Laravel12+Livewire4+Tailwind CSS4+Alpine.js3+ (carregado pelo Livewire)--- Instalacao ---------- [](#instalacao) ### Pre-requisitos [](#pre-requisitos) Antes de instalar o Jetax, seu projeto Laravel precisa ter o **Tailwind CSS 4+** configurado. Se ainda nao tiver: ``` # Instalar Tailwind CSS via npm npm install -D tailwindcss @tailwindcss/vite # Ou via yarn yarn add -D tailwindcss @tailwindcss/vite ``` No seu `vite.config.js`, adicione o plugin: ``` import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ tailwindcss(), laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], }); ``` No seu `resources/css/app.css`, adicione os imports das fontes **antes de qualquer outro import**: ``` /* 1. Google Fonts — deve vir PRIMEIRO, antes de qualquer outro @import */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;600;700;800&family=Inter:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* 2. Tailwind CSS */ @import "tailwindcss"; ``` > **Importante:** Os imports do Google Fonts e Material Symbols precisam vir **antes** de `@import "tailwindcss"` e do import do Jetax. Quando colocados dentro de `jetax.css`, o Vite/Tailwind gera alertas de build por restrições do CSS Modules. > O **Livewire 4+** tambem e obrigatorio. Instale com `composer require livewire/livewire` caso nao tenha. ### 1. Instalar o pacote [](#1-instalar-o-pacote) ``` composer require jksantos/jetax ``` O ServiceProvider e registrado automaticamente via Laravel Package Discovery. Todos os componentes `` ficam disponiveis imediatamente. ### 2. Executar o instalador [](#2-executar-o-instalador) ``` php artisan jetax:install ``` O comando `jetax:install` publica o CSS source, configura o Tailwind e adiciona o `@import` necessario no seu arquivo CSS principal. ### 3. Configurar o CSS [](#3-configurar-o-css) No seu `resources/css/app.css`, adicione (caso o instalador nao tenha feito automaticamente): ``` /* Google Fonts — SEMPRE antes de qualquer outro @import */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;600;700;800&family=Inter:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); @import "../../vendor/jksantos/jetax/resources/css/jetax.css"; @source "../../vendor/jksantos/jetax/resources/views"; ``` > **Importante:** Os imports do Google Fonts e Material Symbols Outlined devem ser os **primeiros** `@import` do arquivo. O Jetax nao os inclui diretamente para evitar alertas de build gerados pelo Vite/Tailwind CSS ao processar URLs externas dentro de pacotes. ### 4. Carregar Livewire no layout [](#4-carregar-livewire-no-layout) No seu layout Blade principal: ``` {{-- Script anti-FOUC para dark mode (incluso no layout do Jetax) --}} @livewireStyles @vite(['resources/css/app.css', 'resources/js/app.js']) {{ $slot }} @livewireScripts {{-- Carrega Alpine.js automaticamente --}} ``` ### 5. Pronto! Use os componentes [](#5-pronto-use-os-componentes) ``` Clientes Novo cliente ``` --- Publicacao de Recursos ---------------------- [](#publicacao-de-recursos) Publique apenas o que precisar customizar: ``` # Configuracao (tokens, fontes, breakpoints) php artisan vendor:publish --tag=jetax-config # Views dos componentes (para override) php artisan vendor:publish --tag=jetax-views # Assets compilados (CSS, fontes, icones) php artisan vendor:publish --tag=jetax-assets # CSS source (para customizacao com Tailwind v4) php artisan vendor:publish --tag=jetax-css-source # Tudo de uma vez php artisan vendor:publish --provider="Jetax\DesignSystem\JetaxServiceProvider" ``` --- Componentes ----------- [](#componentes) ### Scaffold / Layout [](#scaffold--layout) ComponenteDescricao``Shell principal (sidebar + topbar + workspace)``Navegacao lateral com active-pill indicator``Barra superior com glassmorphism``Layout para telas de autenticacao``Cabecalho de pagina com breadcrumb e acoes### Formularios [](#formularios) `checkbox` `radio` `color` `currency` `date` `input` `input-group` `input-select` `input-masks` `number` `password` `pin` `range` `tag` `time` `textarea` `toggle` `select` `upload` `validation` `editor` ### Interface (UI) [](#interface-ui) `accordion` `alert` `avatar` `back-to-top` `badge` `breadcrumb` `button` `card` `carousel` `collapse` `clipboard` `dismissible` `dropdown` `icon` `modal` `list-group` `loading` `popover` `progress` `pagination` `rating` `skeleton` `slide` `step` `tab` `table` `tooltip` ### Interacoes [](#interacoes) `dialog` `toast` > Todos os componentes usam o prefixo ``. Exemplo: ``, ``. --- Dark Mode --------- [](#dark-mode) O Jetax suporta dark mode nativo via estrategia `class` do Tailwind v4. A alternancia e gerenciada por Alpine.js com persistencia em `localStorage`. Um script anti-FOUC inline no `` garante que o tema correto seja aplicado antes do primeiro render. --- Design Tokens ------------- [](#design-tokens) Os tokens visuais sao definidos como CSS custom properties via Tailwind v4 `@theme {}`: ``` primary: #00497e secondary: #0061a5 surface: #FAF8FF surface-card: #FFFFFF on-surface: #111A37 sidebar: #141A30 ``` Dark mode aplica overrides em `:root.dark {}`. Customize via `config/jetax.php` apos publicacao. --- Desenvolvimento --------------- [](#desenvolvimento) O pacote e desenvolvido como pacote Composer independente, testado com Orchestra Testbench. O ambiente de desenvolvimento usa Docker: ``` cd packages/jksantos/jetax/ # Instalar dependencias docker compose run --rm php composer install # Rodar testes docker compose run --rm php ./vendor/bin/pest # Formatar codigo docker compose run --rm php ./vendor/bin/pint --dirty # Compilar assets docker compose run --rm node npm run build ``` ### Estrutura do Projeto [](#estrutura-do-projeto) ``` packages/jksantos/jetax/ ├── src/ # ServiceProvider, componentes PHP ├── resources/ │ ├── views/components/ # Templates Blade │ └── css/ # CSS source com tokens ├── config/ # jetax.php configuracao ├── tests/ # Testes Pest + Orchestra Testbench └── composer.json ``` --- Licenca ------- [](#licenca) Jetax e software open-source licenciado sob a [licenca MIT](https://opensource.org/licenses/MIT). ### Health Score 43 — FairBetter than 89% of packages Maintenance94 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity55 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 ~2 days Total 4 Last Release 26d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/62d37fb8bcb9794b6837466901c8c4f4e0cc9dd4dfc5c4e5e53c710e9db8a4d3?d=identicon)[JotaKSantos](/maintainers/JotaKSantos) --- Top Contributors [![JotaKSantos](https://avatars.githubusercontent.com/u/27768864?v=4)](https://github.com/JotaKSantos "JotaKSantos (23 commits)") --- Tags laravelcomponentslivewiretailwindcssdesign-system ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/jksantos-jetax/health.svg) ``` [![Health](https://phpackages.com/badges/jksantos-jetax/health.svg)](https://phpackages.com/packages/jksantos-jetax) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9466.8M119](/packages/livewire-flux)[ramonrietdijk/livewire-tables Dynamic tables for models with Laravel Livewire 21355.6k](/packages/ramonrietdijk-livewire-tables)[lakm/laravel-comments Integrate seamless commenting functionality into your Laravel project. 40614.3k1](/packages/lakm-laravel-comments)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 23100.9k12](/packages/marcorieser-statamic-livewire)[team-nifty-gmbh/tall-datatables Server-side rendered datatables for Laravel and Livewire 1319.7k3](/packages/team-nifty-gmbh-tall-datatables) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)