Overview
Theme
Installation
Components
Accordion
Alert
Avatar
Badge
Breadcrumbs
Button
Checkbox
Checkbox Card
Checkbox Group
Copy to clipboard button
Dialog
Drawer
Dropdown Menu
Fullscreen Dialog
Icon Button
Icon with background
Link Button
Loader
Navbar
Progress
Radio Card Group
Radio Group
Select
Sidebar
Skeleton Circle
Skeleton Text
Slider
Stepper
Switch
Table
Tabs
Text Area
Text Field
Toast
Toggle Group
Tooltip
Vertical Stepper

Drawer

Displays content in a panel that slides in from the side of the screen.
Payment to Uber
Details
NameJohn Thomas
Merchant addressSan Francisco
CategoryRideshare / Taxi
Payment
Amount$13.42
Card number1412
Purchased atJanuary 3, 2023
Payment posted atJan 4, 2023, 8:33 AM
Memo
Additional details
Properties
No properties to configure
Example
Source Code
Installation
"use client";

import React from "react";
import { TextField } from "@/subframe/components/TextField";
import { Button } from "@/subframe/components/Button";
import { Drawer } from "@/subframe/components/Drawer";

function DrawerExample() {
  return (
    <Drawer>
      <Drawer.Content>
        <div className="flex h-full w-full grow shrink-0 basis-0 flex-col items-start gap-8 pt-8 pr-8 pb-8 pl-8">
          <span className="text-heading-3 font-heading-3 text-default-font">
            Payment to Uber
          </span>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Details
            </span>
            <div className="flex flex-col items-start gap-2">
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Name
                </span>
                <span className="text-body font-body text-default-font">
                  John Thomas
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Merchant address
                </span>
                <span className="text-body font-body text-default-font">
                  San Francisco
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Category
                </span>
                <span className="text-body font-body text-default-font">
                  Rideshare / Taxi
                </span>
              </div>
            </div>
          </div>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Payment
            </span>
            <div className="flex flex-col items-start gap-2">
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Amount
                </span>
                <span className="text-body font-body text-default-font">
                  $13.42
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Card number
                </span>
                <span className="text-body font-body text-default-font">
                  1412
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Purchased at
                </span>
                <span className="text-body font-body text-default-font">
                  January 3, 2023
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Payment posted at
                </span>
                <span className="text-body font-body text-default-font">
                  Jan 4, 2023, 8:33 AM
                </span>
              </div>
            </div>
          </div>
          <div className="flex w-full flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Memo
            </span>
            <TextField
              className="h-auto w-full flex-none"
              label="Additional details"
              helpText=""
            />
          </div>
        </div>
        <div className="flex h-full w-full grow shrink-0 basis-0 flex-col items-end justify-end gap-2 pt-2 pr-8 pb-8 pl-8">
          <Button icon="FeatherCheck">Save</Button>
        </div>
      </Drawer.Content>
    </Drawer>
  );
}

export default DrawerExample;

Props

Drawer
Content
Prop
Type
Default
Additional info
children
React.ReactNode
—
open
boolean
—
Whether the dialog is currently opened.
onOpenChange
(open: boolean) => void
—
Handler called when opened or closed.

Examples

Basics

Use open and onOpenChange props to control the open state.