包简介

A premium TALL stack UI kit with a Shadcn-like developer experience.

README 文档

README

Warning: This package is currently in Alpha. APIs may change until version 1.0.

Tallcn UI

A collection of re-usable components built with Tailwind CSS v4, Laravel Blade, and Livewire. Inspired by Shadcn UI, but tailored for the TALL stack.

Features

Tailwind CSS v4 native (using OKLCH colors).
Accessible: Built with accessibility in mind.
Customizable: Easily themeable via CSS variables.
Lightweight: No unnecessary JS, powered by Alpine.js where needed.

Installation

1. Install via Composer

composer require duroycalvin/tallcn

2. Run the Install Command

This will publish the configuration and setup the basic theme.

php artisan tallcn:install

3. Setup Tailwind CSS v4

Ensure your app.css includes the Tallcn source path and theme variables:

@import "tailwindcss";

@theme {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... other variables */
}

@source "../../packages/duroycalvin/tallcn/resources/views";

4. Run the artisan optimize command

This will clear all cache.

php artisan optimize:clear

5. Run the npm command

This will delete all cache.

npm run dev
or
npm run build

Usage

Button

The Button component comes with various variants and sizes.

Standard Button

<x-tallcn::button>
    Click me
</x-tallcn::button>

Variants

<x-tallcn::button variant="default">Default</x-tallcn::button>
<x-tallcn::button variant="destructive">Destructive</x-tallcn::button>
<x-tallcn::button variant="outline">Outline</x-tallcn::button>
<x-tallcn::button variant="secondary">Secondary</x-tallcn::button>
<x-tallcn::button variant="ghost">Ghost</x-tallcn::button>
<x-tallcn::button variant="link">Link</x-tallcn::button>

Sizes

<x-tallcn::button size="sm">Small</x-tallcn::button>
<x-tallcn::button size="default">Default</x-tallcn::button>
<x-tallcn::button size="lg">Large</x-tallcn::button>
<x-tallcn::button size="icon">
    <svg>...</svg>
</x-tallcn::button>

As a Link (Tag Property)

To use the button styles on an anchor tag, use the tag property:

<x-tallcn::button tag="a" href="/dashboard">
    Go to Dashboard
</x-tallcn::button>

Configuration

You can customize the default theme by editing the variables in your CSS or publishing the config:

php artisan vendor:publish --tag=tallcn-config

Scripts & Styles

Don't forget to include the directives in your layout:

<head>
    @tallcnStyles
</head>
<body>
    ...
    @livewireScripts
</body>

License

The MIT License (MIT). Please see License File for more information.

duroycalvin/tallcn 适用场景与选型建议

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

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

围绕 duroycalvin/tallcn 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

duroycalvin/tallcn

包简介