BottomSheet
In progress
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.

Default
Large with all optional extras
Custom height
BottomSheet
Name | Type | Required | Default | Description |
---|---|---|---|---|
hasShadow | boolean | No | - | Whether the BottomSheet has a shadow or not. |
onClose | () => void | Yes | - | Called when the BottomSheet is dismissed. |
open | boolean | Yes | - | Whether the BottomSheet is open or not. |
size | string | No | sm | The size of the BottomSheet, sm, md, lg or custom pixel/percentage/rem value. |
BottomSheet.Draghandle
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | ReactNode | No | - | Optional title as a child to render text next to the drag handle. |
BottomSheet.Title
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization of BottomSheet Title. |
BottomSheet.Panel
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization of BottomSheet Panel. |
hasShadow | boolean | No | - | Whether the BottomSheet has a shadow or not. |
onClose | () => void | No | - | Called when the BottomSheet is dismissed. |
BottomSheet.Backdrop
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for customization of BottomSheet Backdrop. |