Components

The block vocabulary — every component you can drop onto a page in the GrapesJS editor, and the single source of truth the AI is constrained to. Each section block imports as a labelled, editable component via its data-pb-block key.

This reference is generated from the live block catalog (55 blocks), so new components appear here automatically as the package adds them.

Sections 13

Full-width page sections — the AI vocabulary. Each wraps its markup in a labelled <section data-pb-block>.

Component	Key	What it does
Navbar	`navbar`	Top navigation bar with logo and links.
Hero	`hero`	Headline, subheadline and a primary call-to-action.
Features	`features`	A grid of feature cards.
Logo cloud	`logos`	A row of customer / partner logos.
Stats	`stats`	Key metrics in a row.
Gallery	`gallery`	An image gallery grid.
Pricing	`pricing`	Pricing tiers with a CTA each.
Testimonial	`testimonial`	A customer quote with attribution.
FAQ	`faq`	Frequently asked questions.
Team	`team`	Team member cards.
Call to action	`cta`	A closing call-to-action banner.
Contact	`contact`	A simple contact form.
Footer	`footer`	A footer with links and copyright.

Basic 8

Primitive building blocks for free-form composition. No data-pb-block wrapper required.

Component	Key	What it does
Text	`text`	A paragraph of text.
Heading	`heading`	A section heading.
Image	`image`	An image.
Button	`button`	A call-to-action button.
2 Columns	`columns-2`	Two-column row.
3 Columns	`columns-3`	Three-column row.
Spacer	`spacer`	Vertical spacing.
Divider	`divider`	A horizontal rule.

Shapes 4

Decorative full-width SVG section dividers.

Component	Key	What it does
Wave	`shape-wave`	A wavy section divider.
Slant	`shape-slant`	A diagonal section divider.
Tilt	`shape-tilt`	A tilted section divider.
Curve	`shape-curve`	A curved section divider.

Components 15

Owner-authored, trusted interactive blocks — interactive via Alpine out of the box.

Component	Key	What it does
Card	`card`	Titled content container with heading, text and a slot.
Banner	`banner`	Dismissible inline alert strip.
Modal	`modal`	Trigger button with a centered overlay dialog.
Drawer	`drawer`	Trigger button with a right-edge slide-over panel.
Tabs	`tabs`	Tabbed panels — switch content without navigating.
Accordion	`accordion`	Collapsible items — expand one at a time.
Tooltip	`tooltip`	Hover/focus hint bubble above an element.
Dropdown menu	`dropdown_menu`	Button that toggles a menu of actions.
Video	`video`	A self-hosted HTML5 video player.
Breadcrumbs	`breadcrumbs`	A breadcrumb trail.
Rating	`rating`	A star rating display.
Progress bar	`progress`	A labelled progress bar.
Alert	`alert`	A callout / alert box.
Avatar	`avatar`	A circular avatar image.
Embed / iframe	`embed`	Embed a YouTube, Vimeo, Maps or any URL via an iframe.

Forms 11

Inputs and a form container that submit to a collection or run a flow.

Component	Key	What it does
Text input	`text_input`	Single-line text field with a label.
Email input	`email_input`	Email field with a label.
Textarea	`textarea`	Multi-line text field with a label.
Select	`select`	Dropdown select with a label.
Checkbox	`checkbox`	A single labelled checkbox.
Radio group	`radio_group`	A set of radio buttons sharing one name.
Submit button	`submit_button`	A form submit button.
Form	`form`	A form card with fields and a submit button.
Date picker	`date_picker`	A date input field.
File upload	`file_upload`	A file input field.
Autocomplete	`autocomplete`	A typeahead input that searches a collection and fills a value.

Data 4

Blocks that render collection rows or State arrays reactively.

Component	Key	What it does
Data Table	`data_table`	A table that lists rows from a collection.
List	`list`	A list that repeats over a State array.
Stat card	`kpi`	A KPI number aggregated from a collection (count/sum/avg).
Chart	`chart`	A chart (bar/line/donut/area) aggregated from a collection via Chart.js.