Component anatomy

Compound components

Sheet.Root owns behavior. Trigger and Close request state changes; Portal chooses the DOM boundary; Backdrop, Viewport, Content, Handle, Title, and Description describe the rendered interface.

<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Portal>
    <Sheet.Backdrop />
    <Sheet.Viewport>
      <Sheet.Content>
        <Sheet.Handle />
        <Sheet.Title>Filters</Sheet.Title>
        <Sheet.Description>Narrow the results.</Sheet.Description>
        <Sheet.Close>Done</Sheet.Close>
      </Sheet.Content>
    </Sheet.Viewport>
  </Sheet.Portal>
</Sheet.Root>

Convenience composition

Use BottomSheet when the standard anatomy is sufficient. It composes the same primitives rather than maintaining separate behavior. Reach for explicit primitives when you need a custom portal or omit a backdrop.

See the custom portal boundary