shadcn-ui/lint

어떤 프로젝트인가요?

핵심 기능

• 01컴포넌트별 contracts로 className 오버라이드를 제한합니다.
• 02테마 토큰을 사용하도록 임의의 값과 원시 색상값을 차단합니다.
• 03프로젝트의 크기, variants, 테마 파일을 활용해 수정 방법을 제안합니다.
• 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] 같은 임의의 값을 차단하거나, 원시 색상값을 거부하는 등 허용할 스타일을 정의할 수 있습니다. 규칙을 위반하면 무엇이 잘못되었는지 설명하고 프로젝트의 컴포넌트, variants, 테마를 바탕으로 대안을 제안합니다.

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