Detail Drawer

Row context

Acme Co.Enterprise customer · Active

import {
  DetailDrawer,
  DetailDrawerContent,
  DetailDrawerTrigger,
} from "@/components/patterns/detail-drawer";
import { Button } from "@/components/ui/button";
import {
  ResourceList,
  ResourceListContent,
  ResourceListItem,
  ResourceListMeta,
  ResourceListTitle,
} from "@/components/ui/resource-list";

export function Example() {
  return (
    <ResourceList variant="soft">
      <ResourceListItem>
        <ResourceListContent>
          <ResourceListTitle>Acme Co.</ResourceListTitle>
        </ResourceListContent>
        <ResourceListMeta>
          <DetailDrawer>
            <DetailDrawerTrigger render={<Button size="sm" variant="outline" />}>
              Details
            </DetailDrawerTrigger>
            <DetailDrawerContent showCloseButton>{/* Customer details */}</DetailDrawerContent>
          </DetailDrawer>
        </ResourceListMeta>
      </ResourceListItem>
    </ResourceList>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/detail-drawer

Import

import {
  DetailDrawer,
  DetailDrawerBody,
  DetailDrawerClose,
  DetailDrawerContent,
  DetailDrawerDescription,
  DetailDrawerFooter,
  DetailDrawerHeader,
  DetailDrawerTitle,
  DetailDrawerTrigger,
} from "@/components/patterns/detail-drawer";

Need the machine-readable source metadata? View registry JSON.

Usage

DetailDrawer is a right-side context panel for inspecting a row or entity. Keep edit flows in Sheet.

import {
  DetailDrawer,
  DetailDrawerContent,
  DetailDrawerTrigger,
} from "@/components/patterns/detail-drawer";
import { Button } from "@/components/ui/button";
import {
  ResourceList,
  ResourceListContent,
  ResourceListItem,
  ResourceListMeta,
  ResourceListTitle,
} from "@/components/ui/resource-list";

export function Example() {
  return (
    <ResourceList variant="soft">
      <ResourceListItem>
        <ResourceListContent>
          <ResourceListTitle>Acme Co.</ResourceListTitle>
        </ResourceListContent>
        <ResourceListMeta>
          <DetailDrawer>
            <DetailDrawerTrigger render={<Button size="sm" variant="outline" />}>
              Details
            </DetailDrawerTrigger>
            <DetailDrawerContent showCloseButton>{/* Customer details */}</DetailDrawerContent>
          </DetailDrawer>
        </ResourceListMeta>
      </ResourceListItem>
    </ResourceList>
  );
}

Purpose

Detail Drawer is a registry:block for inspecting contextual details about a row or entity in a right-side panel. It uses the native Drawer primitive; use Sheet for edit forms with a save-or-cancel contract.

API Reference

Use Detail Drawer for inspection, history, related tasks and entity context, not irreversible decisions.
Keep title and description in the header, scannable details in the body, and secondary close or follow-up actions in the footer.
Triggers remain visible buttons or clearly focusable row actions.
Provide a close path through showCloseButton, DetailDrawerClose or both.
Use Sheet when the primary task is editing and saving a form.

Motion

Drawer swipe, edge position and dismissal motion remain native to the Drawer primitive.
Do not copy Sheet motion onto Detail Drawer. Global reduced motion remains active through the underlying primitive.

Accessibility

Keep the trigger visible in the row or entity context that opens the drawer.
Provide a descriptive title and, when useful, a description that identifies the inspected entity.
Provide an explicit close path through showCloseButton, DetailDrawerClose or both, and preserve the native Drawer focus and dismissal behavior.

Implementation Guidance

Compose Detail Drawer from its named slots and keep product details in consumer content.
Use Alert Dialog for irreversible confirmation and Sheet for create or edit workflows.
Do not replace the Drawer portal, focus, swipe or dismissal behavior.

Registry

Source Contract

Registry item: detail-drawer

Files

src/components/patterns/detail-drawer.tsx to components/patterns/detail-drawer.tsx

Registry dependencies: @siteplane/base, @siteplane/drawer