SuperAPI AI 工具集

blatui-laravel-blade-components

通用与其它

查看项目

更新于 10-15 23:57

技能介绍

BlatUI 是一个 Laravel CLI 工具,将 shadcn/ui 的组件理念带入 BLAT 技术栈(Blade、Laravel、Alpine、Tailwind)。它把可访问、可主题化的 UI 组件直接复制到项目里,而非作为依赖安装,代码归使用者所有,可自由修改。组件用 Blade 编写,Tailwind CSS v4 样式,Alpine.js 处理交互。

主要能力:提供 156+ 个符合 WCAG AA 的组件;完整设计令牌系统,支持浅色/深色模式;忠实移植 shadcn/ui 的设计语言;提供 70 种图表类型与 64 个预置块。

环境要求:PHP 8.2+,Laravel 11/12/13,Tailwind CSS v4(必需),Alpine.js 3,Node 18+。

安装(资料命令保持原样): composer require anousss007/blatui composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus php artisan vendor:publish --tag=blatui-foundations php artisan blatui:init

常用命令:php artisan blatui:init 校验环境;php artisan blatui:list 列出组件;php artisan blatui:add button card 添加组件;php artisan blatui:add --all 安装全部。组件复制到 resources/views/components/ui/,以 x-ui.* 匿名组件方式使用,如 <x-ui.button>、<x-ui.card>、<x-ui.dialog> 等。

主题定制通过 resources/css/blatui.css 中的 oklch CSS 变量完成,深色模式使用 class 方式。已使用 Alpine 的项目应改用 blatui-core.js,避免创建第二个 Alpine 实例。块与图表需从演示站复制代码,图表依赖 apexcharts。限制:仅适用于满足上述版本要求的 Laravel 项目,Tailwind v3 需先迁移至 v4;未提供收费、价格等信息。