Waffle Design System

Box

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.

Import

Usage

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.

Button
Editable Example
Waffle Design SystemBlockstack PBC