# Drawer
A panel that slides in from an edge of the screen and can be dismissed with a swipe.
Drawer is an open-source component from suiss/ui for React, React Native, SwiftUI and Jetpack Compose. The @esuiss/ui CLI copies its source into your project, so you own the code.
Source: https://ui.suiss.app/docs/components/drawer
**React**
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerDemo() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
}>
Cancel
)
}
```
Drawer wraps the Base UI Drawer. The `Drawer` root manages the open state and the swipe direction, and `DrawerTrigger` opens it. `DrawerContent` renders the panel in a portal, over a dimmed `DrawerOverlay` when modal, with an optional swipe handle and close button. Inside it, `DrawerHeader` holds the `DrawerTitle` and `DrawerDescription`, and `DrawerFooter` holds the actions. `DrawerClose` closes the drawer from any element.
The drawer opens from the bottom by default and can also open from the top, left or right. It supports snap points, a floating style inset from the screen edges, and a non-modal mode. To get the iOS sheet effect, where the page behind scales down as a bottom drawer opens, wrap the page in `DrawerProvider` with `DrawerIndentBackground` and `DrawerIndent`. Use a drawer for touch-friendly, swipeable panels; for a centered window, use a dialog.
## Installation
### CLI
```bash title="Terminal"
npx shadcn@latest add @esuiss/drawer
```
Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:
```bash title="Terminal"
npx @esuiss/ui@latest add drawer
```
### Manual
1. Install the dependencies and add the [`cn` helper](https://ui.suiss.app/docs/installation#the-cn-helper):
```bash title="Terminal"
npm install @base-ui/react @phosphor-icons/react
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), `use-scrollbar-gap`.
3. Copy the source into `components/ui/drawer.tsx`:
```tsx title="components/ui/drawer.tsx"
"use client"
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { XIcon } from "@phosphor-icons/react"
import * as React from "react"
import { Button } from "@/components/ui/button"
import { useScrollbarGap } from "@/hooks/use-scrollbar-gap"
import { cn } from "@/lib/utils"
type DrawerContextProps = {
floating: boolean
hasSnapPoints: boolean
modal: DrawerPrimitive.Root.Props["modal"]
showSwipeHandle: boolean
swipeDirection: NonNullable
}
const DrawerContext = React.createContext(null)
type DrawerIndentContextProps = {
raised: boolean
setRaised: (id: string, raised: boolean) => void
}
const DrawerIndentContext =
React.createContext(null)
function useDrawer() {
const context = React.useContext(DrawerContext)
if (!context) {
throw new Error("useDrawer must be used within a Drawer.")
}
return context
}
function DrawerProvider({ children }: DrawerPrimitive.Provider.Props) {
const [raisers, setRaisers] = React.useState>(
() => new Set()
)
const setRaised = React.useCallback((id: string, raised: boolean) => {
setRaisers((current) => {
if (current.has(id) === raised) return current
const next = new Set(current)
if (raised) next.add(id)
else next.delete(id)
return next
})
}, [])
const raised = raisers.size > 0
const contextValue = React.useMemo(
() => ({ raised, setRaised }),
[raised, setRaised]
)
return (
{children}
)
}
function DrawerIndentBackground({
className,
...props
}: DrawerPrimitive.IndentBackground.Props) {
return (
)
}
function DrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props) {
const indent = React.useContext(DrawerIndentContext)
return (
)
}
function Drawer({
floating = false,
modal = true,
showSwipeHandle = false,
snapPoints,
swipeDirection = "down",
open: openProp,
defaultOpen = false,
onOpenChange,
snapPoint: snapPointProp,
defaultSnapPoint,
onSnapPointChange,
...props
}: DrawerPrimitive.Root.Props & {
floating?: boolean
showSwipeHandle?: boolean
}) {
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
const indent = React.useContext(DrawerIndentContext)
const setRaised = indent?.setRaised
const raiseId = React.useId()
const initialSnapPoint = defaultSnapPoint ?? snapPoints?.[0] ?? null
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
const [uncontrolledSnapPoint, setUncontrolledSnapPoint] =
React.useState(initialSnapPoint)
const open = openProp ?? uncontrolledOpen
const snapPoint =
snapPointProp !== undefined ? snapPointProp : uncontrolledSnapPoint
const raised =
open &&
!floating &&
swipeDirection === "down" &&
(!hasSnapPoints || snapPoint === snapPoints.at(-1))
React.useEffect(() => {
if (!setRaised) return
setRaised(raiseId, raised)
return () => setRaised(raiseId, false)
}, [setRaised, raiseId, raised])
const contextValue = React.useMemo(
() => ({ floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
[floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection]
)
return (
{
setUncontrolledOpen(next)
if (next) setUncontrolledSnapPoint(initialSnapPoint)
onOpenChange?.(next, eventDetails)
}}
snapPoint={snapPointProp}
defaultSnapPoint={defaultSnapPoint}
onSnapPointChange={(next, eventDetails) => {
setUncontrolledSnapPoint(next)
onSnapPointChange?.(next, eventDetails)
}}
{...props}
/>
)
}
function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return
}
function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return
}
function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
return
}
function DrawerOverlay({
className,
...props
}: DrawerPrimitive.Backdrop.Props) {
useScrollbarGap()
return (
)
}
function DrawerSwipeHandle({
className,
...props
}: React.ComponentProps<"div">) {
return (
)
}
function DrawerContent({
className,
children,
showCloseButton = false,
closeLabel,
...props
}: DrawerPrimitive.Popup.Props & {
showCloseButton?: boolean
closeLabel?: string
}) {
const { floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection } =
useDrawer()
const swipeAxis =
swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
return (
{modal === true && (
)}
{showSwipeHandle && }
{children}
{showCloseButton && (
}
>
{closeLabel ?? (
<>
Close
)}
)}
)
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
)
}
function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
)
}
function DrawerDescription({
className,
...props
}: DrawerPrimitive.Description.Props) {
return (
)
}
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerIndent,
DrawerIndentBackground,
DrawerOverlay,
DrawerPortal,
DrawerProvider,
DrawerSwipeHandle,
DrawerTitle,
DrawerTrigger,
}
```
4. Update the import paths to match your project.
## Usage
```tsx
import { DrawerProvider, DrawerIndentBackground, DrawerIndent, Drawer, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerSwipeHandle, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "@/components/ui/drawer"
```
```tsx
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
}>
Cancel
```
The drawer is uncontrolled by default; set `defaultOpen` to start open, or control it with `open` and `onOpenChange`. Set `swipeDirection` to `down`, `up`, `left` or `right` to choose the edge it opens from and the direction it is swiped to close.
Pass `snapPoints`, such as `[0.5, 1]`, to let people drag the drawer between heights; it opens at the first snap point unless you set `defaultSnapPoint`, or control it with `snapPoint` and `onSnapPointChange`. Set `modal={false}` to keep the rest of the page interactive; no overlay is rendered in that case.
For the indented page effect, place `DrawerIndentBackground` and `DrawerIndent` inside `DrawerProvider` and put the page content in `DrawerIndent`. The page is scaled while a non-floating drawer that opens from the bottom is open, and, with snap points, only at the last snap point.
## Examples
### Directions
Four drawers that open from the bottom, top, left and right edges.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerDirections() {
return (
{(["down", "up", "left", "right"] as const).map((direction) => (
}>
{direction.charAt(0).toUpperCase() + direction.slice(1)}
Notifications
You have three unread messages.
}>
Close
))}
)
}
```
### With close button
A drawer with an icon close button in the top corner.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerWithCloseButton() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
)
}
```
### With close label
A drawer whose close button shows a text label instead of an icon.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerWithCloseLabel() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
)
}
```
### Floating
A floating drawer, inset from the screen edges with rounded corners on all sides.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerFloating() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
}>
Cancel
)
}
```
### With snap points
A drawer that opens at half height and expands when dragged up.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerWithSnapPoints() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
}>
Cancel
)
}
```
### Non modal
A non-modal drawer that leaves the rest of the page interactive.
**Example**
```tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
export default function DrawerNonModal() {
return (
}>
Open drawer
Move goalSet your daily activity goal.
350
Calories per day
}>
Cancel
)
}
```
### Sheet with detents
An iOS-style event sheet with snap points that scales the page behind it using `DrawerIndent`.
**Example**
```tsx
import { PlusIcon } from "@phosphor-icons/react"
import * as React from "react"
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerIndent,
DrawerIndentBackground,
DrawerProvider,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
const days = Array.from({ length: 35 }, (_, index) => index - 2)
const weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
]
function CalendarExample() {
const [open, setOpen] = React.useState(false)
const [allDay, setAllDay] = React.useState(false)
return (
October
}
>
}>
Cancel
New Event
Drag the handle up for the full form.
All-day
Starts
{allDay ? "Oct 14" : "Oct 14, 9:00 AM"}
Ends
{allDay ? "Oct 14" : "Oct 14, 10:00 AM"}
{weekdays.map((day) => (
{day[0]}
))}
{days.map((day) => (
{day > 0 && day <= 31 ? day : ""}
))}
Tuesday, October 14
9:00 AM · Design review
1:00 PM · Lunch with Sam
)
}
export default function DrawerSheetWithDetents() {
return
}
```
## API Reference
- `Drawer`
- `DrawerTrigger`
- `DrawerContent`
- `DrawerHeader`
- `DrawerTitle`
- `DrawerDescription`
- `DrawerFooter`
- `DrawerClose`
### DrawerProvider
Coordinates drawers with `DrawerIndent` so the page can react when a drawer opens.
Also accepts the props of `DrawerPrimitive.Provider.Props`.
### DrawerIndentBackground
The dark layer shown behind the page when it scales down.
Also accepts the props of `DrawerPrimitive.IndentBackground.Props`.
### DrawerIndent
Wraps the page content and scales it down while a bottom drawer is open.
Also accepts the props of `DrawerPrimitive.Indent.Props`.
### Drawer
The root that manages the open state, swipe direction and snap points.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `floating` | `boolean` | `false` | Insets the drawer from the screen edges and rounds all of its corners. |
| `showSwipeHandle` | `boolean` | `false` | Shows a grab bar on the edge of the panel that faces the screen center. |
Also accepts the props of `DrawerPrimitive.Root.Props`.
### DrawerTrigger
The button that opens the drawer.
Also accepts the props of `DrawerPrimitive.Trigger.Props`.
### DrawerPortal
Renders its children into a portal outside the current DOM hierarchy.
Also accepts the props of `DrawerPrimitive.Portal.Props`.
### DrawerClose
A button that closes the drawer.
Also accepts the props of `DrawerPrimitive.Close.Props`.
### DrawerOverlay
The dimmed layer behind a modal drawer, which fades as the drawer is swiped away.
Also accepts the props of `DrawerPrimitive.Backdrop.Props`.
### DrawerSwipeHandle
The grab bar people drag to move or dismiss the drawer.
Also accepts the props of `React.ComponentProps<"div">`.
### DrawerContent
The drawer panel, rendered in a portal with an optional overlay, swipe handle and close button.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showCloseButton` | `boolean` | `false` | Shows a close button in the top corner. |
| `closeLabel` | `string` | - | Replaces the close button's icon with this text. |
Also accepts the props of `DrawerPrimitive.Popup.Props`.
### DrawerHeader
Groups the title and description.
Also accepts the props of `React.ComponentProps<"div">`.
### DrawerFooter
Holds the drawer's actions at the bottom of the panel.
Also accepts the props of `React.ComponentProps<"div">`.
### DrawerTitle
The drawer's title, which also names it for assistive technology.
Also accepts the props of `DrawerPrimitive.Title.Props`.
### DrawerDescription
Supporting text that describes the drawer for assistive technology.
Also accepts the props of `DrawerPrimitive.Description.Props`.
## Accessibility
- The panel has the `dialog` role. `DrawerTitle` provides its accessible name and `DrawerDescription` its accessible description.
- Opening the drawer moves focus inside it. Escape closes it and returns focus to the trigger.
- A non-modal drawer does not set `aria-modal`.
- The swipe handle is hidden from assistive technology, so always provide another way to close the drawer, such as a `DrawerClose` button.
- The icon-only close button has a visually hidden `Close` label.
## Notes
- Styling hooks: `data-slot` values such as `drawer-popup`, `drawer-content`, `drawer-overlay`, `drawer-swipe-handle`, `drawer-close-button`, `drawer-header`, `drawer-footer` and `drawer-indent`.
- The panel sets `data-swipe-direction`, `data-swipe-axis`, and, when applicable, `data-floating` and `data-snap-points`. A drawer at its last snap point gets `data-expanded`. `DrawerIndent` gets `data-raised` while the page is scaled.
- Side drawers are `75%` wide, and `24rem` wide from the `sm` breakpoint. Top and bottom drawers are limited to the viewport height minus `6rem`.
- Nested drawers stack, with the drawer behind scaled down slightly.
- Uses the `popover`, `background` and `border` colors, with a `bg-black/50` backdrop. Animations are disabled on `DrawerIndent` when reduced motion is preferred.
**React Native, SwiftUI, Jetpack Compose**
```tsx
import { View } from "react-native"
import { Button } from "@/components/ui/button"
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
import { Text } from "@/components/ui/text"
function GoalContent() {
return (
Move goalSet your daily activity goal.350
Calories/day
}>
Cancel
)
}
export function DrawerOpenByDefaultExample() {
return (
}>
Open drawer
)
}
```
```swift
import EsuissUI
import SwiftUI
struct DrawerOpenByDefaultExample: View {
var body: some View {
DrawerGoal(open: true)
}
}
struct DrawerGoal: View {
@State private var open: Bool
init(open: Bool = false) {
_open = State(initialValue: open)
}
var body: some View {
Button("Open drawer") { open = true }
.buttonStyle(.variant(.outline))
.drawer(isPresented: $open) {
DrawerGoalContent()
}
}
}
struct DrawerGoalContent: View {
var body: some View {
DrawerContent {
DrawerHeader {
DrawerTitle("Move goal")
DrawerDescription("Set your daily activity goal.")
}
VStack(spacing: 4) {
Text(verbatim: "350")
.font(.system(size: 48, weight: .semibold))
.tracking(-1.2)
.foregroundStyle(EsuissColor.foreground)
Text("Calories/day")
.textCase(.uppercase)
.textStyle(.xs)
.foregroundStyle(EsuissColor.mutedForeground)
}
.frame(maxWidth: .infinity)
.padding(16)
DrawerFooter {
Button {} label: {
Text("Submit").frame(maxWidth: .infinity)
}
.buttonStyle(.variant())
DrawerClose {
Text("Cancel").frame(maxWidth: .infinity)
}
.buttonStyle(.variant(.secondary))
}
}
}
}
```
```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Drawer
@Composable
fun DrawerOpenByDefaultExample() {
DrawerGoal(defaultOpen = true, floating = false)
}
@Composable
fun DrawerGoal(defaultOpen: Boolean, floating: Boolean, label: String = "Open drawer") {
var open by rememberSaveable { mutableStateOf(defaultOpen) }
Column {
Button(label, onClick = { open = true }, variant = ButtonVariant.Outline)
Drawer(open = open, onOpenChange = { open = it }, floating = floating, showSwipeHandle = true) {
DrawerGoalContent(onClose = { open = false })
}
}
}
```
`Drawer` presents content in a panel attached to an edge of the screen. It slides in from the bottom by default, or from the top, left or right with `swipeDirection`, and the user can drag it closed in that direction. The content renders through a portal (inside a full-window overlay on iOS) and respects the safe-area insets.
Set `floating` to inset the panel from the screen edges with all corners rounded. Use `snapPoints` to let a bottom drawer rest at several heights. Wrap your app in `DrawerProvider` and its screen in `DrawerIndent` to scale the page back behind an open bottom drawer.
## Installation
**React Native**
```bash title="Terminal"
npx shadcn@latest add @esuiss-rn/drawer
```
See [Installation](https://ui.suiss.app/docs/installation) for the `components.json` setup. Or use the suiss/ui CLI:
```bash title="Terminal"
npx @esuiss/ui@latest add drawer
```
**SwiftUI**
```bash title="Terminal"
npx @esuiss/ui@latest add drawer --platform swift
```
**Jetpack Compose**
```bash title="Terminal"
npx @esuiss/ui@latest add drawer --platform kotlin
```
The CLI also adds what it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text). On React Native it also adds the animated view `components/ui/animated-view.tsx`.
### Manual
**React Native**
**Uniwind**
1. Install the dependencies:
```bash title="Terminal"
npx expo install cn phosphor-react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text), and the primitives `components/primitives/drawer.tsx`, `components/primitives/use-render.tsx`, and the animated view `components/ui/animated-view.tsx` from the next step.
3. Copy the animated view into `components/ui/animated-view.tsx`:
- `uniwind/components/ui/animated-view.tsx`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/uniwind/components/ui/animated-view.tsx)
4. Copy the source into `components/ui/drawer.tsx`:
```tsx title="uniwind/components/ui/drawer.tsx"
import { cn } from "cn"
import { XIcon } from "phosphor-react-native"
import * as React from "react"
import {
Platform,
useWindowDimensions,
View,
type ViewProps,
type ViewStyle,
} from "react-native"
import {
FadeIn,
FadeOut,
ReduceMotion,
SlideInDown,
SlideInLeft,
SlideInRight,
SlideInUp,
SlideOutDown,
SlideOutLeft,
SlideOutRight,
SlideOutUp,
useAnimatedStyle,
withTiming,
} from "react-native-reanimated"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
import * as DrawerPrimitive from "@/components/primitives/drawer"
import { resolveClassName } from "@/components/primitives/use-render"
import { AnimatedView } from "@/components/ui/animated-view"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
type SwipeDirection = DrawerPrimitive.SwipeDirection
type DrawerContextProps = {
floating: boolean
hasSnapPoints: boolean
modal: DrawerPrimitive.RootProps["modal"]
showSwipeHandle: boolean
swipeDirection: SwipeDirection
}
const DrawerContext = React.createContext(null)
type DrawerIndentContextProps = {
raised: boolean
setRaised: (raised: boolean) => void
}
const DrawerIndentContext =
React.createContext(null)
type DrawerContentContextProps = {
hasCloseButton: boolean
hasCloseLabel: boolean
}
const DrawerContentContext = React.createContext({
hasCloseButton: false,
hasCloseLabel: false,
})
function useDrawer() {
const context = React.useContext(DrawerContext)
if (!context) {
throw new Error("useDrawer must be used within a Drawer.")
}
return context
}
const FullWindowOverlay =
Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
const EASE_DURATION = 450
const ENTERING = {
down: SlideInDown,
up: SlideInUp,
left: SlideInLeft,
right: SlideInRight,
} as const
const EXITING = {
down: SlideOutDown,
up: SlideOutUp,
left: SlideOutLeft,
right: SlideOutRight,
} as const
function DrawerProvider({ children }: DrawerPrimitive.ProviderProps) {
const [raised, setRaised] = React.useState(false)
const contextValue = React.useMemo(() => ({ raised, setRaised }), [raised])
return (
{children}
)
}
function DrawerIndentBackground({
className,
...props
}: React.ComponentProps) {
return (
cn(
"absolute top-0 right-0 bottom-0 left-0 -z-10 bg-foreground dark:bg-background",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
const INDENT_ORIGIN: ViewStyle = { transformOrigin: "top" }
function DrawerIndent({
className,
style,
children,
...props
}: React.ComponentProps) {
const indent = React.useContext(DrawerIndentContext)
const raised = indent?.raised ?? false
const insets = useSafeAreaInsets()
const offset = Math.max(insets.top, 12)
const animatedStyle = useAnimatedStyle(() => {
const config = {
duration: EASE_DURATION,
reduceMotion: ReduceMotion.System,
}
return {
borderRadius: withTiming(raised ? 18 : 0, config),
transform: [
{ translateY: withTiming(raised ? offset : 0, config) },
{ scale: withTiming(raised ? 0.94 : 1, config) },
],
}
}, [raised, offset])
return (
}
className={(state) =>
cn(
"relative flex-1 overflow-hidden bg-background",
resolveClassName(className, state)
)
}
style={style}
{...props}
>
{children}
)
}
function DrawerRaise({ floating }: { floating: boolean }) {
const indent = React.useContext(DrawerIndentContext)
const setRaised = indent?.setRaised
const { dialog, swipeDirection, expanded } =
DrawerPrimitive.useDrawerRootContext("Drawer")
const raised =
dialog.root.open && !floating && swipeDirection === "down" && expanded
React.useEffect(() => {
if (!setRaised) return
setRaised(raised)
return () => setRaised(false)
}, [setRaised, raised])
return null
}
function Drawer({
floating = false,
modal = true,
showSwipeHandle = false,
snapPoints,
swipeDirection = "down",
children,
...props
}: DrawerPrimitive.RootProps & {
floating?: boolean
showSwipeHandle?: boolean
}) {
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
const contextValue = React.useMemo(
() => ({ floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
[floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection]
)
return (
{children}
)
}
const DrawerTrigger = DrawerPrimitive.Trigger
const DrawerPortal = DrawerPrimitive.Portal
const DrawerClose = DrawerPrimitive.Close
function DrawerOverlay({
className,
...props
}: React.ComponentProps) {
return (
cn(
"absolute top-0 right-0 bottom-0 left-0 bg-black/50",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function DrawerSwipeHandle({ className, ...props }: ViewProps) {
const { swipeDirection } = useDrawer()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
return (
)
}
const POSITION: Record = {
down: "bottom-0 left-0 right-0",
up: "top-0 left-0 right-0",
left: "top-0 bottom-0 left-0 w-3/4 sm:max-w-sm",
right: "top-0 bottom-0 right-0 w-3/4 sm:max-w-sm",
}
const DOCKED_RADIUS: Record = {
down: "rounded-b-none",
up: "rounded-t-none",
left: "rounded-l-none",
right: "rounded-r-none",
}
const BLEED: Record = {
down: "top-full left-0 right-0 h-12",
up: "bottom-full left-0 right-0 h-12",
left: "right-full top-0 bottom-0 w-12",
right: "left-full top-0 bottom-0 w-12",
}
function DrawerContent({
className,
style,
children,
portalHost,
showCloseButton = false,
closeLabel,
...props
}: React.ComponentProps & {
portalHost?: string
showCloseButton?: boolean
closeLabel?: string
}) {
const drawerContext = useDrawer()
const { floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection } =
drawerContext
const insets = useSafeAreaInsets()
const { height } = useWindowDimensions()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
const inset = floating ? 8 : 0
const handleLast = swipeDirection === "up" || swipeDirection === "left"
const frameStyle = React.useMemo(
() => ({
pointerEvents: "box-none",
...(floating && swipeDirection !== "down" && { top: insets.top }),
...(floating && swipeDirection !== "up" && { bottom: insets.bottom }),
...(floating && swipeDirection !== "right" && { left: insets.left }),
...(floating && swipeDirection !== "left" && { right: insets.right }),
}),
[floating, swipeDirection, insets]
)
const popupStyle = React.useMemo(
() => ({
margin: inset,
...(!horizontal && {
maxHeight: height - Math.max(96, insets.top + 24),
}),
...(!floating &&
swipeDirection !== "up" && { paddingBottom: insets.bottom }),
...(!floating && swipeDirection !== "down" && { paddingTop: insets.top }),
}),
[floating, horizontal, swipeDirection, insets, height, inset]
)
const contentContext = React.useMemo(
() => ({
hasCloseButton: showCloseButton,
hasCloseLabel: showCloseButton && closeLabel !== undefined,
}),
[showCloseButton, closeLabel]
)
return (
{modal === true ? : null}
cn(
"flex min-h-0 flex-col rounded-3xl bg-popover shadow-xl",
horizontal && "flex-1 flex-row",
!floating && DOCKED_RADIUS[swipeDirection],
resolveClassName(className, state)
)
}
style={(state) => [
popupStyle,
typeof style === "function" ? style(state) : style,
]}
{...props}
>
{floating ? null : (
)}
{showSwipeHandle && !handleLast ? : null}
{children}
{showSwipeHandle && handleLast ? : null}
{showCloseButton ? (
}
hitSlop={8}
accessibilityLabel={closeLabel ? undefined : "Close"}
>
{closeLabel ? (
{closeLabel}
) : (
)}
) : null}
)
}
function DrawerHeader({ className, ...props }: ViewProps) {
const { swipeDirection } = useDrawer()
const { hasCloseButton, hasCloseLabel } =
React.useContext(DrawerContentContext)
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
)
}
function DrawerFooter({ className, ...props }: ViewProps) {
return (
)
}
function DrawerTitle({
className,
...props
}: React.ComponentProps) {
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
cn(
"text-base font-semibold text-foreground",
vertical && "text-center",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function DrawerDescription({
className,
...props
}: React.ComponentProps) {
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
cn(
"text-sm text-muted-foreground",
vertical && "text-center",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerIndent,
DrawerIndentBackground,
DrawerOverlay,
DrawerPortal,
DrawerProvider,
DrawerSwipeHandle,
DrawerTitle,
DrawerTrigger,
}
```
5. Update the import paths to match your project.
**NativeWind**
1. Install the dependencies:
```bash title="Terminal"
npx expo install cn phosphor-react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text), and the primitives `components/primitives/drawer.tsx`, `components/primitives/use-render.tsx`, and the animated view `components/ui/animated-view.tsx` from the next step.
3. Copy the animated view into `components/ui/animated-view.tsx`:
- `nativewind/components/ui/animated-view.tsx`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/nativewind/components/ui/animated-view.tsx)
4. Copy the source into `components/ui/drawer.tsx`:
```tsx title="nativewind/components/ui/drawer.tsx"
import { cn } from "cn"
import { XIcon } from "phosphor-react-native"
import * as React from "react"
import {
Platform,
useWindowDimensions,
View,
type ViewProps,
type ViewStyle,
} from "react-native"
import {
FadeIn,
FadeOut,
ReduceMotion,
SlideInDown,
SlideInLeft,
SlideInRight,
SlideInUp,
SlideOutDown,
SlideOutLeft,
SlideOutRight,
SlideOutUp,
useAnimatedStyle,
withTiming,
} from "react-native-reanimated"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
import * as DrawerPrimitive from "@/components/primitives/drawer"
import { resolveClassName } from "@/components/primitives/use-render"
import { AnimatedView } from "@/components/ui/animated-view"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
type SwipeDirection = DrawerPrimitive.SwipeDirection
type DrawerContextProps = {
floating: boolean
hasSnapPoints: boolean
modal: DrawerPrimitive.RootProps["modal"]
showSwipeHandle: boolean
swipeDirection: SwipeDirection
}
const DrawerContext = React.createContext(null)
type DrawerIndentContextProps = {
raised: boolean
setRaised: (raised: boolean) => void
}
const DrawerIndentContext =
React.createContext(null)
type DrawerContentContextProps = {
hasCloseButton: boolean
hasCloseLabel: boolean
}
const DrawerContentContext = React.createContext({
hasCloseButton: false,
hasCloseLabel: false,
})
function useDrawer() {
const context = React.useContext(DrawerContext)
if (!context) {
throw new Error("useDrawer must be used within a Drawer.")
}
return context
}
const FullWindowOverlay =
Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
const EASE_DURATION = 450
const ENTERING = {
down: SlideInDown,
up: SlideInUp,
left: SlideInLeft,
right: SlideInRight,
} as const
const EXITING = {
down: SlideOutDown,
up: SlideOutUp,
left: SlideOutLeft,
right: SlideOutRight,
} as const
function DrawerProvider({ children }: DrawerPrimitive.ProviderProps) {
const [raised, setRaised] = React.useState(false)
const contextValue = React.useMemo(() => ({ raised, setRaised }), [raised])
return (
{children}
)
}
function DrawerIndentBackground({
className,
...props
}: React.ComponentProps) {
return (
cn(
"absolute top-0 right-0 bottom-0 left-0 -z-10 bg-foreground dark:bg-background",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
const INDENT_ORIGIN: ViewStyle = { transformOrigin: "top" }
function DrawerIndent({
className,
style,
children,
...props
}: React.ComponentProps) {
const indent = React.useContext(DrawerIndentContext)
const raised = indent?.raised ?? false
const insets = useSafeAreaInsets()
const offset = Math.max(insets.top, 12)
const animatedStyle = useAnimatedStyle(() => {
const config = {
duration: EASE_DURATION,
reduceMotion: ReduceMotion.System,
}
return {
borderRadius: withTiming(raised ? 18 : 0, config),
transform: [
{ translateY: withTiming(raised ? offset : 0, config) },
{ scale: withTiming(raised ? 0.94 : 1, config) },
],
}
}, [raised, offset])
return (
}
className={(state) =>
cn(
"relative flex-1 overflow-hidden bg-background",
resolveClassName(className, state)
)
}
style={style}
{...props}
>
{children}
)
}
function DrawerRaise({ floating }: { floating: boolean }) {
const indent = React.useContext(DrawerIndentContext)
const setRaised = indent?.setRaised
const { dialog, swipeDirection, expanded } =
DrawerPrimitive.useDrawerRootContext("Drawer")
const raised =
dialog.root.open && !floating && swipeDirection === "down" && expanded
React.useEffect(() => {
if (!setRaised) return
setRaised(raised)
return () => setRaised(false)
}, [setRaised, raised])
return null
}
function Drawer({
floating = false,
modal = true,
showSwipeHandle = false,
snapPoints,
swipeDirection = "down",
children,
...props
}: DrawerPrimitive.RootProps & {
floating?: boolean
showSwipeHandle?: boolean
}) {
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
const contextValue = React.useMemo(
() => ({ floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
[floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection]
)
return (
{children}
)
}
const DrawerTrigger = DrawerPrimitive.Trigger
const DrawerPortal = DrawerPrimitive.Portal
const DrawerClose = DrawerPrimitive.Close
function DrawerOverlay({
className,
...props
}: React.ComponentProps) {
return (
cn(
"absolute top-0 right-0 bottom-0 left-0 bg-black/50",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function DrawerSwipeHandle({ className, ...props }: ViewProps) {
const { swipeDirection } = useDrawer()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
return (
)
}
const POSITION: Record = {
down: "bottom-0 left-0 right-0",
up: "top-0 left-0 right-0",
left: "top-0 bottom-0 left-0 w-3/4 sm:max-w-sm",
right: "top-0 bottom-0 right-0 w-3/4 sm:max-w-sm",
}
const DOCKED_RADIUS: Record = {
down: "rounded-b-none",
up: "rounded-t-none",
left: "rounded-l-none",
right: "rounded-r-none",
}
const BLEED: Record = {
down: "top-full left-0 right-0 h-12",
up: "bottom-full left-0 right-0 h-12",
left: "right-full top-0 bottom-0 w-12",
right: "left-full top-0 bottom-0 w-12",
}
function DrawerContent({
className,
style,
children,
portalHost,
showCloseButton = false,
closeLabel,
...props
}: React.ComponentProps & {
portalHost?: string
showCloseButton?: boolean
closeLabel?: string
}) {
const drawerContext = useDrawer()
const { floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection } =
drawerContext
const insets = useSafeAreaInsets()
const { height } = useWindowDimensions()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
const inset = floating ? 8 : 0
const handleLast = swipeDirection === "up" || swipeDirection === "left"
const frameStyle = React.useMemo(
() => ({
pointerEvents: "box-none",
...(floating && swipeDirection !== "down" && { top: insets.top }),
...(floating && swipeDirection !== "up" && { bottom: insets.bottom }),
...(floating && swipeDirection !== "right" && { left: insets.left }),
...(floating && swipeDirection !== "left" && { right: insets.right }),
}),
[floating, swipeDirection, insets]
)
const popupStyle = React.useMemo(
() => ({
margin: inset,
...(!horizontal && {
maxHeight: height - Math.max(96, insets.top + 24),
}),
...(!floating &&
swipeDirection !== "up" && { paddingBottom: insets.bottom }),
...(!floating && swipeDirection !== "down" && { paddingTop: insets.top }),
}),
[floating, horizontal, swipeDirection, insets, height, inset]
)
const contentContext = React.useMemo(
() => ({
hasCloseButton: showCloseButton,
hasCloseLabel: showCloseButton && closeLabel !== undefined,
}),
[showCloseButton, closeLabel]
)
return (
{modal === true ? : null}
cn(
"flex min-h-0 flex-col rounded-3xl bg-popover shadow-xl",
horizontal && "flex-1 flex-row",
!floating && DOCKED_RADIUS[swipeDirection],
resolveClassName(className, state)
)
}
style={(state) => [
popupStyle,
typeof style === "function" ? style(state) : style,
]}
{...props}
>
{floating ? null : (
)}
{showSwipeHandle && !handleLast ? : null}
{children}
{showSwipeHandle && handleLast ? : null}
{showCloseButton ? (
}
hitSlop={8}
accessibilityLabel={closeLabel ? undefined : "Close"}
>
{closeLabel ? (
{closeLabel}
) : (
)}
) : null}
)
}
function DrawerHeader({ className, ...props }: ViewProps) {
const { swipeDirection } = useDrawer()
const { hasCloseButton, hasCloseLabel } =
React.useContext(DrawerContentContext)
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
)
}
function DrawerFooter({ className, ...props }: ViewProps) {
return (
)
}
function DrawerTitle({
className,
...props
}: React.ComponentProps) {
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
cn(
"text-base font-semibold text-foreground",
vertical && "text-center",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function DrawerDescription({
className,
...props
}: React.ComponentProps) {
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
cn(
"text-sm text-muted-foreground",
vertical && "text-center",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerIndent,
DrawerIndentBackground,
DrawerOverlay,
DrawerPortal,
DrawerProvider,
DrawerSwipeHandle,
DrawerTitle,
DrawerTrigger,
}
```
5. Update the import paths to match your project.
**StyleSheet**
1. Install the dependencies:
```bash title="Terminal"
npx expo install phosphor-react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text), and the primitives `components/primitives/drawer.tsx`, `components/primitives/use-render.tsx`, and the animated view `components/ui/animated-view.tsx` from the next step.
3. Copy the animated view into `components/ui/animated-view.tsx`:
- `stylesheet/components/ui/animated-view.tsx`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/stylesheet/components/ui/animated-view.tsx)
4. Copy the source into `components/ui/drawer.tsx`:
```tsx title="stylesheet/components/ui/drawer.tsx"
import { XIcon } from "phosphor-react-native"
import * as React from "react"
import {
Platform,
StyleSheet,
useWindowDimensions,
View,
type ViewProps,
type ViewStyle,
} from "react-native"
import {
FadeIn,
FadeOut,
ReduceMotion,
SlideInDown,
SlideInLeft,
SlideInRight,
SlideInUp,
SlideOutDown,
SlideOutLeft,
SlideOutRight,
SlideOutUp,
useAnimatedStyle,
withTiming,
} from "react-native-reanimated"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
import * as DrawerPrimitive from "@/components/primitives/drawer"
import { AnimatedView } from "@/components/ui/animated-view"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { fontSize, radius, shadow, useTheme } from "@/components/ui/theme"
type SwipeDirection = DrawerPrimitive.SwipeDirection
type DrawerContextProps = {
floating: boolean
hasSnapPoints: boolean
modal: DrawerPrimitive.RootProps["modal"]
showSwipeHandle: boolean
swipeDirection: SwipeDirection
}
const DrawerContext = React.createContext(null)
type DrawerIndentContextProps = {
raised: boolean
setRaised: (raised: boolean) => void
}
const DrawerIndentContext =
React.createContext(null)
type DrawerContentContextProps = {
hasCloseButton: boolean
hasCloseLabel: boolean
}
const DrawerContentContext = React.createContext({
hasCloseButton: false,
hasCloseLabel: false,
})
function useDrawer() {
const context = React.useContext(DrawerContext)
if (!context) {
throw new Error("useDrawer must be used within a Drawer.")
}
return context
}
const FullWindowOverlay =
Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
const EASE_DURATION = 450
const ENTERING = {
down: SlideInDown,
up: SlideInUp,
left: SlideInLeft,
right: SlideInRight,
} as const
const EXITING = {
down: SlideOutDown,
up: SlideOutUp,
left: SlideOutLeft,
right: SlideOutRight,
} as const
const styles = StyleSheet.create({
fill: { ...StyleSheet.absoluteFill },
layer: { ...StyleSheet.absoluteFill, zIndex: 50, pointerEvents: "box-none" },
indentBackground: { ...StyleSheet.absoluteFill, zIndex: -10 },
indent: {
position: "relative",
flex: 1,
overflow: "hidden",
transformOrigin: "top",
},
frame: { position: "absolute", zIndex: 50 },
popup: {
display: "flex",
minHeight: 0,
flexDirection: "column",
borderRadius: radius["3xl"],
...shadow.xl,
},
popupHorizontal: { flex: 1, flexDirection: "row" },
bleed: { position: "absolute", pointerEvents: "none" },
content: {
display: "flex",
minHeight: 0,
flexShrink: 1,
flexDirection: "column",
overflow: "hidden",
borderRadius: radius["3xl"],
},
contentFill: { flex: 1 },
handle: {
position: "relative",
zIndex: 10,
flexShrink: 0,
alignItems: "center",
justifyContent: "center",
},
handleVertical: { height: 12, width: "100%" },
handleHorizontal: { height: "100%", width: 12 },
handleBar: { flexShrink: 0, borderRadius: radius.full },
handleBarVertical: { height: 5, width: 36 },
handleBarHorizontal: { height: 36, width: 5 },
close: { position: "absolute", right: 16 },
closeIcon: { flexShrink: 0 },
closeLabel: { ...fontSize.base },
header: {
display: "flex",
flexShrink: 0,
flexDirection: "column",
gap: 2,
padding: 16,
paddingBottom: 0,
},
headerCentered: { alignItems: "center" },
footer: {
marginTop: "auto",
display: "flex",
flexShrink: 0,
flexDirection: "column",
gap: 8,
padding: 16,
paddingTop: 0,
},
title: { ...fontSize.base, fontWeight: "600" },
description: { ...fontSize.sm },
centered: { textAlign: "center" },
})
const POSITION: Record = {
down: { bottom: 0, left: 0, right: 0 },
up: { top: 0, left: 0, right: 0 },
left: { top: 0, bottom: 0, left: 0, width: "75%" },
right: { top: 0, bottom: 0, right: 0, width: "75%" },
}
const DOCKED_RADIUS: Record = {
down: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
up: { borderTopLeftRadius: 0, borderTopRightRadius: 0 },
left: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
right: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
}
const BLEED: Record = {
down: { top: "100%", left: 0, right: 0, height: 48 },
up: { bottom: "100%", left: 0, right: 0, height: 48 },
left: { right: "100%", top: 0, bottom: 0, width: 48 },
right: { left: "100%", top: 0, bottom: 0, width: 48 },
}
function DrawerProvider({ children }: DrawerPrimitive.ProviderProps) {
const [raised, setRaised] = React.useState(false)
const contextValue = React.useMemo(() => ({ raised, setRaised }), [raised])
return (
{children}
)
}
function DrawerIndentBackground({
style,
...props
}: React.ComponentProps) {
const { colors, isDark } = useTheme()
return (
[
styles.indentBackground,
{ backgroundColor: isDark ? colors.background : colors.foreground },
typeof style === "function" ? style(state) : style,
]}
{...props}
/>
)
}
function DrawerIndent({
style,
children,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
const indent = React.useContext(DrawerIndentContext)
const raised = indent?.raised ?? false
const insets = useSafeAreaInsets()
const offset = Math.max(insets.top, 12)
const animatedStyle = useAnimatedStyle(() => {
const config = {
duration: EASE_DURATION,
reduceMotion: ReduceMotion.System,
}
return {
borderRadius: withTiming(raised ? radius["2xl"] : 0, config),
transform: [
{ translateY: withTiming(raised ? offset : 0, config) },
{ scale: withTiming(raised ? 0.94 : 1, config) },
],
}
}, [raised, offset])
return (
}
style={(state) => [
styles.indent,
{ backgroundColor: colors.background },
typeof style === "function" ? style(state) : style,
]}
{...props}
>
{children}
)
}
function DrawerRaise({ floating }: { floating: boolean }) {
const indent = React.useContext(DrawerIndentContext)
const setRaised = indent?.setRaised
const { dialog, swipeDirection, expanded } =
DrawerPrimitive.useDrawerRootContext("Drawer")
const raised =
dialog.root.open && !floating && swipeDirection === "down" && expanded
React.useEffect(() => {
if (!setRaised) return
setRaised(raised)
return () => setRaised(false)
}, [setRaised, raised])
return null
}
function Drawer({
floating = false,
modal = true,
showSwipeHandle = false,
snapPoints,
swipeDirection = "down",
children,
...props
}: DrawerPrimitive.RootProps & {
floating?: boolean
showSwipeHandle?: boolean
}) {
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
const contextValue = React.useMemo(
() => ({ floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
[floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection]
)
return (
{children}
)
}
const DrawerTrigger = DrawerPrimitive.Trigger
const DrawerPortal = DrawerPrimitive.Portal
const DrawerClose = DrawerPrimitive.Close
function DrawerOverlay({
style,
...props
}: React.ComponentProps) {
return (
[
styles.fill,
{ backgroundColor: "rgba(0, 0, 0, 0.5)" },
typeof style === "function" ? style(state) : style,
]}
{...props}
/>
)
}
function DrawerSwipeHandle({ style, ...props }: ViewProps) {
const { colors } = useTheme()
const { swipeDirection } = useDrawer()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
return (
)
}
function DrawerContent({
style,
children,
portalHost,
showCloseButton = false,
closeLabel,
...props
}: React.ComponentProps & {
portalHost?: string
showCloseButton?: boolean
closeLabel?: string
}) {
const { colors } = useTheme()
const drawerContext = useDrawer()
const { floating, hasSnapPoints, modal, showSwipeHandle, swipeDirection } =
drawerContext
const insets = useSafeAreaInsets()
const { width, height } = useWindowDimensions()
const horizontal = swipeDirection === "left" || swipeDirection === "right"
const inset = floating ? 8 : 0
const handleLast = swipeDirection === "up" || swipeDirection === "left"
const frameStyle = React.useMemo(
() => ({
...POSITION[swipeDirection],
pointerEvents: "box-none",
...(horizontal && width >= 640 && { maxWidth: 384 }),
...(floating && swipeDirection !== "down" && { top: insets.top }),
...(floating && swipeDirection !== "up" && { bottom: insets.bottom }),
...(floating && swipeDirection !== "right" && { left: insets.left }),
...(floating && swipeDirection !== "left" && { right: insets.right }),
}),
[floating, horizontal, swipeDirection, insets, width]
)
const popupStyle = React.useMemo(
() => ({
margin: inset,
...(!horizontal && {
maxHeight: height - Math.max(96, insets.top + 24),
}),
...(!floating &&
swipeDirection !== "up" && { paddingBottom: insets.bottom }),
...(!floating && swipeDirection !== "down" && { paddingTop: insets.top }),
}),
[floating, horizontal, swipeDirection, insets, height, inset]
)
const contentContext = React.useMemo(
() => ({
hasCloseButton: showCloseButton,
hasCloseLabel: showCloseButton && closeLabel !== undefined,
}),
[showCloseButton, closeLabel]
)
return (
{modal === true ? : null}
[
styles.popup,
{ backgroundColor: colors.popover },
horizontal && styles.popupHorizontal,
!floating && DOCKED_RADIUS[swipeDirection],
popupStyle,
typeof style === "function" ? style(state) : style,
]}
{...props}
>
{floating ? null : (
)}
{showSwipeHandle && !handleLast ? : null}
{children}
{showSwipeHandle && handleLast ? : null}
{showCloseButton ? (
[
styles.close,
{ top: showSwipeHandle ? 23 : 11 },
!closeLabel && {
backgroundColor: pressed
? colors.border
: colors.secondary,
},
]}
/>
}
hitSlop={8}
accessibilityLabel={closeLabel ? undefined : "Close"}
>
{closeLabel ? (
{closeLabel}
) : (
)}
) : null}
)
}
function DrawerHeader({ style, ...props }: ViewProps) {
const { swipeDirection } = useDrawer()
const { hasCloseButton, hasCloseLabel } =
React.useContext(DrawerContentContext)
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
)
}
function DrawerFooter({ style, ...props }: ViewProps) {
return
}
function DrawerTitle({
style,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
[
styles.title,
{ color: colors.foreground },
vertical && styles.centered,
typeof style === "function" ? style(state) : style,
]}
{...props}
/>
)
}
function DrawerDescription({
style,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
const { swipeDirection } = useDrawer()
const vertical = swipeDirection === "down" || swipeDirection === "up"
return (
[
styles.description,
{ color: colors.mutedForeground },
vertical && styles.centered,
typeof style === "function" ? style(state) : style,
]}
{...props}
/>
)
}
export {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerIndent,
DrawerIndentBackground,
DrawerOverlay,
DrawerPortal,
DrawerProvider,
DrawerSwipeHandle,
DrawerTitle,
DrawerTrigger,
}
```
5. Update the import paths to match your project.
**SwiftUI**
1. Target iOS 17 or later.
2. Add the Swift package to your app:
```swift title="Package.swift"
.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")
```
3. Copy the theme files every view uses:
- `swift/Theme/Theme.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Theme.swift)
- `swift/Theme/Tokens.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Tokens.swift)
4. Copy the source and every file it uses:
```swift title="swift/Components/Drawer.swift"
import SwiftUI
extension View {
public func drawer(
isPresented: Binding,
detents: Set? = nil,
selection: Binding? = nil,
onDismiss: (() -> Void)? = nil,
@ViewBuilder content: @escaping () -> Content
) -> some View {
let binding = isPresented
return sheet(isPresented: isPresented, onDismiss: onDismiss) {
DrawerHost(detents: detents, selection: selection, content: content)
.environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
}
}
}
extension EnvironmentValues {
@Entry var drawerFitsContent = false
}
struct DrawerHost: View {
let detents: Set?
let selection: Binding?
@ViewBuilder let content: () -> Content
@State private var height: CGFloat = 0
@State private var bottomInset: CGFloat = 0
var body: some View {
let styled = content()
.environment(\.drawerFitsContent, detents == nil)
.frame(maxWidth: .infinity, maxHeight: detents == nil ? nil : .infinity, alignment: .top)
.onGeometryChange(for: CGFloat.self) { proxy in
proxy.size.height
} action: { value in
height = value
}
.background {
GeometryReader { proxy in
Color.clear.onAppear { bottomInset = proxy.safeAreaInsets.bottom }
}
}
.presentationDragIndicator(.visible)
.presentationBackground(EsuissColor.popover)
.presentationCornerRadius(Radius.xl3)
if let detents, let selection {
styled.presentationDetents(detents, selection: selection)
} else if let detents {
styled.presentationDetents(detents)
} else {
styled.presentationDetents([.height(max(height + bottomInset, 1))])
}
}
}
public struct DrawerContent: View {
let showCloseButton: Bool
let closeLabel: LocalizedStringKey?
let content: Content
@Environment(\.drawerFitsContent) private var fitsContent
public init(
showCloseButton: Bool = false,
closeLabel: LocalizedStringKey? = nil,
@ViewBuilder content: () -> Content
) {
self.showCloseButton = showCloseButton
self.closeLabel = closeLabel
self.content = content()
}
public var body: some View {
VStack(alignment: .leading, spacing: 0) {
content
}
.padding(.top, 12)
.frame(maxWidth: .infinity, maxHeight: fitsContent ? nil : .infinity, alignment: .top)
.fixedSize(horizontal: false, vertical: fitsContent)
.environment(\.overlayCloseInset, showCloseButton ? (closeLabel == nil ? 56 : 96) : 0)
.overlay(alignment: .topTrailing) {
if showCloseButton {
OverlayCloseButton(label: closeLabel)
.padding(.top, closeLabel == nil ? 23 : 21)
.padding(.trailing, 16)
}
}
.background(EsuissColor.popover)
}
}
public struct DrawerHeader: View {
let content: Content
@Environment(\.overlayCloseInset) private var closeInset
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
VStack(spacing: 2) {
content
}
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
.padding(.top, 16)
.padding(.horizontal, max(closeInset, 16))
}
}
public struct DrawerFooter: View {
let content: Content
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
VStack(spacing: 0) {
Spacer(minLength: 0)
VStack(spacing: 8) {
content
}
.frame(maxWidth: .infinity)
.padding([.horizontal, .bottom], 16)
}
}
}
public typealias DrawerTitle = DialogTitle
public typealias DrawerDescription = DialogDescription
public typealias DrawerClose = DialogClose