shadcn-first

Someone maintains this code after you. Every hand-written div with bespoke classes and every style={{}} is a thing they keep alive, and it drifts. Hand-rolled UI also silently drops the craft that comes free with the library: focus rings, hover and active states, keyboard navigation, skeletons, empty states, ARIA.

The order. Never skip a step.

1. Block. ui.shadcn.com/blocks has whole sidebars, dashboards, logins, data tables. Install the block.
2. Component. If no block fits, use a component from the registry.
3. Compose two or three components.
4. Write it yourself. Only here, and the commit message must name which block or component you evaluated and why it did not fit.

Adapt the design to the component, not the component to the design. Brand and visual language are reached through theme variables in one theme, never per-screen CSS beside the component.