BottomSheet
In progress
ARIA
RTL
The bottom sheet component is a modified dialog that slides from the bottom of the screen, common pattern in mobile apps.
Bottom sheets can contain any anything so let your imagination fly.
Based on Headless UI.

Anatomy
<BottomSheet> <BottomSheet.Panel> <BottomSheet.Draghandle> <BottomSheet.Title>...</BottomSheet.Title> </BottomSheet.Draghandle> ... </BottomSheet.Panel> <BottomSheet.Backdrop /> </BottomSheet>
Default
Different sizes
With Draghandle
With Title
Customization
BottomSheet
Name | Type | Required | Default | Description |
---|---|---|---|---|
onClose | () => void | Yes | - | Called when the BottomSheet is dismissed |
open | boolean | Yes | - | Whether the BottomSheet is open or not |
BottomSheet.Panel
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization |
onClose | () => void | No | - | Called when the BottomSheet is dismissed |
BottomSheet.Draghandle
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization |
BottomSheet.Title
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization |
BottomSheet.Backdrop
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization |