Showcase tour
Every component in the Showcase opens onto a four-tab preview — Visual, Code, Recipe, and Content. Each tab answers a different question about the component, and together they cover the loop of using one: see it, read it, understand its data shape, and edit the content driving it.
The default tab. Renders the active variant in a sandboxed frame at the breakpoint you select — mobile, tablet, laptop, desktop, or fullscreen. Switching variants on the right-hand side re-renders without leaving the page.
Use Visual to confirm a component looks right against the current theme before you ship.
A file picker on the side, syntax-highlighted source on the right. The component implementation, its types, and any colocated helpers are all reachable here without leaving the showcase.
This is the surface customers screenshot when asking "how is this built?" — keep the source readable.
Shown for components that ship a .recipe.ts file — the typed Sitecore data the component expects (templates, parameters, source filters). A toggle switches between the Markdown rendering and the raw TypeScript.
This is the tab Agent Studio cares about most. If you're authoring data for a brand, the recipe tells you exactly what shape it has to land in.
A form on the side, the live preview on the right. The form is generated from the renderer's Zod schema; every field with a .default(…) clause is editable. Toggle between the rendered form and the underlying JSON if you need to paste content in bulk.
Edits persist through the session so you can compare two variants side-by-side without losing your work.
The preview renders against the currently selected theme. Switching themes — through the theme toggle in the registry chrome, or by editing a brand kit — refreshes the preview live. This is how you confirm a component looks right across every brand the registry serves.
On installs that have brand-kit authoring enabled, a right- side theming panel sits next to the preview so you can tweak palette tokens and watch the component respond without leaving the page.
- Start in Visual — find the variant that fits the layout you need.
- Open Recipe — read the data shape the component expects from Sitecore. This is the contract authors fill.
- Drop into Content— load in the brand's real content and confirm the preview still looks right.
- Glance at Code — only if you need to extend or fork the component.
- Rendering variants — how the variants you switch between in the Visual tab are defined in code.
- Theming & design tokens — what the preview is actually re-styling when you switch themes.
- Getting started — install a component into your own project.