Compositions

Layout orchestrators that combine multiple Composites into cohesive UI patterns. Form-based Compositions bind to Zod validation schemas for type-safe data flow.

11 compositions · 4 documented here

Key Characteristics

  • Multi-Composite orchestration — combine multiple Composites into complete UI flows
  • Zod-bound forms — form-based compositions bind to Zod schemas for type-safe validation
  • Layout management — manage arrangement, spacing, and interaction flow between child components
  • Highest-level consumer components — the top of the consumer-facing hierarchy

Components

Login FormEmail + password form with Zod validation and submit handlingAddress GroupMulti-field address form with country-aware formattingCredit Card FormCard number, expiry, CVV with Luhn validationDestructive ModalConfirmation dialog for irreversible actions

How It Fits

Compositions are the top of the consumer-facing tiers. They orchestrate Composites into complete features — a login flow, an address entry form, a payment capture screen. Below them, Preset Primitives provide the atomic building blocks. See the full hierarchy on the Architecture chart.