Docs
Bottom Sheet
Bottom Sheet
A panel that slides up from the bottom of the screen.
Installation
Usage
import {
BottomSheet,
BottomSheetContent,
BottomSheetInner,
BottomSheetOuter,
} from "@/components/ui/bottom-sheet";export function BottomSheetExample() {
const [open, setOpen] = useState(false);
return (
<BottomSheet open={open} onOpenChange={setOpen}>
<Button onClick={() => setOpen(true)}>Open Sheet</Button>
<BottomSheetContent>
<BottomSheetOuter>
{/* Optional outer content (e.g. close button) */}
</BottomSheetOuter>
<BottomSheetInner>
{/* Your sheet content goes here */}
<div className="p-6">
<h2>Bottom Sheet Content</h2>
<p>This is the content of the bottom sheet.</p>
</div>
</BottomSheetInner>
</BottomSheetContent>
</BottomSheet>
);
}Components
BottomSheet
The main component that wraps the bottom sheet functionality.
<BottomSheet>{/* Bottom sheet trigger and content */}</BottomSheet>| Prop | Type | Description |
|---|---|---|
open | boolean | Controls the open state of the bottom sheet |
onOpenChange | (open: boolean) => void | Callback fired when the open state changes |
children | React.ReactNode | The contents of the component |
BottomSheetContent
The component that contains the content of the bottom sheet.
<BottomSheetContent>{/* Content wrapper */}</BottomSheetContent>| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS class name |
overlayClassName | string | - | Additional CSS class name for the overlay |
hideOverlay | boolean | true | Whether to hide the overlay |
children | React.ReactNode | - | The contents of the component |
BottomSheetOuter
An optional component that sits at the top of the bottom sheet, outside of the main content area.
<BottomSheetOuter>{/* Top controls like close button */}</BottomSheetOuter>BottomSheetInner
The main content area of the bottom sheet.
<BottomSheetInner>{/* Main content */}</BottomSheetInner>