Drawer

Directional drawer primitives powered by sheet components

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

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

const activity = [400, 300, 200, 300, 200, 278, 189, 239, 300, 200, 278, 189, 349]

export default function DrawerDemoExample() {
  let goal = $state(350)
  const adjust = (amount: number) => { goal = Math.max(200, Math.min(400, goal + amount)) }

  return (
    <Drawer>
      <DrawerTrigger asChild><Button variant="outline">Open Drawer</Button></DrawerTrigger>
      <DrawerContent>
        <div class="mx-auto w-full max-w-sm">
          <DrawerHeader><DrawerTitle>Move Goal</DrawerTitle><DrawerDescription>Set your daily activity goal.</DrawerDescription></DrawerHeader>
          <div class="p-4 pb-0">
            <div class="flex items-center justify-center gap-2">
              <Button variant="outline" size="icon" onClick={() => adjust(-10)} disabled={goal <= 200} aria-label="Decrease">−</Button>
              <div class="flex-1 text-center"><div class="text-7xl font-bold">{goal}</div><div class="text-xs uppercase text-muted-foreground">Calories/day</div></div>
              <Button variant="outline" size="icon" onClick={() => adjust(10)} disabled={goal >= 400} aria-label="Increase">+</Button>
            </div>
            <div class="mt-3 flex h-[120px] items-end gap-1" aria-label="Recent activity">
              {activity.map(value => <span class="flex-1 bg-primary" style={{ height: `${value / 4}%` }} />)}
            </div>
          </div>
          <DrawerFooter><Button>Submit</Button><DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose></DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Installation

npx @fictjs/shadcn@latest add drawer

Copy the Fict shadcn component into your project.

Source

components/ui/drawer.tsx

src/components/ui/drawer.tsx

import { createContext, useContext } from 'fict'

import { cn } from '@/lib/cn'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'

type DrawerDirection = 'top' | 'right' | 'bottom' | 'left'
type GenericProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}
type DrawerProps = GenericProps & { direction?: DrawerDirection }

const DrawerDirectionContext = createContext<DrawerDirection>('bottom')

export function Drawer(props: DrawerProps) {
  const { direction = 'bottom', children, ...rest } = props
  return (
    <DrawerDirectionContext.Provider value={direction}>
      <Sheet {...rest}>{children}</Sheet>
    </DrawerDirectionContext.Provider>
  )
}

export const DrawerClose = SheetClose
export const DrawerDescription = SheetDescription
export const DrawerFooter = SheetFooter
export const DrawerHeader = SheetHeader
export const DrawerTitle = SheetTitle
export const DrawerTrigger = SheetTrigger

export function DrawerContent(props: GenericProps) {
  const direction = useContext(DrawerDirectionContext)
  const { class: className, children, ...rest } = props
  return (
    <SheetContent
      side={direction}
      data-slot='drawer-content'
      data-drawer-direction={direction}
      class={cn(
        'flex h-auto flex-col text-sm',
        direction === 'bottom' && 'mt-24 max-h-[80vh] rounded-t-xl',
        direction === 'top' && 'mb-24 max-h-[80vh] rounded-b-xl',
        direction === 'left' && 'w-3/4 rounded-r-xl sm:max-w-sm',
        direction === 'right' && 'w-3/4 rounded-l-xl sm:max-w-sm',
        className,
      )}
      {...rest}
    >
      {(direction === 'bottom' || direction === 'top') ? <div class='mx-auto mt-4 h-1 w-[100px] shrink-0 rounded-full bg-muted' aria-hidden='true' /> : null}
      {children}
    </SheetContent>
  )
}

Usage


  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

Examples

Scrollable Content

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

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

export default function DrawerScrollableContentExample() {
  return (
    <Drawer direction="right">
      <DrawerTrigger asChild><Button variant="outline">Scrollable Content</Button></DrawerTrigger>
      <DrawerContent>
        <DrawerHeader><DrawerTitle>Move Goal</DrawerTitle><DrawerDescription>Set your daily activity goal.</DrawerDescription></DrawerHeader>
        <div class="overflow-y-auto px-4">
          {Array.from({ length: 10 }, (_, index) => <p class="mb-4 leading-normal">Paragraph {index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>)}
        </div>
        <DrawerFooter><Button>Submit</Button><DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose></DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Sides

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

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

const sides = ['top', 'right', 'bottom', 'left'] as const

export default function DrawerSidesExample() {
  return (
    <div class="flex flex-wrap gap-2">
      {sides.map(side => (
        <Drawer direction={side}>
          <DrawerTrigger asChild><Button variant="outline" class="capitalize">{side}</Button></DrawerTrigger>
          <DrawerContent>
            <DrawerHeader><DrawerTitle>Move Goal</DrawerTitle><DrawerDescription>Set your daily activity goal.</DrawerDescription></DrawerHeader>
            <div class="overflow-y-auto px-4">
              {Array.from({ length: 10 }, (_, index) => <p class="mb-4">Paragraph {index + 1}: Lorem ipsum dolor sit amet.</p>)}
            </div>
            <DrawerFooter><Button>Submit</Button><DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose></DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}

Dialog

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
...

import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

function ProfileForm() {
  return <form class="grid gap-6"><Label for="email">Email</Label><Input type="email" id="email" value="shadcn@example.com" /><Label for="username">Username</Label><Input id="username" value="@shadcn" /><Button type="submit">Save changes</Button></form>
}

export default function DrawerDialogExample() {
  return (
    <>
      <div class="hidden md:block">
        <Dialog><DialogTrigger asChild><Button variant="outline">Edit Profile</Button></DialogTrigger><DialogContent class="sm:max-w-[425px]"><DialogHeader><DialogTitle>Edit profile</DialogTitle><DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription></DialogHeader><ProfileForm /></DialogContent></Dialog>
      </div>
      <div class="md:hidden">
        <Drawer><DrawerTrigger asChild><Button variant="outline">Edit Profile</Button></DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Edit profile</DrawerTitle><DrawerDescription>Make changes to your profile here. Click save when you're done.</DrawerDescription></DrawerHeader><div class="px-4"><ProfileForm /></div><DrawerFooter><DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose></DrawerFooter></DrawerContent></Drawer>
      </div>
    </>
  )
}

Rtl

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

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

const translations = {
  ar: { dir: 'rtl', locale: 'ar-EG', trigger: 'فتح الدرج', title: 'نقل الهدف', description: 'حدد هدف نشاطك اليومي.', calories: 'سعرات حرارية/يوم', decrease: 'تقليل', increase: 'زيادة', submit: 'إرسال', cancel: 'إلغاء' },
  he: { dir: 'rtl', locale: 'he-IL', trigger: 'פתח מגירה', title: 'הזז מטרה', description: 'הגדר את יעד הפעילות היומי שלך.', calories: 'קלוריות/יום', decrease: 'הקטן', increase: 'הגדל', submit: 'שלח', cancel: 'בטל' },
  en: { dir: 'ltr', locale: 'en-US', trigger: 'Open Drawer', title: 'Move Goal', description: 'Set your daily activity goal.', calories: 'Calories/day', decrease: 'Decrease', increase: 'Increase', submit: 'Submit', cancel: 'Cancel' },
} as const

export default function DrawerRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  let goal = $state(350)
  const text = () => translations[language]
  const adjust = (amount: number) => { goal = Math.max(200, Math.min(400, goal + amount)) }

  return (
    <div class="grid gap-4">
      <select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select>
      <Drawer>
        <DrawerTrigger asChild><Button variant="outline">{text().trigger}</Button></DrawerTrigger>
        <DrawerContent dir={text().dir} data-lang={text().dir === 'rtl' ? language : undefined}>
          <div class="mx-auto w-full max-w-sm">
            <DrawerHeader><DrawerTitle>{text().title}</DrawerTitle><DrawerDescription>{text().description}</DrawerDescription></DrawerHeader>
            <div class="flex items-center justify-center gap-2 p-4"><Button variant="outline" size="icon" onClick={() => adjust(-10)} disabled={goal <= 200} aria-label={text().decrease}>−</Button><div class="text-center"><strong class="text-7xl">{goal.toLocaleString(text().locale)}</strong><div>{text().calories}</div></div><Button variant="outline" size="icon" onClick={() => adjust(10)} disabled={goal >= 400} aria-label={text().increase}>+</Button></div>
            <DrawerFooter><Button>{text().submit}</Button><DrawerClose asChild><Button variant="outline">{text().cancel}</Button></DrawerClose></DrawerFooter>
          </div>
        </DrawerContent>
      </Drawer>
    </div>
  )
}

Dialog Dropdown Menu