更新日志

2024 年 8 月 - npx shadcn init

¥August 2024 - npx shadcn init

新的 CLI 现已可用。它是完全重写的，具有许多新功能和改进。你现在可以使用 npx shadcn add 安装组件、主题、钩子、实用程序等。

¥The new CLI is now available. It's a complete rewrite with a lot of new features and improvements. You can now install components, themes, hooks, utils and more using npx shadcn add.

这是向你和你的 LLM 可以访问和使用的代码分发迈出的重要一步。

¥This is a major step towards distributing code that you and your LLMs can access and use.

1. 首先，cli 现在开箱即用地支持所有主要的 React 框架。Next.js、Remix、Vite 和 Laravel。当你初始化新应用时，我们会更新你现有的 Tailwind 文件而不是覆盖。

   ¥First up, the cli now has support for all major React framework out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding.

2. 组件现在提供自己的依赖。以手风琴为例，它可以定义其 Tailwind 关键帧。当你将其添加到你的项目时，我们会相应地更新你的 tailwind.config.ts 文件。

   ¥A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we’ll update your tailwind.config.ts file accordingly.

3. 你还可以使用 url 安装远程组件。npx shadcn add https://acme.com/registry/navbar.json。

   ¥You can also install remote components using url. npx shadcn add https://acme.com/registry/navbar.json.

4. 我们还改进了 init 命令。它可以进行框架检测，甚至可以在一个命令中初始化一个全新的 Next.js 应用。npx shadcn init。

   ¥We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. npx shadcn init.

5. 我们创建了一个新的模式，你可以使用它来发送你自己的组件注册表。由于它支持 URL，你甚至可以使用它来分发私有组件。

   ¥We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.

6. 还有一些更新，例如更好的错误处理和 monorepo 支持。

   ¥And a few more updates like better error handling and monorepo support.

你今天可以尝试新的 cli。

¥You can try the new cli today.

pnpm dlx shadcn init sidebar-01 login-01

更新你的项目

¥Update Your Project

要更新现有项目以使用新的 CLI，请更新 components.json 文件以包含组件、实用程序、ui、lib 和钩子的导入别名。

¥To update an existing project to use the new CLI, update your components.json file to include import aliases for your components, utils, ui, lib and hooks.

