Changing a block without fighting it.
You own the file. That is the whole customisation story — but a few habits keep your edits from drifting away from the rest of the library.
The const array at the top of each block exists so that ninety percent of
edits never touch JSX:
Swap the strings, add or remove entries, and the layout adapts.
| Instead of | Use |
|---|---|
color="#71717a" | color="fg.muted" |
bg="white" | bg="bg.panel" |
borderColor="#e4e4e7" | borderColor="border" |
p="24px" | p="6" |
Tokens are what make a block correct in dark mode and under a different accent. A hard-coded hex is a bug that only appears for half your users.
If you paste the same block on four pages, promote it — but promote it as your component, in your repo:
Design the API around what genuinely differs on your site. A prop for every string reinvents the block.
To change something across every block at once, do it in the theme rather than in each file. Chakra recipes let you restyle a component library-wide:
Now every button in every block is pill-shaped, and no block file changed.
Passing a partial recipe extends Chakra's built-in one. If you want to drop its variants entirely, define the recipe from scratch and register it under the same key.