A panel that slides up from the bottom of the screen, commonly used for selections, menus, or additional content.

Demo

Code

Open Sheet

Installation

lunar add bottom-sheet

Usage

import {
BottomSheet,
BottomSheetTrigger,
BottomSheetContent,
BottomSheetHeader,
BottomSheetTitle,
BottomSheetBody,
BottomSheetFooter,
BottomSheetClose,
BottomSheetList,
BottomSheetDragArea,
} from '@/components/ui/bottom-sheet';

Basic Usage

<BottomSheet>
<BottomSheetTrigger>
  <Button>Open Sheet</Button>
</BottomSheetTrigger>
 
<BottomSheetContent>
  <BottomSheetHeader>
    <BottomSheetTitle>Sheet Title</BottomSheetTitle>
  </BottomSheetHeader>
  
  <BottomSheetBody>
    <Text>Your content goes here.</Text>
  </BottomSheetBody>
  
  <BottomSheetFooter>
    <BottomSheetClose>
      <Button>Close</Button>
    </BottomSheetClose>
  </BottomSheetFooter>
</BottomSheetContent>
</BottomSheet>

Controlled State

const [open, setOpen] = useState(false);
 
<BottomSheet open={open} onOpenChange={setOpen}>
<BottomSheetTrigger>
  <Button>Open Sheet</Button>
</BottomSheetTrigger>
 
<BottomSheetContent>
  <BottomSheetHeader>
    <BottomSheetTitle>Controlled Sheet</BottomSheetTitle>
  </BottomSheetHeader>
  
  <BottomSheetBody>
    <Text>This sheet's state is controlled externally.</Text>
    <Button onPress={() => setOpen(false)}>Close</Button>
  </BottomSheetBody>
</BottomSheetContent>
</BottomSheet>

Snap Points

Define multiple snap points for the sheet:

<BottomSheet snapPoints={['25%', '50%', '90%']}>
<BottomSheetTrigger>
  <Button>Open Sheet</Button>
</BottomSheetTrigger>
 
<BottomSheetContent>
  <BottomSheetHeader>
    <BottomSheetTitle>Resizable Sheet</BottomSheetTitle>
  </BottomSheetHeader>
  
  <BottomSheetBody>
    <Text>Drag to resize between snap points.</Text>
  </BottomSheetBody>
</BottomSheetContent>
</BottomSheet>

Variants

// Default
<BottomSheet variant="default">
{/* ... */}
</BottomSheet>
 
// Filled
<BottomSheet variant="filled">
{/* ... */}
</BottomSheet>

With List

Display a selectable list:

const options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
];
 
<BottomSheet>
<BottomSheetTrigger>
  <Button>Select Option</Button>
</BottomSheetTrigger>
 
<BottomSheetContent>
  <BottomSheetHeader>
    <BottomSheetTitle>Choose an Option</BottomSheetTitle>
  </BottomSheetHeader>
  
  <BottomSheetList
    data={options}
    variant="select"
    selectedValue={selected}
    onSelect={(item) => setSelected(item.value)}
    getItemValue={(item) => item.value}
  />
</BottomSheetContent>
</BottomSheet>

Multiple Selection List

<BottomSheetList
data={options}
variant="multiple"
selectedValues={selectedValues}
onSelect={(items) => setSelectedValues(items.map(i => i.value))}
getItemValue={(item) => item.value}
/>

Scrollable Content

<BottomSheet snapPoints={['70%']}>
<BottomSheetTrigger>
  <Button>Open Sheet</Button>
</BottomSheetTrigger>
 
<BottomSheetContent>
  <BottomSheetHeader>
    <BottomSheetTitle>Long Content</BottomSheetTitle>
  </BottomSheetHeader>
  
  <BottomSheetBody scrollable>
    {/* Long scrollable content */}
    {items.map((item) => (
      <View key={item.id} className="py-4 border-b border-border">
        <Text>{item.name}</Text>
      </View>
    ))}
  </BottomSheetBody>
</BottomSheetContent>
</BottomSheet>

API Reference

BottomSheet

Root component.

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when state changes
`snapPoints`	`string[]`	`['50%']`	Height snap points
`defaultSnapPoint`	`number`	`0`	Initial snap point index
`variant`	`'default' \| 'filled'`	`'default'`	Visual variant

BottomSheetTrigger

Button that opens the sheet.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Trigger element

BottomSheetContent

Content container.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Sheet content
`className`	`string`	—	Additional classes

BottomSheetHeader

Header section.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Header content
`className`	`string`	—	Additional classes

BottomSheetTitle

Title text.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Title text
`className`	`string`	—	Additional classes

BottomSheetBody

Main content area.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Body content
`scrollable`	`boolean`	`false`	Enable scrolling
`className`	`string`	—	Additional classes

BottomSheetFooter

Footer section.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Footer content
`className`	`string`	—	Additional classes

BottomSheetClose

Closes the sheet when pressed.

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Close trigger

BottomSheetList

Selectable list component.

Prop	Type	Default	Description
`data`	`T[]`	Required	List data
`variant`	`'list' \| 'select' \| 'multiple'`	`'list'`	List type
`selectedValue`	`any`	—	Selected value (select)
`selectedValues`	`any[]`	—	Selected values (multiple)
`onSelect`	`(selected) => void`	—	Selection callback
`getItemValue`	`(item) => any`	—	Value extractor
`renderItem`	`ListRenderItem`	—	Custom render function
`keyExtractor`	`(item, index) => string`	—	Key extractor

BottomSheetDragArea

An area that can be dragged to move or close the bottom sheet.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Optional custom handle content
`className`	`string`	—	Additional classes

Bottom Sheet