shadcn-syntax-layout-primitives

What problem does it solve?

It solves recurring mistakes when implementing shadcn UI layout helper primitives (Resizable, ScrollArea, Separator, AspectRatio) by mapping each primitive to the correct layout goal and enforcing the v4 composition rules that prevent runtime crashes and invisible UI. These failures include broken drag-resize layouts, scroll areas that never overflow, separators that collapse inside flex rows, and AspectRatio children that render “empty” because they don’t fill the absolutely-positioned slot.

Core Features & Use Cases

• Primitive selection by layout intent: choose Resizable for split panes, ScrollArea for constrained scrolling, Separator for horizontal/vertical dividers, and AspectRatio for fixed width:height media containers.
• v4-correct composition and prop wiring: uses the right subcomponents, prop names, and patterns for react-resizable-panels v4 and Radix primitives to match shadcn’s evergreen-2026 registry.
• Production guardrails via anti-pattern prevention: prevents common integration failures such as PanelGroup context omissions, missing ScrollArea height constraints, incorrect Separator orientation, AspectRatio child sizing, and nested Resizable group autoSaveId collisions.
• Client boundary correctness: enforces the “use client” invariant so Radix-based primitives don’t break in Server Components.

Quick Start

Ask: “Explain how to implement a nested IDE layout using shadcn Resizable with ScrollArea, Separator vertical dividers, and an AspectRatio video container, and point out the exact client boundary and prop rules I must follow.”