37 blocks.
Every layout you need.
7 categories from layout to ecommerce. Each block has typed attributes, design token support, and maps directly to a React component on the frontend.
CATEGORIES
7 categories. One system.
Every block shares the same attribute system — radius Tier, color Mode, spacing Density. Change one token, change every block.
Layout
4 blocks
Structure and organize page content with responsive grid systems and flexible containers.
Typography
4 blocks
Rich text content with full type scale, font pairing, and semantic HTML output.
Display
6 blocks
Visual elements for presenting information, status indicators, and navigation aids.
Interactive
6 blocks
User interface controls with full state management, validation, and accessibility support.
Media
4 blocks
Structure and organize page content with responsive grid systems and flexible containers.
Navigation
3 blocks
Responsive navigation with mobile hamburger, scroll
behavior, and mega menu support.
Ecommerce
13 blocks
WooCommerce-ready blocks for headless storefronts. Product pages, catalogs, and checkout.
THE EDITING EXPERIENCE
Build pages the way you think about them.
Drag blocks, insert patterns, nest sections, tweak tokens. Visual
editing that produces real code.
Radius tiers
6 tiers from sharp to full. Set once in the design system, applied to every
block. Switch the entire site from editorial to playful in one token change.
Color modes
Light, dark, and brand modes on every block. Mix modes on a single page
— a dark hero followed by light content followed by a brand-colored CTA.
All automatic.
InnerBlocks nesting
Blocks inside blocks. A hero section contains headings, paragraphs,
buttons, and images — all independently editable. A feature grid contains
cards, each with their own content. Complex layouts, zero complexity for
the editor.
Spacing density
Compact, comfortable, or generous. Controls padding at section,
component, and element levels. Dense dashboards or airy marketing
pages — same blocks, different density.
13 ecommerce blocks.
WooCommerce-ready blocks for headless storefronts. Build complete
product pages, catalogs, and checkout flows — all rendering on a fast
Next.js frontend.
HOW IT WORKS
WordPress block → React component.
Defined in WordPress, queried via GraphQL, rendered in React, delivered as semantic HTML.
