PHPackages nunes/rumobr-theme - 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. nunes/rumobr-theme ActiveLibrary[Templating & Views](/categories/templating) nunes/rumobr-theme ================== Tema padrão para ser utilizado em todos os projetos interno e externos da Rumobr Tecnologia (www.rumobr.com.br) v1.1.0(3mo ago)0161MITVuePHP ^8.1 Since Feb 20Pushed 3mo agoCompare [ Source](https://github.com/leandrorumobr/rumobr-theme)[ Packagist](https://packagist.org/packages/nunes/rumobr-theme)[ Docs](https://github.com/leandrorumobr/rumobr-theme)[ RSS](/packages/nunes-rumobr-theme/feed)WikiDiscussions main Synced 1w ago READMEChangelog (2)Dependencies (4)Versions (3)Used By (0) Rumo BR Tema ============ [](#rumo-br-tema) [![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT) Componentes Vue 3 e CSS para projetos Laravel - Tema Rumo BR. Uma biblioteca completa de componentes UI baseados em shadcn/ui, prontos para uso em aplicações Laravel com Vue 3. 📋 Requisitos ------------ [](#-requisitos) - PHP 8.1 ou superior - Laravel 10.0 ou superior (suporta Laravel 11 e 12) - Vue 3.3 ou superior - Node.js e NPM (para build dos assets) 🚀 Instalação ------------ [](#-instalação) ### 1. Instalar via Composer [](#1-instalar-via-composer) ``` composer require nunes/rumobr-theme ``` ### 2. Publicar Componentes e Assets [](#2-publicar-componentes-e-assets) ``` php artisan rumobr-theme:publish ``` Este comando publica: - Componentes Vue em `resources/js/components/` - Páginas de exemplo em `resources/js/pages/` - CSS em `resources/css/` Para sobrescrever arquivos existentes, use a flag `--force`: ``` php artisan rumobr-theme:publish --force ``` ### 3. Compilar Assets [](#3-compilar-assets) ``` npm run build ``` ou em modo de desenvolvimento: ``` npm run dev ``` 📦 Componentes Disponíveis ------------------------- [](#-componentes-disponíveis) ### Componentes UI Base [](#componentes-ui-base) O pacote inclui uma biblioteca completa de componentes UI baseados em shadcn/ui: #### Navegação e Layout [](#navegação-e-layout) - **Alert** - Alertas e notificações - **Avatar** - Avatar de usuário - **Badge** - Badges e etiquetas - **Breadcrumb** - Navegação breadcrumb completa - **Button** - Botões com múltiplas variantes - **Card** - Cards com header, content e footer - **Dialog** - Modais e diálogos - **Dropdown Menu** - Menus dropdown - **Navigation Menu** - Menu de navegação - **Separator** - Separadores visuais - **Sheet** - Painéis laterais (drawer) - **Sidebar** - Sistema completo de sidebar - **Tooltip** - Tooltips informativos #### Formulários [](#formulários) - **Checkbox** - Checkboxes - **Input** - Campos de entrada - **Input OTP** - Input para códigos OTP - **Label** - Labels para formulários - **Toggle Group** - Grupo de toggles #### Feedback e Utilitários [](#feedback-e-utilitários) - **Collapsible** - Elementos colapsáveis - **Skeleton** - Placeholders de carregamento - **Spinner** - Indicadores de carregamento ### Componentes de Layout [](#componentes-de-layout) - **AppShell** - Shell principal da aplicação - **AppHeader** - Cabeçalho da aplicação - **AppSidebar** - Sidebar da aplicação - **AppContent** - Container de conteúdo - **AppLogo** - Logo da aplicação - **AppLogoIcon** - Ícone do logo - **Breadcrumbs** - Componente de breadcrumbs - **Heading** - Títulos e cabeçalhos ### Componentes de Navegação [](#componentes-de-navegação) - **NavMain** - Navegação principal - **NavFooter** - Rodapé de navegação - **NavUser** - Menu do usuário - **UserMenuContent** - Conteúdo do menu do usuário - **UserInfo** - Informações do usuário ### Componentes Funcionais [](#componentes-funcionais) - **Modal** - Modal customizado - **AlertError** - Alertas de erro - **AlertGeral** - Alertas gerais - **InputError** - Mensagens de erro para inputs - **TextLink** - Links estilizados - **DeleteUser** - Componente para deletar usuário - **TwoFactorSetupModal** - Modal de configuração 2FA - **TwoFactorRecoveryCodes** - Códigos de recuperação 2FA - **AppearanceTabs** - Tabs de aparência (tema claro/escuro) - **PlaceholderPattern** - Padrões de placeholder 💻 Uso ----- [](#-uso) ### Importar Componentes [](#importar-componentes) Após publicar os componentes, você pode importá-los em seu `app.js` ou `resources/js/app.js`: ``` import { createApp } from 'vue'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import AppShell from '@/components/AppShell.vue'; import AppHeader from '@/components/AppHeader.vue'; import AppSidebar from '@/components/AppSidebar.vue'; // Importar CSS import '@/css/app.css'; const app = createApp({}); // Registrar componentes globalmente (opcional) app.component('Button', Button); app.component('Card', Card); app.component('CardContent', CardContent); app.component('CardHeader', CardHeader); app.component('CardTitle', CardTitle); app.mount('#app'); ``` ### Exemplo de Uso - Button [](#exemplo-de-uso---button) ``` Clique aqui Deletar Salvar import { Button } from '@/components/ui/button'; ``` ### Exemplo de Uso - Card [](#exemplo-de-uso---card) ``` Título do Card Conteúdo do card aqui... import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; ``` ### Exemplo de Uso - Dialog (Modal) [](#exemplo-de-uso---dialog-modal) ``` Título do Modal Conteúdo do modal aqui... import { ref } from 'vue'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; const isOpen = ref(false); ``` ### Exemplo de Uso - Layout Completo [](#exemplo-de-uso---layout-completo) ``` import AppShell from '@/components/AppShell.vue'; import AppSidebar from '@/components/AppSidebar.vue'; import AppHeader from '@/components/AppHeader.vue'; import AppContent from '@/components/AppContent.vue'; const breadcrumbs = [ { title: 'Home', href: '/' }, { title: 'Dashboard', href: '/dashboard' }, ]; ``` 📁 Estrutura de Arquivos Publicados ---------------------------------- [](#-estrutura-de-arquivos-publicados) Após executar `php artisan rumobr-theme:publish`, os seguintes arquivos serão criados: ``` resources/ ├── js/ │ ├── components/ │ │ ├── ui/ # Componentes UI base │ │ ├── AppShell.vue │ │ ├── AppHeader.vue │ │ ├── AppSidebar.vue │ │ └── ... # Outros componentes │ └── pages/ │ └── padrao/ # Páginas de exemplo │ ├── AlertasToast.vue │ ├── Botoes.vue │ ├── Cores.vue │ ├── Inputs.vue │ └── Modal.vue └── css/ └── app.css # Estilos CSS ``` 🎨 Páginas de Exemplo -------------------- [](#-páginas-de-exemplo) O pacote inclui páginas de exemplo que demonstram o uso dos componentes: - **AlertasToast.vue** - Exemplos de alertas e toasts - **Botoes.vue** - Exemplos de botões e variantes - **Cores.vue** - Paleta de cores do tema - **Inputs.vue** - Exemplos de campos de formulário - **Modal.vue** - Exemplos de modais e diálogos 🔧 Configuração -------------- [](#-configuração) O Service Provider é registrado automaticamente pelo Laravel. Não é necessária configuração adicional. 📝 Comandos Disponíveis ---------------------- [](#-comandos-disponíveis) ### Publicar Assets [](#publicar-assets) ``` php artisan rumobr-theme:publish ``` Publica todos os componentes, páginas e CSS. ### Publicar com Força [](#publicar-com-força) ``` php artisan rumobr-theme:publish --force ``` Sobrescreve arquivos existentes. 🧪 Testes -------- [](#-testes) ``` composer test ``` ou ``` phpunit ``` 🎯 Suporte --------- [](#-suporte) - **Issues**: [GitHub Issues](https://github.com/leandrorumobr/rumobr-theme/issues) - **Source**: [GitHub Repository](https://github.com/leandrorumobr/rumobr-theme) - **Email**: 👤 Autor ------- [](#-autor) **Leandro Nunes** - GitHub: [@leandrorumobr](https://github.com/leandrorumobr) - Email: 📄 Licença --------- [](#-licença) Este projeto está licenciado sob a licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes. 🙏 Agradecimentos ---------------- [](#-agradecimentos) Este projeto utiliza componentes baseados em [shadcn/ui](https://ui.shadcn.com/) e [Reka UI](https://reka-ui.com/). --- **Desenvolvido com ❤️ pela equipe Rumo BR** ### Health Score 38 — LowBetter than 83% of packages Maintenance79 Regular maintenance activity Popularity14 Limited adoption so far Community6 Small or concentrated contributor base Maturity44 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 ~0 days Total 2 Last Release 109d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/29780ad1747a0d38171a29fc01f7072d10d61c53068c3a1e43f9515e228f5b39?d=identicon)[nunes](/maintainers/nunes) --- Top Contributors [![leandro-nunes-rumobr](https://avatars.githubusercontent.com/u/248686719?v=4)](https://github.com/leandro-nunes-rumobr "leandro-nunes-rumobr (9 commits)") --- Tags laraveluicomponentsthemevue ### Code Quality TestsPHPUnit Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/nunes-rumobr-theme/health.svg) ``` [![Health](https://phpackages.com/badges/nunes-rumobr-theme/health.svg)](https://phpackages.com/packages/nunes-rumobr-theme) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k531.0k21](/packages/robsontenorio-mary)[area17/blast Storybook for Laravel Blade 312713.5k](/packages/area17-blast)[kompo/kompo Laravel & Vue.js FullStack Components for Rapid Application Development 11914.4k42](/packages/kompo-kompo)[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.4k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)