Skip to main content
The section library is a catalog of over 1,700 professionally designed page sections across roughly 50 categories — heroes, feature grids, pricing tables, testimonials, FAQs, headers, footers, CTAs — every one with a preview thumbnail. You browse it inside the website editor, and when you find a design you like, you swap it into your page. Sections aren’t locked widgets: a section you add becomes normal, editable code in your project. You can restyle it, edit its copy, animate it, or ask the AI to change it like anything else you built.

​
Opening the Library

In the /v3 editor, the left pane has a Components mode alongside Style, Navigator, Pages, and Audit. Switch to it and the catalog appears next to your live preview:
  • Search — type what you’re after (“pricing”, “team”, “split hero”)
  • Category chips — filter to one category at a time
  • Context-aware browsing — click a section in your live preview first, and the catalog narrows to designs in that section’s category (click a hero, see heroes)

​
Swapping a Section

Each card in the catalog offers two actions:
Clicking Use in chat writes a targeted instruction into the AI chat box — which section of which page to replace, and with which design. Nothing is sent until you press send, so you can add your own notes first.The AI does the swap and preserves your existing copy — your headline, your body text, your buttons land in the new design’s layout. This is usually what you actually want.
You can also start from the page instead of the catalog: select a section in the live preview and use the Swap section action in the inspector to see alternatives for that specific section.
If Hiveku can’t tell exactly which section you mean (some pages repeat near-identical layouts), it asks — a picker lists the candidate spots in plain language, with the ones on the current page first, rather than guessing and editing the wrong one.

​
What You Get in Your Project

  • The section’s code is added to your project as a regular component — visible in the file tree, versioned like everything else, fully editable.
  • Styling uses your project’s Tailwind setup, so the section inherits your theme tokens rather than fighting them.
  • Any packages the design needs are added to your project automatically.

​
Tips

  • Swap early, write late. Use Replace section now while exploring layouts, then switch to Use in chat once your copy is final.
  • Let the selection do the aiming. Clicking the section in the preview before browsing both narrows the catalog and makes the swap instruction precise.
  • It’s just code afterwards. Don’t hunt the library for a variant that’s 95% right — take the closest design and ask the AI for the last 5%.

​
What’s Next?

Edit Visually

The visual editing workflow the section library plugs into

Build with AI

Driving bigger changes through the AI chat