包简介

ServeCore Preset for Laravel Shadcn Blade Components

README 文档

README

A Laravel preset that installs beautiful, accessible Shadcn UI components built with Blade and Alpine.js.

Features

🎨 33+ Pre-built Components: Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, Checkbox, Collapsible, Dialog, Dropdown, Input, Label, Navbar, Pagination, Progress, Radio Group, Scroll Area, Select, Separator, Sheet, Sidebar, Skeleton, Switch, Table, Tabs, Textarea, Theme Toggle, Toast, Toggle, Tooltip, and more.
🌙 Dark Mode: Flicker-free theme system (Light/Dark/System)
🎯 Zero Config: One command installation
⚡ Alpine.js: Lightweight reactivity
🎭 Tailwind CSS v4: Modern styling engine
🛠️ Full Stubs: Includes the complete shadcn-stubs directory for custom component generation.

Installation

Require the package:
```
composer require servecore/shadcn-blade
```
Run the installer:
```
php artisan servecore:install
```
Compile assets:
```
npm install && npm run dev
```

What Gets Installed

The preset copies the following to your Laravel project:

Components: resources/views/components/ (Full suite of ShadCN components)
Demo Page: resources/views/servecore-test.blade.php (Usage examples)
Stubs: resources/shadcn-stubs/ (Blueprints for generating components)
JavaScript: resources/js/theme.js and resources/js/init-theme.js
Styles: resources/css/app.css (ShadCN variables + Tailwind config)
Dependencies: embla-carousel and embla-carousel-autoplay

Usage

Theme System

Add to your layout's <head>:

<x-theme-script />
@vite(['resources/css/app.css', 'resources/js/app.js'])

Add the toggle button anywhere:

<x-theme-toggle />

Components

{{-- Button with loading --}}
<x-button loading="true">Save</x-button>

{{-- Dialog --}}
<x-dialog>
    <x-dialog-trigger>Open</x-dialog-trigger>
    <x-dialog-content>
        <x-dialog-header>Title</x-dialog-header>
        Content here
    </x-dialog-content>
</x-dialog>

{{-- Select --}}
<x-select name="country" placeholder="Select...">
    <x-select-trigger>
        <x-select-value />
    </x-select-trigger>
    <x-select-content>
        <x-select-item value="us">United States</x-select-item>
    </x-select-content>
</x-select>

Manual Setup (Optional)

If you want to understand what the installer does, here's the manual setup:

1. CSS Setup

The installer copies app.css with Tailwind v4 configuration and ShadCN color variables:

@import "tailwindcss";

@theme {
  --color-background: 0 0% 100%;
  --color-foreground: 222.2 84% 4.9%;
  /* ... more variables */
}

.dark {
  --color-background: 222.2 84% 4.9%;
  --color-foreground: 210 40% 98%;
  /* ... dark mode variables */
}

[x-cloak] {
  display: none !important;
}

2. JavaScript Setup

The installer updates resources/js/app.js to include:

import Alpine from 'alpinejs';
import theme, { initializeTheme } from './theme';

// Initialize theme before Alpine
initializeTheme();

// Register theme component
Alpine.data('theme', theme);

window.Alpine = Alpine;
Alpine.start();

3. Vite Configuration

Ensure your vite.config.js includes:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Requirements

Laravel 11+
PHP 8.2+
Node.js & NPM

License

MIT

Credits

Built with love by ServeCore Team.

servecore/shadcn-blade 适用场景与选型建议

servecore/shadcn-blade 是一款基于 Blade 开发的 Composer 扩展包，目前已累计 16 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 01 月 21 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 servecore/shadcn-blade 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 servecore/shadcn-blade 我们能提供哪些服务？

定制开发 / 二次开发

基于 servecore/shadcn-blade 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

servecore/shadcn-blade

包简介