shadcn · SHAD0005

Keep component classes statically analyzable

Use class values that the design-system analyzer can resolve.

SHAD0005vite-doctor/shadcnuiwarnSuggestion

shadcn/require-static-classessrc/rule-packs/shadcn/rules/index.ts Upstream docs

Run this rule

pnpm vite-doctor . --extends shadcn/strict --rules shadcn/require-static-classes

Why it matters

Unreadable class values on recognized components prevent other design-system Rules from checking those classes. Complete static strings and conditional choices between them remain analyzable.

Recommended fix

Choose between complete class strings instead of assembling class names from dynamic fragments. Keep component-owned variant calls inside the component implementation.

Useful links

Rule reference

Example

Choose between complete class names

Before

import { Button } from "@/components/ui/button"

export function SaveButton({ width }: { width: string }) {
  return <Button className={`w-${width}`}>Save</Button>
}

After

import { Button } from "@/components/ui/button"

export function SaveButton({ wide }: { wide: boolean }) {
  return <Button className={wide ? "w-full" : "w-auto"}>Save</Button>
}