What is a 'DecorativeBox' anyway?

[JasonAllenCorns]

All throughout the docs, I see <DecorativeBox />, and even see it with props in https://www.radix-ui.com/themes/docs/components/section, but the component itself is never addressed.

Does <DecorativeBox /> exist out there in the wild somewhere, or is it meant to represent a component that we'd custom-build for our app and drop in as needed?

[benoitgrelard]

DecorativeBox is just a component we use in the docs to show some visual box when we want to demonstrate layout components.It isn't a part of the library, it's really just for the demos/examples.

[dhoegl]

This helps, but had to search outside of the Radix documentation to understand what this was. Not ideal.

[AndreaDellaValle]

For those who wants to use the same nice background styling:

background-color: var(--gray-a3);
background-clip: padding-box;
border: 1px solid var(--gray-a5);
border-radius: var(--radius-1);
background-image: url('data:image/svg+xml,<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"><g fill="%239c92ac" fill-opacity="0.2" fill-rule="evenodd"><path d="M5 0h1L0 6V5zM6 5v1H5z"/></g></svg>');