A swipeable panel built with the Base UI Drawer engine.
Preview
Usage
Root defaults to swipeDirection="down", which opens the bottom-side layout. Use up, left or right for a different swipe direction. The wrapper does not expose a Radix/Vaul direction prop.
Composition
Content owns Portal, Overlay and Viewport. Compose Header, Title, Description, Footer and Close inside it. The example turns off the automatic close and supplies DrawerClose with Done. Root provides the inherited integer scale.
Interaction and limits
DrawerClose defaults to Done. Drag, snap and focus behavior come from Base UI Drawer. The edge arrangement and gestures are web adaptations; only the declared PopupScreen panel and label constituents have native pixel coverage.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
import * as React from "react";
import { Button } from "./button";
import { minecraftCardSprite } from "./minecraft-card-sprite";
import { CardScaleContext } from "./minecraft-card-text";
import { MinecraftDialogBackdrop } from "./minecraft-dialog-backdrop";
import {
MinecraftDisclosureText,
MinecraftDisclosureHeading,