shadcn-ui/lint

这是什么？

核心功能

• 01通过按组件设置的 contracts 限制 className 覆盖。
• 02禁止任意值和原始颜色，统一使用主题 token。
• 03基于项目中的尺寸、变体和主题文件给出修复建议。
• 04同时支持 ESLint 和 Oxlint，覆盖 React、Vue、Svelte。
• 05无需 shadcn/ui，可识别自定义组件导入。

适用场景

• 防止 AI 编码代理随意修改 Tailwind 项目中的共享 UI 组件样式。
• 在团队设计系统中统一使用主题间距和颜色。
• 在不 fork 第三方或 monorepo 组件包的前提下施加设计规则。

快速上手

1. 1

   使用 npm 安装软件包和 ESLint

   npm install -D @shadcn/lint eslint @typescript-eslint/parser
2. 2

   按 README 创建 eslint.config.mjs 并添加插件和规则

3. 3

   运行代码检查

   npx eslint .

使用前须知

• !仅适用于 Tailwind v4 项目。
• !Oxlint 只读取 Vue 和 Svelte 文件的 script 代码块，不读取模板部分。
• !需要 Node.js 20.19 或更高版本。

标签

常见问题

lint 是什么？

面向 AI 编码代理的 Tailwind 设计系统 lint 工具，用规则约束样式并给出基于组件与主题的修复建议。 @shadcn/lint 是一个面向 Tailwind v4 项目的 lint 工具，用于在 UI 代码中执行设计系统规则。你可以定义允许的样式范围，例如限制 Button 上的 className 覆盖、禁止 p-[13px] 这类任意值，或拒绝直接使用原始颜色。违反规则时，报错信息会说明问题所在，并根据项目中的组件、变体和主题给出替代写法。

lint 可以免费使用吗？用的什么许可证？

lint 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

lint 还在维护吗？

活跃维护中。lint 最近一次提交是在 2026年10月19日。

lint 适合用来做什么？

防止 AI 编码代理随意修改 Tailwind 项目中的共享 UI 组件样式。 在团队设计系统中统一使用主题间距和颜色。 在不 fork 第三方或 monorepo 组件包的前提下施加设计规则。

lint 怎么安装和运行？

使用 npm 安装软件包和 ESLint: npm install -D @shadcn/lint eslint @typescript-eslint/parser 按 README 创建 eslint.config.mjs 并添加插件和规则 运行代码检查: npx eslint .

在哪里获取 lint？

源代码和安装说明在 GitHub 上：https://github.com/shadcn-ui/lint