2023年12月 - 新组件

轮播、抽屉、分页、可调整大小、Sonner 和 CLI 更新。

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

🌐 We've added new components to shadcn/ui and made a lot of improvements to the CLI.

以下是新功能的快速概述：

🌐 Here's a quick overview of what's new:

旋转木马 - 一个具有动画、滑动手势和键盘支持的旋转木马组件。
抽屉 - 一个在移动设备上看起来非常棒的抽屉组件。
分页 - 一个带有页面导航、上一页和下一页按钮的分页组件。
可调整大小 - 一个可调整大小的组件，用于构建可调整大小的面板组和布局。
Sonner - 你 ever 需要的最后一个 toast 组件。
CLI 更新 - 支持自定义 Tailwind 前缀 和 tailwind.config.ts。

轮播

🌐 Carousel

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

🌐 We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of Embla Carousel.

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

🌐 It has support for infinite looping, autoplay, vertical orientation, and more.

import * as React from "react"

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

抽屉

🌐 Drawer

哦，抽屉组件。由 emilkowalski 在 Vaul 基础上构建。

🌐 Oh the drawer component. Built on top of Vaul by emilkowalski.

试着在手机上打开以下抽屉。看起来很棒！

🌐 Try opening the following drawer on mobile. It looks amazing!

"use client"

import * as React from "react"

分页

🌐 Pagination

我们添加了一个带有页面导航、上一页和下一页按钮的分页组件。简单、灵活，并且可与你的框架的 <Link /> 组件一起使用。

🌐 We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's <Link /> component.

import {
  Pagination,
  PaginationContent,

可调整大小

🌐 Resizable

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

🌐 Build resizable panel groups and layouts with this <Resizable /> component.

One

Two

Three

import {
  ResizableHandle,
  ResizablePanel,

<Resizable /> 是由 bvaughn 使用 react-resizable-panels 构建的。它支持鼠标、触摸和键盘操作。

Sonner

又是 emilkowalski 的一个作品。你将用到的最后一个 toast 组件。Sonner 现在可以在 shadcn/ui 中使用。

🌐 Another one by emilkowalski. The last toast component you'll ever need. Sonner is now available in shadcn/ui.

"use client"

import { toast } from "sonner"

CLI 更新

🌐 CLI updates

这是最受欢迎的功能之一。你现在可以配置自定义 Tailwind 前缀，CLI 在添加组件时会自动为你的实用程序类添加前缀。

🌐 This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components.

这意味着你现在可以轻松地将 shadcn/ui 组件添加到现有项目中，例如 Docusaurus、Nextra 等。与你现有的设计系统无缝集成。

🌐 This means you can now easily add shadcn/ui components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict.

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

它适用于 cn、cva 和 CSS 变量。

🌐 It works with cn, cva and CSS variables.

命令行接口现在也可以检测 tailwind.config.ts 并为你添加配置的 TypeScript 版本。

🌐 The cli can now also detect tailwind.config.ts and add the TypeScript version of the config for you.

就这样。节日快乐。

🌐 That's it. Happy Holidays.

On This Page

轮播抽屉分页可调整大小 Sonner CLI 更新