{
  "$schema": "https://shadcn.nodejs.cn/schema.json",
  "style": "new-york",
  "tailwind": {
    // ...
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

如果你使用的是不同的导入别名前缀（例如 ~），请将 @ 替换为你的前缀。

¥If you're using a different import alias prefix eg ~, replace @ with your prefix.

2024 年 4 月 - 介绍升降模式

¥April 2024 - Introducing Lift Mode

我们为 区块 引入了一种名为 Lift Mode 的新模式。

¥We're introducing a new mode for Blocks called Lift Mode.

启用提升模式可自动从块模板中 "lift" 较小的组件进行复制和粘贴。

¥Enable Lift Mode to automatically "lift" smaller components from a block template for copy and paste.

View the blocks library

使用 Lift 模式，你将能够复制组成块模板的较小组件，如卡片、按钮和表单，并将它们直接粘贴到你的项目中。

¥With Lift Mode, you'll be able to copy the smaller components that make up a block template, like cards, buttons, and forms, and paste them directly into your project.

访问 区块 页面进行尝试。

¥Visit the Blocks page to try it out.

2024 年 3 月 - 介绍块

¥March 2024 - Introducing Blocks

自发布以来，最需要的功能之一是布局：带有侧边栏、营销页面部分、卡片等的管理仪表板。

¥One of the most requested features since launch has been layouts: admin dashboards with sidebar, marketing page sections, cards and more.

今天，我们将推出 区块。

¥Today, we're launching Blocks.

View the blocks library

块是可用于构建应用的现成组件。它们完全响应、可访问且可组合，这意味着它们是使用与 shadcn/ui 中其他组件相同的原理构建的。

¥Blocks are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn/ui.

我们从仪表板布局和身份验证页面开始，计划在未来几周内添加更多块。

¥We're starting with dashboard layouts and authentication pages, with plans to add more blocks in the coming weeks.

开源

¥Open Source

块是开源的。你可以在 GitHub 上找到源代码。在你的项目中使用它们，自定义它们并回馈。

¥Blocks are open source. You can find the source on GitHub. Use them in your projects, customize them and contribute back.

View the blocks library

请求块

¥Request a Block

我们还将引入 "请求块" 功能。如果你想查看特定的块，只需在 GitHub 上创建一个请求，社区就可以对其进行投票和构建。

¥We're also introducing a "Request a Block" feature. If there's a specific block you'd like to see, simply create a request on GitHub and the community can upvote and build it.

View the blocks library

v0

如果你有 v0 账户，则可以使用 v0 中的编辑功能打开 v0 上的代码进行提示和进一步生成。

¥If you have a v0 account, you can use the Edit in v0 feature to open the code on v0 for prompting and further generation.

就是这样。期待看到你使用 Blocks 构建的内容。

¥That's it. Looking forward to seeing what you build with Blocks.

2024 年 3 月 - 面包屑和输入 OTP

¥March 2024 - Breadcrumb and Input OTP

我们添加了一个新的 Breadcrumb 组件和一个输入 OTP 组件。

¥We've added a new Breadcrumb component and an Input OTP component.

面包屑

¥Breadcrumb

一个可访问且灵活的面包屑组件。它支持折叠项目、自定义分隔符、自带路由 <Link /> 并可与其他 shadcn/ui 组件组合。

¥An accessible and flexible breadcrumb component. It has support for collapsed items, custom separators, bring-your-own routing <Link /> and composable with other shadcn/ui components.

查看更多示例

¥See more examples

输入 OTP

¥Input OTP

功能齐全的输入 OTP 组件。它支持数字和字母数字代码、自定义长度、复制粘贴和可访问性。输入 OTP 由 @guilherme_rodz 在 input-otp 之上构建。

¥A fully featured input OTP component. It has support for numeric and alphanumeric codes, custom length, copy-paste and accessible. Input OTP is built on top of input-otp by @guilherme_rodz.

阅读文档

¥Read the docs

如果你有 v0，则新组件可供生成。

¥If you have a v0, the new components are available for generation.

十二月 2023 - 新组件、CLI 等

¥December 2023 - New components, CLI and more

我们向 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:

• 轮播 - 具有动作、滑动手势和键盘支持的轮播组件。

  ¥Carousel - A carousel component with motion, swipe gestures and keyboard support.

• 抽屉 - 在移动设备上看起来很棒的抽屉组件。

  ¥Drawer - A drawer component that looks amazing on mobile.

• 分页 - 带有页面导航、上一个和下一个按钮的分页组件。

  ¥Pagination - A pagination component with page navigation, previous and next buttons.

• 可调整大小 - 用于构建可调整大小的面板组和布局的可调整大小的组件。

  ¥Resizable - A resizable component for building resizable panel groups and layouts.

• Sonner - 你将需要的最后一个 toast 组件。

  ¥Sonner - The last toast component you'll ever need.

• CLI 更新 - 支持自定义 Tailwind 前缀和 tailwind.config.ts。

  ¥CLI updates - Support for custom Tailwind prefix and 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.

抽屉

¥Drawer

哦，抽屉组件😍。由 emilkowalski_ 在 Vaul 之上构建。

¥Oh the drawer component 😍. Built on top of Vaul by emilkowalski_.

尝试在移动设备上打开以下抽屉。看起来很棒！

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

分页

¥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.

可调整大小

¥Resizable

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

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

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

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

Sonner

emilkowalski_ 的另一个作品。你将需要的最后一个 toast 组件。Sonner 现在可在 shadcn/ui 中使用。

¥Another one by emilkowalski_. The last toast component you'll ever need. Sonner is now availabe in shadcn/ui.

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.

cli 现在还可以检测 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.

2023 年 7 月 - JavaScript

¥July 2023 - JavaScript

此项目和组件均使用 TypeScript 编写。我们也建议你在项目中使用 TypeScript。

¥This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

但是我们提供了 JavaScript 版本的组件，可通过 cli 获得。

¥However we provide a JavaScript version of the components, available via the cli.

Would you like to use TypeScript (recommended)? no

要退出 TypeScript，你可以在 components.json 文件中使用 tsx 标志。

¥To opt-out of TypeScript, you can use the tsx flag in your components.json file.

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

要配置导入别名，你可以使用以下 jsconfig.json：

¥To configure import aliases, you can use the following jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

2023 年 6 月 - 新 CLI、样式等

¥June 2023 - New CLI, Styles and more

我今天有很多更新要与你分享：

¥I have a lot of updates to share with you today:

• 新 CLI - 从头开始重写了 CLI。你现在可以添加组件、依赖并配置导入路径。

  ¥New CLI - Rewrote the CLI from scratch. You can now add components, dependencies and configure import paths.

• 主题 - 选择使用 CSS 变量或 Tailwind CSS 实用程序类进行主题设置。

  ¥Theming - Choose between using CSS variables or Tailwind CSS utility classes for theming.

• 基本颜色 - 为你的项目配置基本颜色。这将用于生成组件的默认调色板。

  ¥Base color - Configure the base color for your project. This will be used to generate the default color palette for your components.

• React 服务器组件 - 选择不使用 React Server Components。CLI 将自动附加或删除 use client 指令。

  ¥React Server Components - Opt out of using React Server Components. The CLI will automatically append or remove the use client directive.

• 样式 - 引入一个名为 Style 的新概念。样式带有自己的一组组件、动画、图标等。

  ¥Styles - Introducing a new concept called Style. A style comes with its own set of components, animations, icons and more.

• 退出动画 - 为所有组件添加了退出动画。

  ¥Exit animations - Added exit animations to all components.

• 其他更新 - 新的 icon 按钮大小、更新的 sheet 组件等等。

  ¥Other updates - New icon button size, updated sheet component and more.

• 更新你的项目 - 如何更新你的项目以获取最新更改。

  ¥Updating your project - How to update your project to get the latest changes.

新 CLI

¥New CLI

过去几周我一直在开发一个新的 CLI。这是一次彻底的重写。它具有许多新功能和改进。

¥I've been working on a new CLI for the past few weeks. It's a complete rewrite. It comes with a lot of new features and improvements.

init

pnpm dlx shadcn-ui@latest init

当你运行 init 命令时，系统将询问你几个问题来配置 components.json：

¥When you run the init command, you will be asked a few questions to configure components.json:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

此文件包含有关你的组件的所有信息：在哪里安装它们、导入路径、它们的样式...等等。

¥This file contains all the information about your components: where to install them, the import paths, how they are styled...etc.

你可以使用此文件更改组件的导入路径、设置 baseColor 或更改样式方法。

¥You can use this file to change the import path of a component, set a baseColor or change the styling method.

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

这意味着你现在可以将 CLI 与任何目录结构一起使用，包括 src 和 app 目录。

¥This means you can now use the CLI with any directory structure including src and app directories.

add

pnpm dlx shadcn-ui@latest add

add 命令现在功能更强大。你现在可以添加 UI 组件，但也可以导入更复杂的组件（即将推出）。

¥The add command is now much more capable. You can now add UI components but also import more complex components (coming soon).

CLI 将自动解析所有组件和依赖，根据你的自定义配置格式化它们并将它们添加到你的项目中。

¥The CLI will automatically resolve all components and dependencies, format them based on your custom config and add them to your project.

diff（实验性）

¥diff (experimental)

pnpm dlx shadcn-ui diff

我们还将引入一个新的 diff 命令来帮助你跟踪上游更新。

¥We're also introducing a new diff command to help you keep track of upstream updates.

你可以使用此命令查看上游存储库中发生了哪些更改，并相应地更新你的项目。

¥You can use this command to see what has changed in the upstream repository and update your project accordingly.

运行 diff 命令以获取具有可用更新的组件列表：

¥Run the diff command to get a list of components that have updates available:

pnpm dlx shadcn-ui diff

The following components have updates available:
- button
  - /path/to/my-app/components/ui/button.tsx
- toast
  - /path/to/my-app/components/ui/use-toast.ts
  - /path/to/my-app/components/ui/toaster.tsx

然后运行 ​​diff [component] 以查看更改：

¥Then run diff [component] to see the changes:

pnpm dlx shadcn-ui diff alert

const alertVariants = cva(
- "relative w-full rounded-lg border",
+ "relative w-full pl-12 rounded-lg border"
)

使用 CSS 变量或 Tailwind 颜色进行主题化

¥Theming with CSS Variables or Tailwind Colors

你可以选择使用 CSS 变量或 Tailwind CSS 实用程序类进行主题设置。

¥You can choose between using CSS variables or Tailwind CSS utility classes for theming.

当你添加新组件时，CLI 将根据你的 components.json 配置自动使用正确的主题方法。

¥When you add new components, the CLI will automatically use the correct theming methods based on your components.json configuration.

实用程序类

¥Utility classes

<div className="bg-zinc-950 dark:bg-white" />

要使用实用程序类进行主题设置，请在 components.json 文件中将 tailwind.cssVariables 设置为 false。

¥To use utility classes for theming set tailwind.cssVariables to false in your components.json file.

{
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": false
  }
}

CSS 变量

¥CSS Variables

<div className="bg-background text-foreground" />

要使用 CSS 变量类进行主题设置，请在 components.json 文件中将 tailwind.cssVariables 设置为 true。

¥To use CSS variables classes for theming set tailwind.cssVariables to true in your components.json file.

{
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  }
}

