> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Section Library
> Browse 1,700+ professionally designed sections in the website editor and swap them into your pages — heroes, feature grids, pricing, testimonials, and more
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.
The direct, in-place swap: the selected section on your page is replaced with the chosen design immediately, no chat round-trip.
The trade-off is honest and stated in the button's tooltip: the new design arrives with its own sample text, which may land in place of your current copy. Pick this when you're still blocking out a page and the words aren't precious yet.
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?
The visual editing workflow the section library plugs into
Driving bigger changes through the AI chat