Drawer

Panel that slides in from an edge of the screen and can be swiped closed, built on Base UI Drawer.

import { MinusIcon, PlusIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

const PRICE_PER_COPY = 50

function CopiesCounter({
  copies,
  setCopies,
}: {
  copies: number
  setCopies: React.Dispatch<React.SetStateAction<number>>
}) {
  return (
    <div className="flex items-center justify-center gap-4 p-4">
      <Button
        variant="outline"
        size="icon"
        className="rounded-full"
        onClick={() => setCopies((value) => Math.max(1, value - 1))}
        disabled={copies <= 1}
        aria-label="Fewer copies"
      >
        <MinusIcon />
      </Button>
      <div className="flex-1 text-center" aria-live="polite">
        <div className="text-5xl font-semibold tracking-tighter tabular-nums">{copies}</div>
        <div className="text-xs text-muted-foreground uppercase">Certified copies</div>
      </div>
      <Button
        variant="outline"
        size="icon"
        className="rounded-full"
        onClick={() => setCopies((value) => Math.min(10, value + 1))}
        disabled={copies >= 10}
        aria-label="More copies"
      >
        <PlusIcon />
      </Button>
    </div>
  )
}

export function DrawerDemo() {
  const [copies, setCopies] = React.useState(1)
  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Order certified copies</DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Certified copies</DrawerTitle>
            <DrawerDescription>Choose how many copies of decision 2026/1187 you need.</DrawerDescription>
          </DrawerHeader>
          <CopiesCounter copies={copies} setCopies={setCopies} />
          <div className="flex items-center justify-between px-4 text-sm">
            <span className="text-muted-foreground">
              {copies} × {PRICE_PER_COPY} SEK, sent by post
            </span>
            <span className="font-medium tabular-nums">{copies * PRICE_PER_COPY} SEK</span>
          </div>
          <DrawerFooter>
            <Button>Place order</Button>
            <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/drawer.json

Installs to @/components/ui/drawer.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0

Copy the source into your project:

components/ui/drawer.tsx

'use client'

import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
import * as React from 'react'
import { cn } from '@/lib/utils'

type DrawerContextProps = {
	hasSnapPoints: boolean
	modal: DrawerPrimitive.Root.Props['modal']
	showSwipeHandle: boolean
	swipeDirection: NonNullable<DrawerPrimitive.Root.Props['swipeDirection']>
}

const DrawerContext = React.createContext<DrawerContextProps | null>(null)

function useDrawer() {
	const context = React.useContext(DrawerContext)

	if (!context) {
		throw new Error('useDrawer must be used within a Drawer.')
	}

	return context
}

function Drawer({
	modal = true,
	showSwipeHandle = false,
	snapPoints,
	swipeDirection = 'down',
	...props
}: DrawerPrimitive.Root.Props & {
	showSwipeHandle?: boolean
}) {
	const hasSnapPoints = snapPoints != null && snapPoints.length > 0
	const contextValue = React.useMemo(
		() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
		[hasSnapPoints, modal, showSwipeHandle, swipeDirection],
	)

	return (
		<DrawerContext.Provider value={contextValue}>
			<DrawerPrimitive.Root
				data-slot="drawer"
				modal={modal}
				snapPoints={snapPoints}
				swipeDirection={swipeDirection}
				{...props}
			/>
		</DrawerContext.Provider>
	)
}

function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
	return (
		<DrawerPrimitive.Backdrop
			data-slot="drawer-overlay"
			className={cn(
				'fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-swipe-handle"
			aria-hidden="true"
			className={cn(
				'relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
	const swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x'

	return (
		<DrawerPortal data-slot="drawer-portal">
			{modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? '' : undefined} />}
			<DrawerPrimitive.Viewport
				data-slot="drawer-viewport"
				data-modal={modal}
				className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
			>
				<DrawerPrimitive.Popup
					data-slot="drawer-popup"
					data-swipe-axis={swipeAxis}
					data-snap-points={hasSnapPoints ? '' : undefined}
					className={cn(
						// Base.
						'group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b',
						// Nested.
						'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95',
						// Bleed.
						'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full',
						// Sizing.
						'[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]',
						// Stack.
						'[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]',
						// Transitions.
						'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
						// Axis: y.
						'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)',
						// Axis: x.
						'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row',
						// Direction: down.
						'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]',
						// Direction: up.
						'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]',
						// Direction: left.
						'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]',
						// Direction: right.
						'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]',
						className,
					)}
					{...props}
				>
					{showSwipeHandle && <DrawerSwipeHandle />}
					<DrawerPrimitive.Content
						data-slot="drawer-content"
						className={cn(
							'flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none',
						)}
					>
						{children}
					</DrawerPrimitive.Content>
				</DrawerPrimitive.Popup>
			</DrawerPrimitive.Viewport>
		</DrawerPortal>
	)
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-header"
			className={cn(
				'flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-footer"
			className={cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', className)}
			{...props}
		/>
	)
}

function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
	return (
		<DrawerPrimitive.Title
			data-slot="drawer-title"
			className={cn('font-heading text-base font-medium text-foreground', className)}
			{...props}
		/>
	)
}

function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
	return (
		<DrawerPrimitive.Description
			data-slot="drawer-description"
			className={cn('text-sm text-balance text-muted-foreground', className)}
			{...props}
		/>
	)
}

export {
	Drawer,
	DrawerPortal,
	DrawerOverlay,
	DrawerSwipeHandle,
	DrawerTrigger,
	DrawerClose,
	DrawerContent,
	DrawerHeader,
	DrawerFooter,
	DrawerTitle,
	DrawerDescription,
}

A drawer panel built on Base UI Drawer that slides in from any edge of the screen. It supports swipe-to-dismiss and is well suited to mobile-first flows such as quick forms, order options and case details.

Features

Opens from the bottom, top, left or right (swipeDirection on Drawer)
Swipe to dismiss, with an optional grab handle (showSwipeHandle)
Optional snap points (snapPoints)
Content scrolls when it is taller than the drawer
Header, footer, title and description slots
Focus is trapped while open
Closes on Escape or overlay click

Usage

import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

export function CopiesDrawer() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>Order certified copies</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Certified copies</DrawerTitle>
          <DrawerDescription>Choose how many copies you need.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Button>Place order</Button>
          <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Examples

Default

A bottom drawer for ordering certified copies of a decision, with a counter, a running total and actions.

import { MinusIcon, PlusIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

const PRICE_PER_COPY = 50

function CopiesCounter({
  copies,
  setCopies,
}: {
  copies: number
  setCopies: React.Dispatch<React.SetStateAction<number>>
}) {
  return (
    <div className="flex items-center justify-center gap-4 p-4">
      <Button
        variant="outline"
        size="icon"
        className="rounded-full"
        onClick={() => setCopies((value) => Math.max(1, value - 1))}
        disabled={copies <= 1}
        aria-label="Fewer copies"
      >
        <MinusIcon />
      </Button>
      <div className="flex-1 text-center" aria-live="polite">
        <div className="text-5xl font-semibold tracking-tighter tabular-nums">{copies}</div>
        <div className="text-xs text-muted-foreground uppercase">Certified copies</div>
      </div>
      <Button
        variant="outline"
        size="icon"
        className="rounded-full"
        onClick={() => setCopies((value) => Math.min(10, value + 1))}
        disabled={copies >= 10}
        aria-label="More copies"
      >
        <PlusIcon />
      </Button>
    </div>
  )
}

export function DrawerDemo() {
  const [copies, setCopies] = React.useState(1)
  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger render={<Button variant="outline" />}>Order certified copies</DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Certified copies</DrawerTitle>
            <DrawerDescription>Choose how many copies of decision 2026/1187 you need.</DrawerDescription>
          </DrawerHeader>
          <CopiesCounter copies={copies} setCopies={setCopies} />
          <div className="flex items-center justify-between px-4 text-sm">
            <span className="text-muted-foreground">
              {copies} × {PRICE_PER_COPY} SEK, sent by post
            </span>
            <span className="font-medium tabular-nums">{copies * PRICE_PER_COPY} SEK</span>
          </div>
          <DrawerFooter>
            <Button>Place order</Button>
            <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Directions

Case details in drawers opening from each edge. Set swipeDirection to the direction the drawer is swiped away: down (default) opens from the bottom, up from the top, and left / right from the sides.

<Drawer swipeDirection="right">…</Drawer>

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

export function DrawerDirections() {
  return (
    <div className="flex flex-wrap gap-2">
      {(
        [
          ['top', 'up'],
          ['right', 'right'],
          ['bottom', 'down'],
          ['left', 'left'],
        ] as const
      ).map(([direction, swipeDirection]) => (
        <Drawer key={direction} swipeDirection={swipeDirection}>
          <DrawerTrigger render={<Button variant="outline" className="capitalize" />}>{direction}</DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Case details</DrawerTitle>
              <DrawerDescription>This drawer slides in from the {direction}.</DrawerDescription>
            </DrawerHeader>
            <dl className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 px-4 text-sm">
              <dt className="text-muted-foreground">Case</dt>
              <dd className="font-mono">2026/1187</dd>
              <dt className="text-muted-foreground">Subject</dt>
              <dd>Sign permit, Torggatan 7</dd>
              <dt className="text-muted-foreground">Status</dt>
              <dd>
                <Badge variant="secondary">In review</Badge>
              </dd>
              <dt className="text-muted-foreground">Case officer</dt>
              <dd>Anna Lindqvist</dd>
            </dl>
            <DrawerFooter>
              <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}

With Form

A side drawer with a contact details form built from Field components.

import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

export function DrawerWithForm() {
  const id = React.useId()
  return (
    <Drawer swipeDirection="right">
      <DrawerTrigger render={<Button />}>Update contact details</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Contact details</DrawerTitle>
          <DrawerDescription>We will use these details for all correspondence about your cases.</DrawerDescription>
        </DrawerHeader>
        <form className="px-4" onSubmit={(event) => event.preventDefault()}>
          <FieldGroup className="gap-4">
            <Field>
              <FieldLabel htmlFor={`${id}-drawer-email`}>Email</FieldLabel>
              <Input id={`${id}-drawer-email`} type="email" defaultValue="anna.lindqvist@example.se" />
            </Field>
            <Field>
              <FieldLabel htmlFor={`${id}-drawer-phone`}>Mobile phone</FieldLabel>
              <Input id={`${id}-drawer-phone`} type="tel" defaultValue="070-123 45 67" />
              <FieldDescription>For text reminders about bookings and waste collection.</FieldDescription>
            </Field>
            <Separator />
            <Field>
              <FieldLabel htmlFor={`${id}-drawer-address`}>Postal address</FieldLabel>
              <Input id={`${id}-drawer-address`} defaultValue="Storgatan 14, 123 45 Norrby" readOnly />
              <FieldDescription>From the population register. Report a move to the Tax Agency.</FieldDescription>
            </Field>
          </FieldGroup>
        </form>
        <DrawerFooter>
          <Button>Save changes</Button>
          <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Scrollable Content

Terms for the e-services that scroll inside the drawer while the header and footer stay put.

import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

const TERMS = [
  {
    title: '1. Who the terms apply to',
    text:
      'These terms apply when you use the municipality’s e-services, for example to apply for a building permit, book a facility or request public records.',
  },
  {
    title: '2. Signing in',
    text:
      'You sign in with an electronic identification. Everything you submit while signed in counts as submitted by you.',
  },
  {
    title: '3. Your personal data',
    text:
      'We process your personal data to handle your case. The data is kept for as long as the records management plan requires.',
  },
  {
    title: '4. Public access to official records',
    text:
      'Documents you send us usually become official records. Anyone may ask to read them, unless confidentiality applies.',
  },
  {
    title: '5. Attachments',
    text:
      'Attach files as PDF, JPG or PNG, at most 20 MB each. Do not attach documents that contain other people’s personal identity numbers.',
  },
  {
    title: '6. Availability',
    text:
      'The e-services are usually open around the clock. Planned maintenance is announced on the website at least two days in advance.',
  },
  {
    title: '7. Receipts',
    text:
      'You get a receipt with a reference number when your application has been received. Save it until your case is decided.',
  },
  {
    title: '8. Questions',
    text: 'Contact the service centre on weekdays, 08:00–16:00, if something in the e-service does not work as expected.',
  },
]

export function DrawerScrollableContent() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>Read terms of service</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Terms for e-services</DrawerTitle>
          <DrawerDescription>Please read the terms before submitting your application.</DrawerDescription>
        </DrawerHeader>
        <div className="mx-auto flex w-full max-w-2xl flex-col gap-4 overflow-y-auto px-4 text-sm">
          {TERMS.map((section) => (
            <section key={section.title} className="flex flex-col gap-1">
              <h3 className="font-medium">{section.title}</h3>
              <p className="leading-relaxed text-muted-foreground">{section.text}</p>
            </section>
          ))}
        </div>
        <DrawerFooter>
          <Button>I accept</Button>
          <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Props

Drawer

swipeDirection - 'down' | 'up' | 'left' | 'right' (default 'down'). Replaces Vaul's direction (bottom → down, top → up).
showSwipeHandle - Show a grab handle on the edge the drawer is swiped from (default false)
snapPoints / snapPoint / onSnapPointChange - Snap the drawer to fractions of the viewport height or fixed sizes
modal - true (default), false or 'trap-focus'
open / defaultOpen / onOpenChange - Open state

DrawerTrigger / DrawerClose

render - Element to render instead of the default <button>, e.g. render={<Button variant="outline" />}

DrawerContent

className - Classes for the drawer panel. Children are placed in a scrollable column.

Accessibility

Rendered as a dialog with focus trapped inside while open
DrawerTitle and DrawerDescription are announced when the drawer opens
Escape closes the drawer and focus returns to the trigger
Always provide a visible close button in addition to swipe gestures