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

Custom root element

By default, BottomSheet content is inserted as a portal directly into the document.body. If it's necessary to insert a component into a custom DOM node, follow these steps:

1. Add the following HTML code in the location where the component should be rendered:
```
<div id="headlessui-portal-root"><div /></div>
```
2. Set a prop rootId to the <BottomSheet> component with the id of the root element. Example:
```
<BottomSheet rootId="__next">...</BottomSheet>
```
By doing this, the "inert" attribute that was added to an ancestor will be removed automatically, and the BottomSheet will become interactive.

Nested

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
rootId	string	No	-	Root element id with inert attribute
className	string	No	-	Tailwind classes for customization

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