Shadcn UI Architecture Guide

Goal

Build beautiful, accessible, and highly customizable user interfaces in Flutter using the Shadcn UI design system. This skill ensures proper framework integration (Pure, Material, or Cupertino), consistent theming, and effective use of the 30+ responsive components available in the library.

Process

🚀 High-Level Workflow

Implementing Shadcn UI involves setting up the design tokens first, then consuming specific components for layout and logic.

Phase 1: Foundation & Theming

• Install: Add shadcn_ui to dependencies.
• Initialize: Choose between ShadApp (Standalone) or ShadApp.custom (Material/Cupertino bridge).
• Configure: Define ShadColorScheme and customize ShadThemeData.

Phase 2: Component Implementation

• Typography: Strictly use ShadTextTheme styles for consistent font scaling and semantics.
• Forms: Use ShadForm and specialized Shad*FormField widgets for unified validation.
• Interactions: Leverage Sonner, Dialog, and Sheet for standardized overlays and user feedback.