Top Sheet

A customizable sheet component for creating elegant slide-out interfaces.

Installation

npx shadcn@latest add @scrollxui/top-sheet

Usage

import TopSheet from '@/components/ui/top-sheet';

<TopSheet>
  <TopSheetTrigger asChild>
    <Button>Open Sheet</Button>
  </TopSheetTrigger>
  <TopSheetContent>
    <TopSheetHeader>
      <TopSheetTitle>Title</TopSheetTitle>
      <TopSheetDescription>Description</TopSheetDescription>
    </TopSheetHeader>
    content..
    <TopSheetFooter>
      <TopSheetClose asChild>
        <Button>Close</Button>
      </TopSheetClose>
    </TopSheetFooter>
  </TopSheetContent>
</TopSheet>

API Reference

Top Sheet

A customizable component for creating elegant, slide-out panels from the top of the screen.

Props

Property	Type	Default	Description
`open`	boolean	`false`	Controlled open state.
`onOpenChange`	(open: boolean) => void	`-`	Called when the open state changes.
`defaultOpen`	boolean	`false`	Initial open state for uncontrolled usage.
`asChild`	boolean	`false`	Render without adding an extra wrapper element.
`height`	string	`'70vh'`	Height of the sheet.
`closeThreshold`	number	`0.3`	Drag distance ratio required to close the sheet.
`container`	HTMLElement	`document.body`	DOM element where the portal is mounted.
`className`	string	`''`	Custom CSS classes.