shadcn · SHAD0004

Avoid inline styles

Keep styling in the design system rather than component call sites.

SHAD0004vite-doctor/shadcnuiwarnSuggestion

shadcn/no-inline-stylessrc/rule-packs/shadcn/rules/index.ts Upstream docs

Run this rule

pnpm vite-doctor . --extends shadcn/strict --rules shadcn/no-inline-styles

Why it matters

Ordinary inline properties bypass class-based styling. The Rule checks JSX elements, unreadable style objects, hardcoded colors in custom properties, and style elements.

Recommended fix

Use classes for styling. Pass dynamic values through CSS custom properties when needed, and use theme variables for colors.

Useful links

Rule reference

Example

Replace an inline color with a theme class

Before

<div style={{ color: "var(--color-primary)" }}>Account settings</div>

After

<div className="text-primary">Account settings</div>