Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.avocadostudio.dev/llms.txt

Use this file to discover all available pages before exploring further.

Avocado Studio ships with 20 ready-to-use block types covering hero sections, content layouts, conversion CTAs, media, and navigation chrome. They are defined in packages/shared/src/blocks/ (schemas + field metadata) and rendered by packages/blocks/src/blocks/ (React components + CSS).
The fastest way to see every built-in block rendered with default props is the live catalogue at avocadostudio.dev/components — sidebar, viewport switcher, and a live prop editor included. Locally, every site that ships the blocks exposes the same UI at /catalogue (e.g. http://localhost:3000/catalogue in dev).

​
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

BlockWhat it is
HeroFull-width hero section with headline, subheading, CTA buttons, and image.
Feature GridGrid of feature cards with optional icon, title, and description.
CardSingle prominent card with a CTA. The full-bleed variant renders a background image with dark overlay and white text.
Card GridGrid of cards, each with title, description, and CTA.
TestimonialsGrid of testimonial cards with quotes and authors.
FAQ AccordionExpandable question-and-answer section.
StatsRow of big numbers with labels (e.g. 10K+ Users).
QuotePull quote or blockquote with optional author attribution and avatar.
Rich TextFreeform text content with markdown-style formatting.
BannerFull-width announcement or alert bar with optional CTA button. Supports preset variants or custom backgroundColor/textColor.
TabsSwitchable tabbed content panels with rich text in each tab.
CarouselImage/content slideshow with prev/next navigation and dot indicators.
TableData table with column headers, rows, and optional stripe styling.

​
Conversion

BlockWhat it is
CTACentered promotional section with a primary and optional secondary button.

​
Media

BlockWhat it is
GalleryImage grid with configurable columns and optional captions.
VideoVideo player — supports YouTube, Vimeo URLs, or direct video files (mp4, webm). Auto-detects source type.
EmbedEmbed external content — Google Maps, social media posts, or a custom iframe. For video, prefer the Video block.

​
Layout

BlockWhat it is
Two ColumnComposite two-column layout with typed child components in each column.
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.
BlockWhat it is
Site HeaderGlobal site navigation bar with logo, site name, and nav links.
FooterMulti-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:
KindEditor UIInline editable
text / richtextText input / textareaYes
urlURL inputNo
imageAsset Manager modal (Unsplash, AI generation, upload)No
imageAltText input paired with the image fieldYes
enumDropdownNo
colorColor pickerNo
numberNumber inputNo
headingLevelHeading-level dropdown (h1–h6)No
See Block System Architecture for the full vocabulary and the lifecycle from definition to render.

​
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.