UI Library
Browse and insert
Not everything needs a prompt. When you know the shape you want, the Library is faster than describing it.
Open the Library from the sidebar and you'll find two tabs:
- Blocks — full-width sections: heroes, feature grids, pricing tables, FAQs, testimonials, calls to action.
- Components — smaller reusable pieces that slot inside a section.
Categories are collapsible, and the panel remembers which ones you left open.
How to insert
- Select the point on the canvas where you want it to land.
- Find the block you want in the Library.
- Click it.
It's inserted directly into the Bricks document. No copy-paste, no JSON, no template import step, and no leaving the editor.
Newest additions appear first in each category, so recently added blocks are easy to spot.
What you get
Every block is hand-built on your project's design system. It arrives already using your brand colours, your fonts and your spacing scale — not a generic theme that you then have to restyle.
Once inserted, it's ordinary Bricks markup. Edit it, restructure it, delete half of it. It has no ongoing link back to the library.
The fastest way to work is usually both together: insert a block from the Library to get the structure, then select it and ask the chatbox to rewrite the copy for your client.
If a block looks unstyled
That almost always means the design system wasn't installed — the blocks reference shared classes and variables that ship with it.
Open the Style panel and install the design system, then reload the editor. Design system & spacing covers what that bundle contains.