Use these guides to choose component families, composition guides, SDK reference handoffs, and playground routes.

Start here

Choose the route by job

• I need app shell, header, footer, menus, or storefront chrome -> Layout components
• I need editorial or merchandising blocks for landing pages -> Storefront components
• I need product, cart, Search, PDP, or checkout-adjacent UI -> Commerce components
• I need primitives like buttons, dialogs, inputs, or tabs -> Base UI components

Choose the route by composition question

• How do I assemble a storefront page? -> Storefront page guide
• How do I build PLP or Search UI? -> Product listing and search
• How do I build PDP or purchase-adjacent UI? -> Product detail page
• How do I carry a theme from the playground into app code? -> Theme from playground and Theming

Component families

• Layout components - 12 guides for headers, footers, mobile navigation, promotion bars, and storefront chrome.
• Storefront components - 24 guides for editorial, merchandising, media, and landing-page content blocks.
• Commerce components - 54 guides for product, cart, Search, and checkout-adjacent shopper flows.
• Base UI components - 26 guides for primitives, overlays, form controls, disclosure, and resolver-backed UI building blocks.

Handoff order

1. Choose the right family for the job.
2. Open the family page for real component routes and composition context.
3. Switch to a guide page when the task is page-level composition rather than single-component selection.
4. Verify exact exports, props, slots, hooks, and runtime behavior in SDK package reference.
5. Use the live playground when you need interactive verification, theme state, visual variants, or export flows.

Contract scope

• Enad docs owns route selection, chooser guidance, composition framing, and handoff structure.
• SDK package reference owns exact exports, props, slots, hooks, and runtime behavior.
• The live playground owns interactive examples and theme/runtime experimentation.
• Guide routes such as Storefront page guide, Product listing and search, and Product detail page own page-level composition help that is broader than any single component page.

When to move on

Move on when you already know the component family or when the task needs exact implementation facts. The overview chooses the route; family docs, guides, SDK reference, and the sandbox carry the next level of detail.

Playground handoff

Open the live playground for runtime behavior, theme state, visual variants, and export flows after choosing the right family or guide route. Prefer docs pages for route choice and ownership boundaries, then use the playground to confirm behavior rather than guessing from prose.

Playground runtime: sdk.enad.io/sandbox