Overview

Blocks are not magic. Each one is a single file that default-exports a React component and imports only from @chakra-ui/react and react-icons. The conventions below are what keep 200 files feeling like one library.

The rules

1. One file, one default export. A block never spans multiple files. If it needs a sub-component, that sub-component lives above the default export in the same file.
2. No props on the block itself. Blocks take no configuration — you edit the content directly. Props would mean designing an API for text you are going to rewrite anyway.
3. Content lives in a const at the top. Arrays of features, plans or testimonials sit above the component so they are the first thing you edit.
4. Semantic tokens only. fg.muted, not gray.500. bg.panel, not white. This is what makes colour mode and Theme Config work.
5. Accent through colorPalette. A block never names a palette. It uses colorPalette.solid and inherits whatever is in scope.

What you get

Because blocks are ordinary components, everything you already know applies: you can delete half of one, wrap it in a Suspense boundary, or lift its data array into a CMS query. There is no framework to work around.