FluxUI 中文网 · 官方 Livewire UI 库

起初只是个好奇——从零构建一个日期选择器

但这份好奇最终演变成了数月的专注开发，孕育出了 Flux 的全新版本。

现在，我们自豪地发布：

Flux v2

Flux v2 带来了强大的新组件，同时仍然保持轻量、无依赖。
本次版本包括：

轻量级日期选择器 & 日历
用于分析的折线图与面积图
完整支持 Tailwind 4
免费层（Free Tier）包含所有基础 UI 组件
Laravel 启动套件，让你开箱即用

零额外依赖

保持 Flux 的轻量是首要任务。
我们没有引入第三方日期选择器或图表库，而是选择从零构建。
最终，这仅为打包体积增加了 13kb。

为什么要为了区区几 KB 费这么大劲？

在调研第三方日期与图表库时，我们遇到了以下痛点：

配置复杂且难以理解
难以匹配自定义设计风格
缺乏可访问性（Accessibility）和本地化支持

于是我们决定亲自动手。
现在，我们拥有完全契合自身需求的组件，而且可以自由扩展——
不需要插件，不需要 Pull Request，只需修改自己的代码。

日期选择器

日期选择器无处不在，但大多数库都臃肿且难以自定义样式。
在 Flux v2 中，添加一个优雅且完全无障碍（accessible）的日期选择器，只需一行：

<flux:date-picker />

和 Flux 的其他组件一样，我们为此组件注入了额外的关怀：

移动端友好
键盘可操作
支持国际化

查看日期选择器文档 →

日历组件

有时候，你可能想直接在页面上展示一个完整的日历，而不是隐藏在下拉框中。
例如预约类页面（如 Shopify、Airbnb 常见的设计）。

Flux v2 提供了专用的 Calendar 组件：

<flux:calendar />

查看日历文档 →

日期范围选择器

日期范围选择器是分析界面和预订系统的必备组件。
在 Flux v2 中，只需添加 mode="range" 即可：

<flux:date-picker mode="range" months="2" with-presets />

无论是带预设（Presets）的高级版本，还是简单的双月选择，都轻松实现。

体验日期范围选择器 →

图表组件

我们原本没打算从零做图表库，但当我们动手实验时，灵感不断涌现，
最终，我们决定彻底重构图表体验。

“它们其实就是 SVG”

Flux 的图表库让你感觉自己在直接构建 SVG。
语法略微比其他组件详细，但体验极其直观——
你无需学习复杂配置，只是在写 <div> 和 Tailwind 样式。

例如一个简单的折线图（Sparkline）：

<flux:chart wire:model="data" class="min-h-32">
    <flux:chart.svg>
        <flux:chart.line class="text-blue-500" stroke="currentColor" stroke-width="2" />
    </flux:chart.svg>
</flux:chart>

渲染结果相当于：

<div class="min-h-32">
    <svg viewBox="...">
        <path d="..." class="text-blue-500" stroke="currentColor" stroke-width="2" />
    </svg>
</div>

每个图表组件都直接映射到 HTML 或 SVG 元素。
你拥有完全的控制权，可以随心定制外观与渲染逻辑。

此外，你可以随时复制官方示例快速上手，
也可以深入 API 构建任意复杂图表。

组合式设计（Composable）

Flux 图表最大的魅力在于它的可组合性。
你可以自由堆叠不同组件来实现各种效果：

<!-- 折线在上 -->
<flux:chart.area class="text-blue-500/50" />
<flux:chart.line class="text-blue-500" />

<!-- 面积在上 -->
<flux:chart.line class="text-blue-500" />
<flux:chart.area class="text-blue-500/50" />

渲染顺序直观：后写的在上层，就像堆叠 <div> 一样。
不再需要繁琐的配置项，一切都变得自然直觉。

查看图表文档 →

支持 Tailwind 4

Tailwind 4 简化了配置，让自定义样式可以直接写在 CSS 中。
Flux v2 利用这一特性，使样式引入更轻巧：

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

这比 v1 的方式更加干净。
无需 @fluxStyles 指令，也无需额外的 tailwind.config.js 配置。

此外，Tailwind 4 的改进细节令人欣喜：
例如不再需要方括号来处理 data 属性样式：

<!-- Tailwind 3 -->
<div class="data-[checked]:bg-zinc-800">

<!-- Tailwind 4 -->
<div class="data-checked:bg-zinc-800">

阅读升级指南 →

改进的暗色模式控制

在 Flux v1 中，Flux 会自动为 <html> 添加或移除 .dark 类。
但许多用户希望能手动控制暗色模式。

因此，在 Flux v2 中，我们引入了新的属性：@fluxAppearance

...
    @fluxAppearance
</head>

通过它，你可以：

轻松禁用暗色模式（不加此指令即可）
或完全由服务器端逻辑控制 .dark 类

Laravel 启动套件 + 新的免费层

Flux 现已正式加入 Laravel 新版 Starter Kits（下周发布）。
为此，我们强化了免费层（Free Tier），
包含所有基础 Web 应用所需的核心组件：

按钮、模态框、下拉菜单、表单输入等。

高级组件将划归 Pro 版本，
但所有老用户都将自动升级至 Pro 权限。

查看 Flux Pro 组件完整列表 →

展望未来

Livewire 一直是最具生产力的 Web 开发方式之一，
但前端组件生态却长期不尽如人意。
Flux 的使命就是改变这一现状。

随着 Flux v2 的发布，我们终于奠定了坚实的基础。
接下来，我们将持续推出更多新组件与模板。

敬请期待！

Flux 2 来了