shadcn-ui/lint

これは何？

主な機能

• 01コンポーネントごとのコントラクトで、classNameの上書きを制限します。
• 02テーマトークンの使用を促すため、任意の値や生のカラー値を禁止します。
• 03プロジェクト内のサイズ、バリアント、テーマファイルを使った修正案を提示します。
• 04ESLintとOxlintに対応し、React、Vue、Svelteで使えます。
• 05shadcn/uiは不要で、独自コンポーネントのimportも読み取れます。

ユースケース

• Tailwindのコードベースで、AIコーディングエージェントによる共有UIコンポーネントの再スタイリングを防ぐ。
• チームのデザインシステム全体で、テーマに基づくスペーシングとカラーを適用する。
• フォークせずに、サードパーティ製またはモノレポ内のコンポーネントパッケージへデザインルールを適用する。

クイックスタート

1. 1

   npmでパッケージとESLintをインストールします

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

   プラグインとルールを含むeslint.config.mjsを作成します（READMEを参照）

3. 3

   リンターを実行します

   npx eslint .

使う前に知っておきたいこと

• !Tailwind v4のプロジェクトでのみ動作します。
• !Oxlintが読み取るのはVueおよびSvelteファイルのscriptブロックのみで、マークアップは読み取りません。
• !Node.js 20.19以降が必要です。

トピック

よくある質問

lint とは？

Tailwindのデザインシステム向けに、許可するスタイルルールを定義でき、独自のコンポーネントやテーマをもとにエージェントへ修正案を提示する、エージェントファーストのリンターです。 @shadcn/lintは、UIコードにデザインシステムのルールを適用するTailwind v4プロジェクト向けのリンターです。ButtonのclassName上書きを制限したり、p-[13px]のような任意の値を禁止したり、生のカラー値を拒否したりと、許可するスタイルを定義できます。ルール違反があると、何が問題なのかを説明し、プロジェクト内のコンポーネント、バリアント、テーマに基づいた代替案を提案します。

lint は無料で使えますか？ライセンスは？

lint は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

lint は今もメンテナンスされていますか？

活発にメンテナンス中。lint の最終コミットは 2026年10月19日 です。

lint は何に使えますか？

Tailwindのコードベースで、AIコーディングエージェントによる共有UIコンポーネントの再スタイリングを防ぐ。 チームのデザインシステム全体で、テーマに基づくスペーシングとカラーを適用する。 フォークせずに、サードパーティ製またはモノレポ内のコンポーネントパッケージへデザインルールを適用する。

lint のインストール方法は？

npmでパッケージとESLintをインストールします: npm install -D @shadcn/lint eslint @typescript-eslint/parser プラグインとルールを含むeslint.config.mjsを作成します（READMEを参照） リンターを実行します: npx eslint .

lint はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/shadcn-ui/lint