2023 年 12 月 - 新组件

我们为 shadcn/ui 添加了新组件，并对 CLI 做了大量改进。

下面是新增内容的快速概览：

• Carousel - 一个支持动效、滑动手势和键盘操作的轮播组件。
• Drawer - 一个在移动端表现很出色的抽屉组件。
• Pagination - 一个带页码导航、上一页和下一页按钮的分页组件。
• Resizable - 一个用于构建可调整面板组和布局的可调整大小组件。
• Sonner - 你可能用得上的最后一个 toast 组件。
• CLI 更新 - 支持自定义 Tailwind 前缀 和 tailwind.config.ts。

Carousel

我们新增了一个功能完整的轮播组件，支持动效、滑动手势和键盘操作。它基于 Embla Carousel 构建。

它支持无限循环、自动播放、垂直方向等功能。

import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

Drawer

抽屉组件也是如此。它基于 emilkowalski 的 Vaul 构建。

试着在移动端打开下面这个抽屉。效果很惊艳！

"use client"

import * as React from "react"

Pagination

我们新增了一个分页组件，带有页码导航、上一页和下一页按钮。它简单、灵活，并且可以与你框架的 <Link /> 组件配合使用。

import {
  Pagination,
  PaginationContent,

Resizable

使用这个 <Resizable /> 组件可以构建可调整大小的面板组和布局。

import {
  ResizableHandle,
  ResizablePanel,

<Resizable /> is built using react-resizable-panels by bvaughn. It has support for mouse, touch and keyboard.

Sonner

这也是 emilkowalski 的作品。它是你可能需要的最后一个 toast 组件。Sonner 现在已经可用于 shadcn/ui。

"use client"

import { toast } from "sonner"

CLI updates

这是最受期待的功能之一。现在你可以配置自定义 Tailwind 前缀，CLI 在添加组件时会自动为工具类加上前缀。

这意味着你现在可以轻松把 shadcn/ui 组件添加到像 Docusaurus、Nextra 之类的现有项目中。它可以无冲突地直接接入你现有的设计系统。

Copy<AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />

It works with cn, cva and CSS variables.

CLI 现在也能识别 tailwind.config.ts，并为你添加 TypeScript 版本的配置。

就这些。节日快乐。