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 by Framework

The section list filters by your app's framework (React, Vue, Vanilla HTML, etc.) and by kind (page-level section vs reusable element). You only see options that will compile cleanly into your stack.

If you change framework mid-build, the section list updates on the next open of the Sections tab.

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 a framework filter so React, Vue, and HTML apps see only compatible options.
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