Skip to main content

Sheet

Available from version 0.3.0

Sheet is a generic container that supports Tailwind-Joy's variants.

Basics​

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

The Sheet component, in addition to the variants, also has access to the color prop, allowing you to use every palette of the theme.

Hello world!
import { Sheet } from 'tailwind-joy/components';

export function SheetBasics() {
  return (
    <Sheet variant="outlined" color="neutral" className="p-8">
      Hello world!
    </Sheet>
  );
}

Anatomy​

The Sheet component is composed of a single root <div> element that wraps around its contents:

<div class="tj-sheet-root ...">
  <!-- Sheet contents -->
</div>

API​

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