113k
New

Changelog

RSS

Latest updates and announcements.

2026年4月 - shadcn 预设

我们新增了用于处理预设代码的 shadcn preset 命令。

解码预设

你可以解码一个预设代码，查看它的具体内容：

pnpm dlx shadcn@latest preset decode b5owWMfJ8l
预设
  code         b5owWMfJ8l
  version      b
  style        mira
  baseColor    mauve
  theme        mauve
  chartColor   amber
  iconLibrary  hugeicons
  font         inter
  fontHeading  oxanium
  radius       large
  menuAccent   subtle
  menuColor    inverted-translucent
  url          https://ui.shadcn.com/create?preset=b5owWMfJ8l

从项目中解析

在现有项目中使用 preset resolve，查看与你当前配置匹配的预设。

pnpm dlx shadcn@latest preset resolve
预设
  code         b5Kc6P0Vc
  version      b
  style        luma
  baseColor    olive
  theme        lime
  chartColor   sky
  iconLibrary  hugeicons
  font         geist
  fontHeading  inherit
  radius       default
  menuAccent   subtle
  menuColor    default
  url          https://ui.shadcn.com/create?preset=b5Kc6P0Vc

它也支持 monorepo：

pnpm dlx shadcn@latest preset resolve -c apps/web

分享或打开

当你需要一个可分享的链接时，使用 preset url：

pnpm dlx shadcn@latest preset url b5owWMfJ8l
https://ui.shadcn.com/create?preset=b5owWMfJ8l

使用 preset open 在 shadcn/create 中打开预设以进行自定义：

pnpm dlx shadcn@latest preset open b5owWMfJ8l
正在浏览器中打开 https://ui.shadcn.com/create?preset=b5owWMfJ8l。

这使得预设更容易检查、分享，并交接给编码代理，而无需手动解码代码或构建 URL。

尝试一个预设

2026年4月 - 指针光标

现在你可以在初始化项目时为按钮启用 cursor: pointer。

pnpm dlx shadcn@latest init --pointer

这会向你的全局 CSS 文件中添加以下 CSS：

globals.css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

--pointer 选项不属于预设代码。它作为项目设置选项应用，类似于 --rtl。

2026年4月 - 部分应用预设

你现在可以选择性地应用一个预设。

比如有人和你分享了一个预设，而你已经有了自己的组件，但你喜欢它的主题或字体。现在你可以只应用这些内容。

保留你的组件。只应用你想要的部分。

# 应用完整预设。
npx shadcn@latest apply --preset b2D0vQ7G4
 
# 仅应用主题。
npx shadcn@latest apply --preset b2D0vQ7G4 --only theme
 
# 仅应用字体。
npx shadcn@latest apply --preset b2D0vQ7G4 --only font
 
# 应用主题和字体。
npx shadcn@latest apply --preset b2D0vQ7G4 --only theme,font

默认行为保持不变。运行 shadcn apply --preset <preset> 仍然会应用完整预设。

目前部分应用预设支持 theme 和 font。

试试预设

April 2026 - Introducing Sera

Introducing Sera, a new shadcn/ui style. Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.

Sera style previewTry Sera in shadcn/create

Sera is a typography-first style built on print design principles. It pairs serif headings with sans-serif body text, uses square corners, uppercase tracking, and underlined controls to create an editorial feel for your app.

Like the other new styles, Sera goes beyond theming. It changes the geometry, spacing, and feel of the components so your app starts from a different visual baseline.

Available now in shadcn/create for both Radix and Base UI.

Try Sera

2026年4月 - shadcn apply

我们添加了 shadcn apply，这样你可以在不重头开始的情况下切换现有项目的预设。

当你在现有项目中运行 npx shadcn@latest apply 时，我们会应用一个新的预设，重新安装你现有的组件，并更新你的主题、颜色、CSS 变量、字体和图标。

pnpm dlx shadcn@latest apply --preset b2D0vQ7G4

即使预设 URL 是使用不同的值生成的，CLI 也会保留你现有项目的当前基础和 RTL 设置。

尝试一个预设