Skip to main content

Box

Available from version 0.4.0

The Box component is a generic container.

Basics​

import { Box } from 'tailwind-joy/components';

The Box component renders as a <div> by default, but you can swap in any other valid HTML tag or React component using the component prop. The demo below replaces the <div> with a <section> element:

This Box renders as an HTML section element.
import { Box } from 'tailwind-joy/components';

export function BoxBasics() {
  return (
    <Box component="section" className="border border-dashed border-[grey] p-4">
      This Box renders as an HTML section element.
    </Box>
  );
}

Anatomy​

The Box component is composed of a single root <div> element:

<div class="tj-box-root ...">
  <!-- Box contents -->
</div>

API​

See the documentation below for a complete reference to all of the props available to the components mentioned here.