The **BottomSheet** component is a sleek, interactive UI element for mobile-first and desktop applications. It provides a smooth and customizable sliding sheet that can be triggered from the bottom of the screen. Whether you're building a mobile app or a
npm install svelte-bottom-sheetonopen and onclose to track user interactions.
bottom but also on the sides and on the top
bash
npx sv create my-app
cd my-app
`
2. NPM Install the Bottom Sheet
`bash
npm i svelte-bottom-sheet
`
3. Import the component and use it
`typescript
Open the sheet
Content inside the bottom sheet
Here you can put any content you need.
`
Components
$3
#### Description
This is the root component of every Bottom Sheet. It allows you to add your own configuration, attach functions which are called when a specific event is fired and add all other components which need to be used for the Bottom Sheet.
Default z-index is 50.
#### Properties
| Property | Type | Default | Description |
| ---------- | ------------------------------------ | --------- | ---------------------------------------------------------------------- |
| isOpen | boolean | false | Determines whether the bottom sheet is visible. BINDABLE (bind:isOpen) |
| settings | BottomSheetSettings | default | Settings for the BottomSheet. |
#### Events
| Event | Description |
| ------------------ | --------------------------------------------------------- |
| onopen | Fires when the Bottom Sheet opens. |
| onclose | Fires when the Bottom Sheet closes. |
| onsheetdrag | Fires while the Bottom Sheet is being dragged. |
| onsheetdragstart | Fires when the Bottom Sheet starts being dragged. |
| onsheetdragend | Fires when the Bottom Sheet ends being dragged. |
| onsnap | Fires when a snapable Bottom Sheet snaps to a snap point. |
#### Keyboard Controls (when active)
| Key | Action |
| ---------------- | ------------------------ |
| Escape (Esc) | Closes the Bottom Sheet. |
$3
#### Description
This component creates a trigger area around its children which when clicked will open or close the Bottom Sheet.
#### Properties
| Property | Type | Default | Description |
| --------- | -------------------------------- | --------- | ------------------------------------- |
| ...rest | HTMLAttributes | default | Default HTMLElement property options. |
$3
#### Description
An overlay which covers the screen while the Bottom Sheet is opened.
Default z-index is 49.
#### Properties
| Property | Type | Default | Description |
| --------- | -------------------------------- | --------- | ---------------------------------------- |
| ...rest | HTMLAttributes | default | Default HTMLDivElement property options. |
$3
#### Description
This is the functional Bottom Sheet component, which will be shown / hidden when the Bottom Sheet opens / closes. This applies to all children.
#### Properties
| Property | Type | Default | Description |
| --------- | -------------------------------- | --------- | ---------------------------------------- |
| ...rest | HTMLAttributes | default | Default HTMLDivElement property options. |
$3
#### Description
The handle is more than just a visual element—it provides functional support for user interactions. When dragging the handle, users can always pull down the Bottom Sheet, even if it’s not fully scrolled to the top.
#### Customizing the Handle
The BottomSheet.Handle is fully customizable. You can either use the default grip or provide your own content inside the handle.
- Default behavior: If no children are passed to BottomSheet.Handle, it renders a default BottomSheet.Grip, which is a simple, accessible visual indicator.
- Custom styles: You can customize the appearance of the grip by passing it explicitly as a child and applying your own styles.
- Custom content: Alternatively, you can provide any custom content—text, icons, or components—as children of the handle.
#### Examples
Customize the grip color:
`svelte
`
Use the default handle with no custom styles:
`svelte
`
Add custom content inside the handle (e.g., text or icons):
`svelte
Drag me
`
#### Properties
| Property | Type | Default | Description |
| --------- | -------------------------------- | --------- | ---------------------------------------- |
| ...rest | HTMLAttributes | default | Default HTMLDivElement property options. |
#### Keyboard Controls (when focused)
| Key | Action |
| ------------------ | ----------------------------------------------------------------------------------------- |
| Arrow Up (↑) | Moves the Bottom Sheet to the next snap point (if applicable). |
| Arrow Down (↓) | Moves the Bottom Sheet to the previous snap point or closes it if at the lowest position. |
| Home | Moves the Bottom Sheet to the highest snappoint when snappoints are set. |
| End | Moves the Bottom Sheet to the lowest snappoint when snappoints are set. |
| Escape (Esc) | Closes the Bottom Sheet. |
$3
#### Description
This is the component where your Bottom Sheet content goes into.
#### Properties
| Property | Type | Default | Description |
| --------- | -------------------------------- | --------- | ---------------------------------------- |
| ...rest | HTMLAttributes | default | Default HTMLDivElement property options. |
BottomSheetSettings Type
$3
| Name | Type | Description | Default Value |
| -------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| maxHeight | number | Sets the maximum height of the Bottom Sheet. Values between 0 and 1 are treated as percentages (e.g., 0.7 = 70%). Anything ≥1 is treated as pixels. | 0.7 |
| snapPoints | number[] | An array of snap points for the Bottom Sheet. Values follow the same percentage and pixel rules. ([0.25, 0.5, 0.75] = [25%, 50%, 75%]) | [1] |
| closeThreshold | number | The percentage of the Bottom Sheet's height that the user must drag for it to close. | 0.1 |
| autoCloseThreshold | number | The percentage of the Bottom Sheet's height that the user must drag for it to auto-close. Use 0 to disable. | 0 |
| startingSnappoint | number | The snappoint the Bottom Sheet will start at when opened. | 1 |
| disableDragging | boolean | Disable dragging of the sheet. | false |
| position | top bottom left right | Set the position where the sheet is positioned and moved to. | bottom |
| disableClosing | boolean | Whether the sheet should be closable by keybinds or not. Includes: ESC-Keybind and outside-click-action. Closing by binding the isSheetOpen-Property is still allowed! | false |
| contentAlignment | ContentAlignmentType | For left and right positioned sheets! More details below. | flex |
| maxDragPoint | number | The percentage of the Bottom Sheet's height to which the user can drag before it stops | flex |
$3
This type was added with 2.2, to allow more complex content alignment for left and right positioned sheets. These alignments affect the BottomSheet.Content component and might involve calculations.
More options will be added if the feature is doing good.
| Name | Description |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| flex | The content shrinks and grows like a normal flex. No calculations are involved. You can adjust styling and behaviours like you want. |
| start-fit | Calculates the best fit for the content upon the sheet opening only. This means the width is set once based on the content size at mount and won't adjust dynamically when dragging or snapping to other snap points. (You might use even padding and margin on the sides) |
$3
- Any value between 0 and 1 will be interpreted as a percentage (e.g., 0.7 = 70%).
- Any value ≥1 will be interpreted as pixels (e.g., 300 = 300px).
- Pixel values which go above the maxHeight property value won't apply!
Controlling the Bottom Sheet Programmatically
In addition to using the Trigger component, you can directly control the Bottom Sheet’s visibility and behavior through bindings and function calls.
$3
The isSheetOpen property can be bound to a variable, allowing you to open or close the Bottom Sheet programmatically.
#### Example Usage
`svelte
`
Now, setting isSheetOpen = true will open the Bottom Sheet, and setting it to false will close it.
$3
You can also assign the Bottom Sheet to a variable using the bind:this directive. This allows you to call methods on the component instance.
$3
If your Bottom Sheet has defined snapPoints, you can programmatically move it to a specific snap position using the setSnapPoint method.
#### Method: setSnapPoint(point: number, throwEvent: boolean = true): boolean
#### Parameters
| Parameter | Type | Default | Description |
| ------------ | --------- | ------- | -------------------------------------------- |
| point | number | - | The snap point to move the Bottom Sheet to. |
| throwEvent | boolean | true | Whether an onsnap event should be emitted. |
#### Returns
| Type | Description |
| --------- | ------------------------------------------------------------------------------------ |
| boolean | true if snapping was successful, false if the provided snappoint does not exist. |
#### Example Usage
`svelte
`
Nested Sheets [EXPERIMENTAL]
You can now nest Bottom Sheets. The component uses an internal stack to manage which sheet is "active." This prevents background sheets from being dragged or closed accidentally while a foreground sheet is open.
$3
`Svelte
Primary Sheet
Secondary Sheet
I am on top!
`
Bottom Sheet Positions [OUT OF EXPERIMENTAL SINCE 2.2]
It is possible to not only position the Bottom Sheet on the bottom, you can also position it left, right and on the top of the screen. Take a look on the Bottom Sheet Settings to see how you can change the positions.
$3
Before version 2.0, the sheet only supported the bottom position, and positioning was not configurable. The width of the sheet was configured using the max-width style.
With version 2.0 introducing position options, switching to left or right while using max-width for controlling the sheets horizontal width, will cause issues, because the positioning direction would be horizontal.
Please use the height and maxHeight style to control the sheets "width", in this case the "height".
Also, snappoint Bottom Sheets WERE NOT supported for the left and right` position UNTIL version 2.2.0 .