Stalk UI

Component

Sheet

Slides a panel in from a screen edge for secondary content or forms.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/sheet

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Sheet.Root>
  <Sheet.Trigger asChild>
    <Button>Open sheet</Button>
  </Sheet.Trigger>
  <Sheet.Content side="right">
    <Sheet.Header>
      <Sheet.Title>Edit profile</Sheet.Title>
      <Sheet.Description>Update your details, then save to apply changes.</Sheet.Description>
    </Sheet.Header>
    <Sheet.Footer>
      <Sheet.Close asChild>
        <Button variant="outline">Cancel</Button>
      </Sheet.Close>
      <Button>Save</Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>
Theme
<Sheet.Root>
  <Sheet.Trigger asChild>
    <Button variant="outline">Open left</Button>
  </Sheet.Trigger>
  <Sheet.Content side="left">
    <Sheet.Header>
      <Sheet.Title>Navigation</Sheet.Title>
      <Sheet.Description>A panel anchored to the start edge.</Sheet.Description>
    </Sheet.Header>
  </Sheet.Content>
</Sheet.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`side``SheetSide`No-Edge the panel is anchored to. Defaults to \`right\`.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`side``top`, `bottom`, `left`, `right`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/sheet.json`
  • Recipe: `sheet`
  • Files: `src/components/ui/sheet.tsx`