DrawerPanel

Drawer layout primitives for composing drawer/panel content without custom CSS.

Default

Usage

import { DrawerPanel, DrawerPanelHeader, DrawerPanelContent, DrawerBody, DrawerPanelFooter } from '@tryvienna/ui'

<DrawerPanel className="w-80 h-96">
  <DrawerPanelHeader title="Issue Details">
    <Button variant="ghost" size="sm">Edit</Button>
  </DrawerPanelHeader>
  <DrawerPanelContent>
    <DrawerBody>
      <p className="text-sm text-muted-foreground">Drawer body content with compact density.</p>
      <Separator className="my-4" />
      <p className="text-sm text-muted-foreground">Additional content section.</p>
    </DrawerBody>
  </DrawerPanelContent>
  <DrawerPanelFooter className="flex items-center justify-end gap-2">
    <Button variant="outline" size="sm">Cancel</Button>
    <Button size="sm">Save</Button>
  </DrawerPanelFooter>
</DrawerPanel>

Examples

Default

Default

<DrawerPanel className="w-80 h-96">
  <DrawerPanelHeader title="Issue Details">
    <Button variant="ghost" size="sm">Edit</Button>
  </DrawerPanelHeader>
  <DrawerPanelContent>
    <DrawerBody>
      <p className="text-sm text-muted-foreground">Drawer body content with compact density.</p>
      <Separator className="my-4" />
      <p className="text-sm text-muted-foreground">Additional content section.</p>
    </DrawerBody>
  </DrawerPanelContent>
  <DrawerPanelFooter className="flex items-center justify-end gap-2">
    <Button variant="outline" size="sm">Cancel</Button>
    <Button size="sm">Save</Button>
  </DrawerPanelFooter>
</DrawerPanel>

API Reference

DrawerPanelHeader

Prop	Type	Default	Description
title	string | undefined	-

DrawerPanelContent

DrawerBody

Prop	Type	Default	Description
density	ContentDensity	compact

DrawerPanelFooter

Data Attributes

Component	data-slot
DrawerPanel	"drawer-panel"
DrawerPanelHeader	"drawer-panel-header"
DrawerPanelContent	"drawer-panel-content"
DrawerBody	"drawer-body"
DrawerPanelFooter	"drawer-panel-footer"