Skip to content

prefer-shadcn-primitives

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

Why

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

Fix

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

Examples

Before — flagged Do not use a raw button
src/form.tsx
import { Card } from "@/components/ui/card";
const action = <button>Save</button>;
After — preferred Use a shared button
src/form.tsx
import { Button } from "@/components/ui/button";
const action = <Button>Save</Button>;

Options

{
"additionalProperties": false,
"properties": {
"assumeAvailable": { "type": "boolean" },
"detectProjectPrimitives": { "type": "boolean" }
},
"type": "object"
}