Skip to content
Sarj Standards

TypeScript · style

prefer-shadcn-primitives

eslint:prefer-shadcn-primitives

Require visible raw JSX controls to use the corresponding shared shadcn primitive.

Default
error
Fix
none
Languages
typescript

Why

Shared primitives centralize interaction, accessibility, and visual behavior across the product.

Fix

Replace the raw visible control with the corresponding shared shadcn component.

Before / after

Executed by this rule’s unit tests.

Before

Do not use a raw button

src/form.tsx · focus
const action = <button>Save</button>;

After

Use a shared button

src/form.tsx · focus
import { Button } from '@/components/ui/button'; const action = <Button>Save</Button>;

Limits

  • Hidden and file inputs, unassociated labels, and non-control semantic elements are excluded.

Message IDs

preferShadcnPrimitive