Sheet

The Sheet component provides a flexible UI element for displaying overlaid content, often used for dialogs or side panels. It is composed of several subcomponents such as SheetHeader, SheetFooter, SheetTitle, and SheetDescription to offer a structured and customizable interface.

Usage

import { Sheet } from '@harnessio/ui/components'

return (
  <Sheet.Root>
    <Sheet.Trigger asChild>
      <Button>Open Sheet</Button>
    </Sheet.Trigger>
    <Sheet.Content>
      <Sheet.Header>
        <Sheet.Title>Sheet Title</Sheet.Title>
        <Sheet.Description>This is the sheet description.</Sheet.Description>
      </Sheet.Header>
      <p>Sheet content goes here.</p>
      <Sheet.Footer>
        <Button>Footer Action</Button>
      </Sheet.Footer>
    </Sheet.Content>
  </Sheet.Root>
)

Anatomy

All parts of the Sheet component can be imported and composed as required.

<Sheet.Root>
  <Sheet.Trigger>
    <Button>Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header>
      <Sheet.Title>Sheet Title</Sheet.Title>
      <Sheet.Description>This is the sheet description.</Sheet.Description>
    </Sheet.Header>

    <p>Sheet content goes here.</p>

    <Sheet.Footer>
      <Button>Footer Action</Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

API Reference

Root

The Root component serves as the main container for all sheet elements.

Prop	Required	Default	Type
children	true
className	false

Trigger

The Trigger component is used to open the sheet.

<Sheet.Trigger>
  <Button>Open Sheet</Button>
</Sheet.Trigger>

Prop	Required	Default	Type
children	true
className	false

Content

The Content component defines the main content area of the sheet.

<Sheet.Content>
  <Sheet.Header>
    <Sheet.Title>Sheet Title</Sheet.Title>
    <Sheet.Description>This is the sheet description.</Sheet.Description>
  </Sheet.Header>
  <Sheet.Content>
    <p>Sheet content goes here.</p>
  </Sheet.Content>
  <Sheet.Footer>
    <Button>Footer Action</Button>
  </Sheet.Footer>
</Sheet.Content>

Prop	Required	Default	Type
children	true
className	false
side	false	'right'
hideCloseButton	false	false
modal	false	true
handleClose	false
overlayClassName	false

Header

The Header component is used to define the header section of the sheet.

<Sheet.Header>
  <Sheet.Title>Sheet Title</Sheet.Title>
  <Sheet.Description>This is the sheet description.</Sheet.Description>
</Sheet.Header>

Prop	Required	Default	Type
children	true
className	false

Footer

The Footer component is used to define the footer section of the sheet.

<Sheet.Footer>
  <Button>Footer Action</Button>
</Sheet.Footer>

Prop	Required	Default	Type
children	true
className	false

Title

The Title component displays the title of the sheet.

<Sheet.Title>Sheet Title</Sheet.Title>

Prop	Required	Default	Type
children	true
className	false

Description

The Description component displays the description of the sheet.

<Sheet.Description>This is the sheet description.</Sheet.Description>

Prop	Required	Default	Type
children	true
className	false