shadcn

To build a shadcn/ui settings form with validation, use FieldGroup/Field components with data-invalid/aria-invalid states. This ensures correct form structure, semantic token styling, and accessibility validation rules across your user interface.

Ensure consistent shadcn/ui component composition by enforcing correct structures for Card, Dialog titles, TabsList placement, and grouped items like SelectGroup. This prevents inconsistent code by applying project-specific styling and accessibility rules.

Use the shadcn CLI to run init, add, search, docs, and info commands for obtaining project info and component documentation. This respects your project's package runner and context fields like base vs radix and tailwind versions.

Manual dark mode overrides break shadcn/ui styling because they bypass semantic color tokens. The correct approach enforces semantic colors, gap-based spacing, and size-* usage while banning risky patterns like manual z-index and dark overrides.

Yes, this approach works with both Tailwind v3 and v4 by reading the project's components.json file and injected context fields. It adapts to your specific base configuration, icon library, and aliases for correct component generation.

You need Dialog titles and Avatar fallbacks when building or modifying shadcn/ui components to validate accessibility and structure rules. These elements ensure correct component composition and prevent missing semantic structure in your user interface.