SlideOver
Represents an additional view that complements the information on the screen.
3 min read
The
SlideOver component presents complementary content in a panel that slides over the current view, keeping the user's context visible while enabling focused, short-lived interactions. Typical use cases include:- Opening a cart or order summary.
- Adjusting filters or settings in a side panel
- Previewing product details or media.
Example
Code
Open partial
Open from bottom
Set
direction="bottomSide" to slide the panel up from the bottom of the viewport.
_26import { Button, SlideOver, SlideOverHeader, useFadeEffect, useUI } from '@faststore/ui'_26_26export default function SlideOverBottom() {_26 const { modal, openModal, closeModal } = useUI()_26 const { fade } = useFadeEffect()_26_26 return (_26 <>_26 <Button onClick={openModal}>Open</Button>_26 {modal && (_26 <SlideOver_26 size="full"_26 direction="bottomSide"_26 isOpen={modal}_26 fade={fade}_26 onDismiss={closeModal}_26 >_26 <SlideOverHeader onClose={closeModal}>_26 <b>SlideOver</b>_26 </SlideOverHeader>_26 <main>Content</main>_26 </SlideOver>_26 )}_26 </>_26 )_26}
Usage
Import the component
_10import { SlideOver, SlideOverHeader } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Open partial: left
Open a partial-width
SlideOver from the left side. This mirrors the open partial: right example shown at the beginning of this guide.Example
Code
Open partial
Open full: right
Open a full-width
SlideOver from the right side, covering the viewport for focused tasks.Example
Code
Open full
Open full: left
Open a full-width
SlideOver from the left side, covering the viewport for focused tasks.Example
Code
Open full
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-bkg-color | var(--fs-color-body-bkg) |
--fs-slide-over-transition-timing | var(--fs-transition-timing) |
Design tokens: Header
SlideOver header tokens control spacing, colors, and structure to ensure titles, actions, and icons align with the store brand.| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-header-padding | var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) |
--fs-slide-over-header-bkg-color | var(--fs-color-neutral-0) |
Design tokens: Partial
Partial variant tokens define panel width and gap at each breakpoint, keeping the panel lightweight and preserving page context.
| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-partial-gap | calc(2 * var(--fs-grid-padding)) |
--fs-slide-over-partial-width-mobile | calc(100vw - var(--fs-slide-over-partial-gap)) |
--fs-slide-over-partial-width-notebook | calc(100% / 3) |
--fs-slide-over-partial-max-width-notebook | calc(var(--fs-grid-breakpoint-notebook) / 3) |
Data attributes
You can target and override
SlideOver styles using the following data attributes:data-fs-slide-overdata-fs-slide-over-size="full" | "partial"data-fs-slide-over-direction="leftSide" | "rightSide" | "bottomSide"data-fs-slide-over-state="in" | "out"data-fs-slide-over-headerdata-fs-slide-over-header-iconProps
SlideOver
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-slide-over |
| isOpen* | false | true | A boolean value that represents the state of the SlideOver | |
| direction | "leftSide" | "rightSide" | Represents the side that the SlideOver comes from. | leftSide |
| size | "full" | "partial" | Represents the size of the SlideOver. | full |
| fade | "in" | "out" | Represents the fade effect of the SlideOver. | out |
| children* | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children. | |
| overlayProps | Props | Props forwarded to the `Overlay` component. | |
| onDismiss | () => void | This function is called whenever the user clicks outside. the modal content | |
| aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby | |
| onEntered | () => void | Callback function when the modal is opened. | |
| disableEscapeKeyDown | false | true | Disable being closed using the Escape key. |
SlideOverHeader
| Name | Type | Description | Default |
|---|---|---|---|
| children | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A react component to be used as the title in the header. | |
| closeBtnProps | Partial<Omit<IconButtonProps, "onClick">> | Props for the Close Button component. | {} |
| onClose* | () => void | Function called when Close Button is clicked. |
Related components
- CartSidebar
The CartSidebar displays a summary of items added to the cart, detailed information, and a checkout option.
See more