PHPackages valk-ui/blade - 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. valk-ui/blade ActiveLibrary[Templating & Views](/categories/templating) valk-ui/blade ============= Valk UI - Modern Blade Components Library for Laravel with Tailwind CSS 1.0.0(7mo ago)001MITTypeScriptPHP ^8.1 Since Nov 24Pushed 5mo agoCompare [ Source](https://github.com/ferforastieri/valk-ui)[ Packagist](https://packagist.org/packages/valk-ui/blade)[ Docs](https://github.com/ferforastieri/valk-ui)[ RSS](/packages/valk-ui-blade/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (1)Versions (1)Used By (0) Valk UI ======= [](#valk-ui) [![Valk UI](https://camo.githubusercontent.com/008ce93013cf5f994919cedfee58c04c7b5d22b4b9e32ef1a3da239cd60fa34e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56616c6b25323055492d76312e342e362d626c75653f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/008ce93013cf5f994919cedfee58c04c7b5d22b4b9e32ef1a3da239cd60fa34e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56616c6b25323055492d76312e342e362d626c75653f7374796c653d666f722d7468652d6261646765)[![License](https://camo.githubusercontent.com/daa52099573be5a50c320c4387496400f2f722e49f86a42db8d5778130d3582d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/daa52099573be5a50c320c4387496400f2f722e49f86a42db8d5778130d3582d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666f722d7468652d6261646765)[![TypeScript](https://camo.githubusercontent.com/4daf3918f7807824c9bc9501b5d8bbd7a115bd14f44a5cb55fea5b50ecb38c16/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d352e332d626c75653f7374796c653d666f722d7468652d6261646765266c6f676f3d74797065736372697074)](https://camo.githubusercontent.com/4daf3918f7807824c9bc9501b5d8bbd7a115bd14f44a5cb55fea5b50ecb38c16/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d352e332d626c75653f7374796c653d666f722d7468652d6261646765266c6f676f3d74797065736372697074)[![React](https://camo.githubusercontent.com/c654a36310c1432914d7ccaf3afe4a3c030cc7d3dcd1bacdff11b5bb2abf8ede/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d31382e332d626c75653f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374)](https://camo.githubusercontent.com/c654a36310c1432914d7ccaf3afe4a3c030cc7d3dcd1bacdff11b5bb2abf8ede/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d31382e332d626c75653f7374796c653d666f722d7468652d6261646765266c6f676f3d7265616374) **Biblioteca moderna de componentes UI para React** [Documentação](#-documenta%C3%A7%C3%A3o) • [Instalação](#-instala%C3%A7%C3%A3o-r%C3%A1pida) • [Componentes](#-componentes-dispon%C3%ADveis) • [Contribuir](#-contribuindo) --- ✨ Características ----------------- [](#-características) - 🎨 **Design Moderno**: Componentes bonitos e consistentes com Tailwind CSS - ⚛️ **React/TypeScript**: Totalmente tipado e pronto para produção - 🌙 **Dark Mode**: Suporte nativo a modo escuro - 📦 **CLI Interativo**: Instale apenas os componentes que você precisa - 🎯 **Zero Dependências**: Componentes leves e performáticos - ♿ **Acessível**: Construído com acessibilidade em mente - 🔧 **Customizável**: Fácil de personalizar e estender 🚀 Instalação Rápida ------------------- [](#-instalação-rápida) ### Usando o CLI (Recomendado) [](#usando-o-cli-recomendado) ``` # Instalar globalmente npm install -g valk-ui # Ou usar diretamente com npx npx valk-ui ``` O CLI interativo permite: - ✅ Escolher idioma (PT, EN, ES) - ✅ Instalar por categoria ou individualmente - ✅ Definir diretório de instalação ### Instalação Manual [](#instalação-manual) #### React/TypeScript [](#reacttypescript) ``` # Copie os componentes de packages/react/src/components # para o seu projeto em ./src/components/ui ``` 📖 Documentação -------------- [](#-documentação) Acesse a documentação completa em: Ou execute localmente: ``` cd packages/docs npm install npm run dev ``` 🎨 Componentes Disponíveis ------------------------- [](#-componentes-disponíveis) ### 📝 Formulários [](#-formulários) - **Button** - Botões com múltiplas variantes e tamanhos - **Input** - Campos de entrada com suporte a ícones e validação - **Select** - Seletor customizado com busca e modo múltiplo - **Checkbox** - Checkbox customizado com label e descrição - **Toggle** - Switch toggle com diferentes tamanhos - **DatePicker** - Seletor de data com calendário interativo ### 💬 Feedback [](#-feedback) - **Modal** - Modal responsivo com diferentes tamanhos - **StatusBadge** - Badges para indicar status - **ProgressBar** - Barra de progresso com diferentes cores - **Skeleton** - Placeholder de carregamento para estados assíncronos ### 📐 Layout [](#-layout) - **Avatar** - Avatar com fallback para iniciais - **MetricCard** - Card para exibir métricas e KPIs - **PaginatedTable** - Tabela paginada com busca e ordenação ### 📊 Gráficos [](#-gráficos) - **BarChart** - Gráfico de barras comparativo - **DonutChart** - Gráfico de rosca (donut) - **LineChart** - Gráfico de linha temporal 🏗️ Estrutura do Projeto ----------------------- [](#️-estrutura-do-projeto) ``` valk-ui/ ├── packages/ │ ├── react/ # Componentes React/TypeScript │ │ ├── cli/ # CLI publicado pelo pacote │ │ ├── src/ │ │ │ ├── components/ # Componentes organizados por categoria │ │ │ │ ├── forms/ │ │ │ │ ├── feedback/ │ │ │ │ ├── layout/ │ │ │ │ └── charts/ │ │ │ └── lib/ # Utilitários (cn, etc) │ │ └── package.json ├── apps/ │ └── docs/ # Site de documentação │ ├── src/ │ │ ├── pages/ # Páginas do site │ │ └── components/ # Componentes do site │ └── package.json └── package.json # Workspace root ``` 🎯 Uso Básico ------------ [](#-uso-básico) ### React/TypeScript [](#reacttypescript-1) ``` import { Button, Input, Modal } from '@/components/ui' function App() { return ( Clique aqui {}} title="Título"> Conteúdo do modal ) } ``` 🛠️ Requisitos ------------- [](#️-requisitos) - **React**: ^18.0.0 - **TypeScript**: ^5.0.0 - **Tailwind CSS**: ^3.0.0 - **Node.js**: ^18.0.0 📦 Dependências dos Componentes ------------------------------ [](#-dependências-dos-componentes) ### React [](#react) - `react` ^18.0.0 🤝 Contribuindo -------------- [](#-contribuindo) Contribuições são bem-vindas! Por favor: 1. Fork o projeto 2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`) 3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`) 4. Push para a branch (`git push origin feature/AmazingFeature`) 5. Abra um Pull Request 📝 Licença --------- [](#-licença) Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes. 🙏 Agradecimentos ---------------- [](#-agradecimentos) - [Tailwind CSS](https://valkui.vercel.app/) - Framework CSS utilitário - [shadcn/ui](https://valkui.vercel.app/) - Inspiração para a estrutura 📧 Contato --------- [](#-contato) - **Website**: - **Issues**: [GitHub Issues](https://github.com/ferforastieri/valk-ui/issues) - **Discussions**: [GitHub Discussions](https://github.com/ferforastieri/valk-ui/discussions) --- Feito com ❤️ por Fernando Forastieri ⭐ Se este projeto foi útil para você, considere dar uma estrela! ### Health Score 31 — LowBetter than 66% of packages Maintenance68 Regular maintenance activity Popularity1 Limited adoption so far Community4 Small or concentrated contributor base Maturity42 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 Unknown Total 1 Last Release 221d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4f2d22a4233541e3e2973b3f7a5ffec5892e276107dca8495b29cd7ea198470f?d=identicon)[ferforastieri](/maintainers/ferforastieri) --- Tags laraveluicomponentsbladetailwindcssdesign-systemvalk-ui ### Embed Badge ![Health badge](/badges/valk-ui-blade/health.svg) ``` [![Health](https://phpackages.com/badges/valk-ui-blade/health.svg)](https://phpackages.com/packages/valk-ui-blade) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k570.6k23](/packages/robsontenorio-mary)[hasinhayder/tyro-login Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13 2464.9k6](/packages/hasinhayder-tyro-login)[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)[technikermathe/blade-lucide-icons A package to easily make use of Lucide icons in your Laravel Blade views. 18421.4k11](/packages/technikermathe-blade-lucide-icons)[ddfsn/blade-components Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. 235.2k](/packages/ddfsn-blade-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)