Components are grouped into Sections, Common, General, Media, Docs, Portfolio, and Integrations in the insert panel. Sections holds ready-made landing blocks; Common opens by default with the most frequently used blocks. Filter by category or search by name. Pick the category that matches your page goal.
Categories in the panel
Category
Typical blocks
Sections
Hero, Features, About, Stats, Testimonials, Team, Pricing, FAQ, Logos, CTA, and Contact — each with multiple layouts
Common
The everyday blocks: heading, text, media, video, feedback, email signup, share, YouTube, link card
TestimonialsSection — quotes in cards, spotlight, or plain layout
TeamSection — people grid or list
PricingSection — plan cards or list
FaqSection — questions and answers
LogosSection — partner or customer logos
CtaSection — closing call to action
ContactSection — address, email, and phone as mailto/tel/map links (no form submission)
Each section is one MDX tag with plain props. Pick a layout variant from the picture-tile control in the customize panel. The + inserter also lists Sections when you want to drop a block without opening the Components rail.
See Page sections for layout notes and AI authoring tips.
General
Workhorse blocks for most pages:
Hero — top-of-page headline and actions
Button / Card / Grid — layout and CTAs
Accordion — collapsible FAQ sections
Feedback — callout banners (info, warning)
Row / Column — structure inside MDX when composing by hand
Media
Visual storytelling:
Media — responsive image or embed
Carousel / Swiper — rotating slides
CompareImage — before/after slider
MasonryGrid — uneven image grids
Always set alt text and prefer site library assets for performance.
Docs
Purpose-built for documentation and knowledge bases:
Collection — card grid or list from a folder
AccordionGroup — grouped expandable sections
Changelog / Roadmap — structured timeline content
ReadingProgress — scroll indicator on long pages
Book — multi-part doc navigation
Pair with collections and sidebar layouts for full doc sites.
Portfolio
Showcase work and identity:
ProfileHero — name, role, links, portrait
LogoCloud — client or partner logos
MasonryGrid — project thumbnails
Integrations
Commerce blocks that require a connected service:
Store collection — product grid from a Fourthwall collection; links to on-site product pages at /shop/{handle}
Connect Fourthwall under Integrations before inserting this block. See Fourthwall integration.
Search
Use the Search field when you know the block name ("signup", "chart", "table"). Unmatched queries mean no registered component with that label.
Choosing the right block
Need
Start with
List blog posts from a folder
Collection (Docs)
Top of landing page
HeroSection (Sections)
Image gallery
Carousel or MasonryGrid (Media)
Policy FAQ on a landing page
FaqSection (Sections)
Policy FAQ in long docs
AccordionGroup (Docs)
Client logos
LogoCloud (Portfolio)
Merch grid from Fourthwall
Store collection (Integrations)
Products block
Under General, Products lists active products for this site — each card links to /products/{slug}. Configure layout (grid or column), columns, max products, and whether to show titles and prices. For Fourthwall merch grids, use Integrations → Store collection instead (/shop/{handle}).
