Drawer

Drawer is a panel component displayed as an overlay at the edges of the screen.

preview

Installation#

npx shadcn@latest add https://v11.primereact.org/r/drawer.json

Usage#

import { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerPortal, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';

<Drawer>
    <DrawerTrigger />
    <DrawerBackdrop />
    <DrawerPortal>
        <DrawerHeader>
            <DrawerTitle />
            <DrawerClose />
        </DrawerHeader>
        <DrawerContent />
        <DrawerFooter />
    </DrawerPortal>
</Drawer>

Examples#

Basic#

A slide-in panel from the edge of the screen for contextual content.

basic-demo

'use client';
import { Bars, Times } from '@primeicons/react';
import { Button } from '@/components/ui/button';
import {
    Drawer,
    DrawerTrigger,
    DrawerBackdrop,
    DrawerPopup,
    DrawerPortal,
    DrawerHeader,
    DrawerTitle,
    DrawerClose,
    DrawerContent
} from '@/components/ui/drawer';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <Drawer>
                <DrawerTrigger as={Button} iconOnly>
                    <Bars />
                </DrawerTrigger>
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup className="w-full md:w-80">
                        <DrawerHeader>
                            <DrawerTitle>Basic Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>A slide-in panel from the edge of the screen for contextual content.</p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>
        </div>
    );
}

Position#

The position of the drawer can be customized with the position property. The available values are left, right, top and bottom.

position-demo

'use client';
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Times } from '@primeicons/react';
import { Button } from '@/components/ui/button';
import { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerHeader, DrawerPopup, DrawerPortal, DrawerTitle } from '@/components/ui/drawer';
import type { DrawerRootChangeEvent } from 'primereact/drawer';
import * as React from 'react';

export default function PositionDemo() {
    const [visibleLeft, setVisibleLeft] = React.useState<boolean>(false);
    const [visibleRight, setVisibleRight] = React.useState<boolean>(false);
    const [visibleTop, setVisibleTop] = React.useState<boolean>(false);
    const [visibleBottom, setVisibleBottom] = React.useState<boolean>(false);

    return (
        <div>
            <div className="flex gap-2 justify-center">
                <Button iconOnly onClick={() => setVisibleLeft(true)}>
                    <ArrowRight />
                </Button>
                <Button iconOnly onClick={() => setVisibleRight(true)}>
                    <ArrowLeft />
                </Button>
                <Button iconOnly onClick={() => setVisibleTop(true)}>
                    <ArrowDown />
                </Button>
                <Button iconOnly onClick={() => setVisibleBottom(true)}>
                    <ArrowUp />
                </Button>
            </div>

            <Drawer open={visibleLeft} onOpenChange={(e: DrawerRootChangeEvent) => setVisibleLeft(e.value as boolean)}>
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup className="w-full md:w-80">
                        <DrawerHeader>
                            <DrawerTitle>Left Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>
                                The position of the drawer can be customized with the position property. The available values are left, right, top and
                                bottom.
                            </p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>

            <Drawer position="right" open={visibleRight} onOpenChange={(e: DrawerRootChangeEvent) => setVisibleRight(e.value as boolean)}>
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup className="w-full md:w-80">
                        <DrawerHeader>
                            <DrawerTitle>Right Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>
                                The position of the drawer can be customized with the position property. The available values are left, right, top and
                                bottom.
                            </p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>

            <Drawer
                position="top"
                open={visibleTop}
                onOpenChange={(e: DrawerRootChangeEvent) => setVisibleTop(e.value as boolean)}
                style={{ height: 'auto' }}
            >
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup>
                        <DrawerHeader>
                            <DrawerTitle>Top Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>
                                The position of the drawer can be customized with the position property. The available values are left, right, top and
                                bottom.
                            </p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>

            <Drawer
                position="bottom"
                open={visibleBottom}
                onOpenChange={(e: DrawerRootChangeEvent) => setVisibleBottom(e.value as boolean)}
                style={{ height: 'auto' }}
            >
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup>
                        <DrawerHeader>
                            <DrawerTitle>Bottom Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>
                                The position of the drawer can be customized with the position property. The available values are left, right, top and
                                bottom.
                            </p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>
        </div>
    );
}

Full Screen#

The full screen mode is enabled when position property is set as full.

full-screen-demo

'use client';
import { Times, WindowMaximize } from '@primeicons/react';
import { Button } from '@/components/ui/button';
import {
    Drawer,
    DrawerTrigger,
    DrawerBackdrop,
    DrawerPopup,
    DrawerPortal,
    DrawerHeader,
    DrawerTitle,
    DrawerClose,
    DrawerContent
} from '@/components/ui/drawer';

export default function FullScreenDemo() {
    return (
        <div className="flex justify-center">
            <Drawer position="full">
                <DrawerTrigger as={Button} iconOnly>
                    <WindowMaximize />
                </DrawerTrigger>
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup>
                        <DrawerHeader>
                            <DrawerTitle>Full Screen Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <p>The full screen mode is enabled when position property is set as full.</p>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>
        </div>
    );
}

Responsive#

The responsive mode can be enabled by adding className or style to the Drawer.Portal component.

responsive-demo

'use client';
import { Times } from '@primeicons/react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Drawer,
    DrawerTrigger,
    DrawerBackdrop,
    DrawerPopup,
    DrawerPortal,
    DrawerHeader,
    DrawerTitle,
    DrawerClose,
    DrawerContent
} from '@/components/ui/drawer';
import { InputText } from '@/components/ui/inputtext';
import { Label } from '@/components/ui/label';
import { InputPassword } from '@/components/ui/inputpassword';

export default function ResponsiveDemo() {
    return (
        <div className="flex justify-center">
            <Drawer>
                <DrawerTrigger as={Button}>Log in</DrawerTrigger>
                <DrawerBackdrop />
                <DrawerPortal>
                    <DrawerPopup className="w-full sm:w-96 md:w-md lg:w-120">
                        <DrawerHeader>
                            <DrawerTitle>Responsive Drawer</DrawerTitle>
                            <DrawerClose>
                                <Times />
                            </DrawerClose>
                        </DrawerHeader>
                        <DrawerContent>
                            <div className="flex flex-col gap-4">
                                <div className="flex flex-col gap-2">
                                    <Label htmlFor="email" className="font-medium text-sm">
                                        Email
                                    </Label>
                                    <InputText id="email" placeholder="Enter your email" className="w-full" />
                                </div>
                                <div className="flex flex-col gap-2">
                                    <Label htmlFor="password" className="font-medium text-sm">
                                        Password
                                    </Label>
                                    <InputPassword id="password" placeholder="Enter your password" className="w-full" />
                                </div>
                                <div className="flex items-center gap-2">
                                    <Checkbox inputId="remember" value="remember" />
                                    <Label htmlFor="remember" className="text-sm">
                                        Remember me
                                    </Label>
                                </div>
                                <Button className="w-full">Sign In</Button>
                            </div>
                        </DrawerContent>
                    </DrawerPopup>
                </DrawerPortal>
            </Drawer>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerPortal, DrawerHeader, DrawerTitle, DrawerClose, DrawerContent, DrawerFooter component documentation.

Hooks#

See Headless API for useDrawer hook documentation.

Accessibility#

See Drawer Primitive for WAI-ARIA compliance details and keyboard support.