Waffle Design System


Box is the base primitive component on top of which all other components are built. By default, it renders a div element. When building any new layout elements or components, you'll almost always go for a Box to start with. There are some other components that are lumped into the category of "primitives": Flex, Grid, Text.



Box is the base element all others are created from. It can also be inline.
Editable Example

as prop

You can use the as prop to change which element is rendered. You can pass a string of a dom element, or you can pass another React component.

Editable Example
Waffle Design SystemBlockstack PBC