Skip to main content
Docs/Sections
DocsSections
Free

Sections

A library of ready-made layout sections (hero, pricing, feature grid, footer, etc.) you can browse in Design View and drop into your app.

Browsing Sections

Open Design View and switch to the Sections tab. Scroll the catalog by category: hero, navigation, feature grid, pricing, testimonials, footer, etc. Each entry shows variants and a preview.

Inserting a Section

Click a section to preview, then choose a variant. The section is inserted at the cursor position with your current design tokens applied (colors, fonts, radius), so it visually matches the rest of your app.

Inserts use the same idempotent injection markers as plugins, so a chat refinement that says "redo the hero" cleanly replaces the section without leaving stale markup behind.

Filtering Sections

The section list shows only sections that match your app's code, filtered by kind (page-level section vs reusable element). You only see options that will compile cleanly into your stack.

Tips

  • Use sections to start a layout, then tweak in chat ("change the hero to two columns with a phone screenshot").
  • If a section is close but not quite, drop it in first and ask chat to modify; rewriting from a baseline is cheaper than generating from scratch.
  • Pair Sections with Design View tokens so the colors and spacing stay consistent across all inserted sections.

FAQs

What is the section library?▾
A curated catalog of ready-made layout sections (hero, feature grid, pricing table, footer, etc.) you can browse in Design View and drop into your app. Each section has variants you can pick from and the list only shows sections that match the code of your app.
How is this different from a template?▾
A template is a full starter app. A section is a single piece of a page you compose into an existing app. Use templates to start from scratch; use sections to add a new piece without regenerating the whole thing.
Can I save my own sections?▾
Custom user-authored sections are not on the catalog today. If you find yourself wanting one repeatedly, consider authoring a Skill that injects the section markup as a generation hint instead.

Ready to build?

Create your first app for free, no credit card required.

Plugins & IntegrationsPlugin Development