packages/shared/src/blocks/ (schemas + field metadata) and rendered by packages/blocks/src/blocks/ (React components + CSS).
When to use built-ins vs. custom blocks
- Use the built-ins when you want a starter content model and don’t need to match an existing design system. They cover the common marketing/landing patterns and are fully wired into the AI planner, asset manager, and preview overlay.
- Bring your own when you have an existing component library or design tokens you need to preserve. See Custom Blocks — you can also mix and match (built-ins + custom in one manifest).
Catalogue
Content
| Block | What it is |
|---|---|
| Hero | Full-width hero section with headline, subheading, CTA buttons, and image. |
| Feature Grid | Grid of feature cards with optional icon, title, and description. |
| Card | Single prominent card with a CTA. The full-bleed variant renders a background image with dark overlay and white text. |
| Card Grid | Grid of cards, each with title, description, and CTA. |
| Testimonials | Grid of testimonial cards with quotes and authors. |
| FAQ Accordion | Expandable question-and-answer section. |
| Stats | Row of big numbers with labels (e.g. 10K+ Users). |
| Quote | Pull quote or blockquote with optional author attribution and avatar. |
| Rich Text | Freeform text content with markdown-style formatting. |
| Banner | Full-width announcement or alert bar with optional CTA button. Supports preset variants or custom backgroundColor/textColor. |
| Tabs | Switchable tabbed content panels with rich text in each tab. |
| Carousel | Image/content slideshow with prev/next navigation and dot indicators. |
| Table | Data table with column headers, rows, and optional stripe styling. |
Conversion
| Block | What it is |
|---|---|
| CTA | Centered promotional section with a primary and optional secondary button. |
Media
| Block | What it is |
|---|---|
| Gallery | Image grid with configurable columns and optional captions. |
| Video | Video player — supports YouTube, Vimeo URLs, or direct video files (mp4, webm). Auto-detects source type. |
| Embed | Embed external content — Google Maps, social media posts, or a custom iframe. For video, prefer the Video block. |
Layout
| Block | What it is |
|---|---|
| Two Column | Composite two-column layout with typed child components in each column. |
Navigation (chrome)
These blocks are structurally pinned — they cannot be added, moved, or removed by the AI. Every page has exactly one of each, and they render as global chrome.| Block | What it is |
|---|---|
| Site Header | Global site navigation bar with logo, site name, and nav links. |
| Footer | Multi-column footer with link groups and copyright. |
Field types you’ll see
Each block declares per-field metadata (kind) that drives editor UI, AI behavior, and inline editability:
| Kind | Editor UI | Inline editable |
|---|---|---|
text / richtext | Text input / textarea | Yes |
url | URL input | No |
image | Asset Manager modal (Unsplash, AI generation, upload) | No |
imageAlt | Text input paired with the image field | Yes |
enum | Dropdown | No |
color | Color picker | No |
number | Number input | No |
headingLevel | Heading-level dropdown (h1–h6) | No |
Extending the set
There are two extension paths:Add a built-in block
Contribute a new block type to the shared registry. Best for additions that belong in every site running Avocado Studio.
Register custom blocks
Author your own blocks in your site’s repo and expose them via a manifest. Best for site-specific component libraries.