Info

Why "Nebula"

Only drawable Boxes participate in visual styling

Box exposes a drawable prop that controls whether it participates in rendering visual styles.

By default, a Box is not drawable:

  • it does not render background or surface styles

  • it does not apply theme, brand, color, variant or intent

  • it behaves like a structural element (similar to a div)

This keeps layouts lightweight and avoids unnecessary styling work.

Drawable as a gate

The drawable prop acts as a gate for all visual styling.

When drawable is enabled:

  • the Box can render a surface

  • styling props like theme, brand, color, variant, intent and surface become meaningful

Without drawable, these props have no visual effect.

Minimum required to draw a surface

Enabling drawable alone is not enough. To render a visible surface, the Box also needs:

  • a variant (how it is drawn)

  • an intent (what semantic tone it uses)

<Box drawable variant="solid" intent="neutral" />

Both variant and intent are required. Providing only one does not produce a complete surface.