Beta modeInstall commands on this page use lvcn@beta, which installs from the beta registry and may change before the stable release.What’s in beta

Bottom Sheet

A sliding drawer modal content layout that anchors at the bottom of the screen.

Loading preview…

Bottom Sheet is in beta. This component was recently added and will be stabled soon.

Installation

npx lvcn-ui@latest add bottom-sheet

Registry dependencies: icon, text, utils, native-only-animated-view

Usage

import { BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetHeader, BottomSheetTitle, BottomSheetTrigger } from "@/components/ui/bottom-sheet"
import { Button, Text } from "react-native"

export function Example() {
  return (
    <BottomSheet>
      <BottomSheetTrigger asChild>
        <Button title="Open Bottom Sheet" />
      </BottomSheetTrigger>
      <BottomSheetContent>
        <BottomSheetHeader>
          <BottomSheetTitle>Bottom Sheet Menu</BottomSheetTitle>
          <BottomSheetDescription>
            This slides up from the bottom of the screen.
          </BottomSheetDescription>
        </BottomSheetHeader>
      </BottomSheetContent>
    </BottomSheet>
  )
}