基本颜色

¥Base color

你现在可以为你的项目配置基本颜色。这将用于生成组件的默认调色板。

¥You can now configure the base color for your project. This will be used to generate the default color palette for your components.

{
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": false
  }
}

在 gray、neutral、slate、stone 或 zinc 之间进行选择。

¥Choose between gray, neutral, slate, stone or zinc.

如果你将 cssVariables 设置为 true，我们将在你的 globals.css 文件中将基本颜色设置为 CSS 变量。如果你将 cssVariables 设置为 false，我们将在你的组件中内联 Tailwind CSS 实用程序类。

¥If you have cssVariables set to true, we will set the base colors as CSS variables in your globals.css file. If you have cssVariables set to false, we will inline the Tailwind CSS utility classes in your components.

React 服务器组件

¥React Server Components

如果你使用的框架不支持 React Server Components，你现在可以通过将 rsc 设置为 false 来选择退出。我们将在添加组件时自动附加或删除 use client 指令。

¥If you're using a framework that does not support React Server Components, you can now opt out by setting rsc to false. We will automatically append or remove the use client directive when adding components.

{
  "rsc": false
}

样式

¥Styles

我们正在引入一个名为 Style 的新概念。

¥We are introducing a new concept called Style.

你可以将样式视为视觉基础：形状、图标、动画和排版。样式带有自己的一组组件、动画、图标等。

¥You can think of style as the visual foundation: shapes, icons, animations & typography. A style comes with its own set of components, animations, icons and more.

我们正在提供两种样式：default 和 new-york（即将推出更多）。

¥We are shipping two styles: default and new-york (with more coming soon).

default 样式是你习惯的样式。这是我们从这个项目开始以来一直在使用的。它使用 lucide-react 作为图标，使用 tailwindcss-animate 作为动画。

¥The default style is the one you are used to. It's the one we've been using since the beginning of this project. It uses lucide-react for icons and tailwindcss-animate for animations.

new-york 样式是一种新样式。它附带较小的按钮、带阴影的卡片和来自 Radix 图标 的一组新图标。

¥The new-york style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from Radix Icons.

当你运行 init 命令时，系统将询问你想要使用哪种样式。这保存在你的 components.json 文件中。

¥When you run the init command, you will be asked which style you would like to use. This is saved in your components.json file.

{
  "style": "new-york"
}

主题

¥Theming

首先以样式为基础，然后使用 CSS 变量或 Tailwind CSS 实用程序类设置主题，以完全改变组件的外观。

¥Start with a style as the base then theme using CSS variables or Tailwind CSS utility classes to completely change the look of your components.

退出动画

¥Exit animations

我为所有组件添加了退出动画。单击下面的组合框可查看微妙的退出动画。

¥I added exit animations to all components. Click on the combobox below to see the subtle exit animation.

可以使用实用程序类自定义动画。

¥The animations can be customized using utility classes.

其他更新

¥Other updates

按钮

¥Button

• 添加了新的按钮大小 icon：

  ¥Added a new button size icon:

工作表

¥Sheet

• 将 position 重命名为 side 以匹配其他元素。

  ¥Renamed position to side to match the other elements.

• 删除了 size props。使用 className="w-[200px] md:w-[450px]" 进行响应式调整。

  ¥Removed the size props. Use className="w-[200px] md:w-[450px]" for responsive sizing.

更新你的项目

¥Updating your project

由于我们遵循复制和粘贴方法，你需要手动更新项目以获取最新更改。

¥Since we follow a copy and paste approach, you will need to manually update your project to get the latest changes.

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

const buttonVariants = cva({
  variants: {
    size: {
      default: "h-10 px-4 py-2",
      sm: "h-9 rounded-md px-3",
      lg: "h-11 rounded-md px-8",
      icon: "h-10 w-10",
    },
  },
})

"use client"
 
import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
const Sheet = SheetPrimitive.Root
 
const SheetTrigger = SheetPrimitive.Trigger
 
const SheetClose = SheetPrimitive.Close
 
const SheetPortal = ({
  className,
  ...props
}: SheetPrimitive.DialogPortalProps) => (
  <SheetPrimitive.Portal className={cn(className)} {...props} />
)
SheetPortal.displayName = SheetPrimitive.Portal.displayName
 
const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)
 
interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}
 
const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName
 
const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"
 
const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"
 
const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName
 
const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName
 
export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}

- <Sheet position="right" />
+ <Sheet side="right" />

谢谢

¥Thank you

我要感谢所有使用过这个项目、提供反馈和做出贡献的人。我真的很感激。谢谢 🙏

¥I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