Skip to content
Sarj Code Standards

prefer-shadcn-primitives

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

preferShadcnPrimitive Rule source Tests Catalog JSON

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": {
      "description": "Assume supported shared UI primitives are available in this project.",
      "type": "boolean"
    },
    "detectProjectPrimitives": {
      "description": "Resolve project-owned UI primitives before recommending replacements.",
      "type": "boolean"
    }
  },
  "type": "object"
}