DecorativeBox

A box with background styling meant to highlight or contain items visually.

Overview

The DecorativeBox is a stylized container primarily used for layout scaffolding or highlighting content with background patterns and colors.

import { DecorativeBox } from "@elemnts-ui/react";

By default, the DecorativeBox takes up the full width and height of its parent and has an outline and patterned background.

The DecorativeBox comes with two variants: primary (default) and secondary.

The DecorativeBox supports all standard div props as well as Panda CSS system properties.

Prop	Type	Default
`variant`	`"primary" \| "secondary"`	`"primary"`