Drawer

Stable

Touch-friendly, gesture-driven slideout tray powered by Vaul, supporting left/right/bottom/top trajectories, neon cyber borders, and acrylic glassmorphic sheets.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Drawer, 
  DrawerTrigger, 
  DrawerContent, 
  DrawerHeader, 
  DrawerTitle, 
  DrawerDescription, 
  DrawerFooter, 
  DrawerClose 
} from '@siberui/react';

Basic Edge Directions (Left, Right, Bottom, Top)

The direction prop controls screen entry edge: right, left, bottom, or top.

tsx

<div className="flex flex-wrap gap-4 items-center justify-center">
  {/* Right Drawer */}
  <Drawer direction="right">
    <DrawerTrigger asChild>
      <Button variant="secondary" leftIcon={<PanelRight className="h-4 w-4" />}>
        SLIDE RIGHT
      </Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Cluster Settings</DrawerTitle>
        <DrawerDescription>Configure active node egress policies.</DrawerDescription>
      </DrawerHeader>
      <div className="p-4 flex-1 space-y-3 font-mono text-xs text-slate-300">
        <p>&gt; Egress Gateway: 10.240.0.1</p>
        <p>&gt; MTU Payload: 9000 Jumbo Frames</p>
      </div>
      <DrawerFooter>
        <DrawerClose asChild>
          <Button variant="ghost">CLOSE</Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>

  {/* Left Drawer */}
  <Drawer direction="left">
    <DrawerTrigger asChild>
      <Button variant="secondary" leftIcon={<PanelLeft className="h-4 w-4" />}>
        SLIDE LEFT
      </Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Subnet Navigation</DrawerTitle>
      </DrawerHeader>
      <div className="p-4 flex-1 space-y-2 font-mono text-xs text-slate-300">
        <p className="text-cyan-400 font-bold">[01] ORBITAL CLUSTER</p>
        <p>[02] GROUND RELAY ARRAY</p>
        <p>[03] CRYPTOGRAPHIC HSM</p>
      </div>
    </DrawerContent>
  </Drawer>

  {/* Bottom Sheet */}
  <Drawer direction="bottom">
    <DrawerTrigger asChild>
      <Button variant="secondary" leftIcon={<PanelBottom className="h-4 w-4" />}>
        SLIDE BOTTOM
      </Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Diagnostics Console</DrawerTitle>
        <DrawerDescription>Real-time packet capture stream.</DrawerDescription>
      </DrawerHeader>
      <div className="p-4 max-w-xl mx-auto w-full font-mono text-xs text-emerald-400 space-y-1">
        <p>&gt; [14:02:48] CRC32 CHECKSUM VERIFIED</p>
        <p>&gt; [14:02:49] INGESTING FRAME 0x4B21... OK</p>
      </div>
    </DrawerContent>
  </Drawer>
</div>

Neon Cybernetic Telemetry Drawer

Pass variant="neon" to apply cyan laser perimeter lighting, illuminated grab bars, and monospace headers.

tsx

<Drawer variant="neon" direction="right">
  <DrawerTrigger asChild>
    <Button variant="neon" glow leftIcon={<Cpu className="h-4 w-4" />}>
      INSPECT NODE TELEMETRY
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>NODE_ALPHA_DATA</DrawerTitle>
      <DrawerDescription>High-frequency telemetry stream.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4 flex-1 space-y-3 font-mono text-xs text-cyan-400/80">
      <div className="p-3 rounded-lg bg-black/40 border border-cyan-500/30 space-y-1">
        <p className="text-slate-400">CLOCK SPEED: 5.8 GHz</p>
        <p className="text-cyan-300 font-bold">CORE TEMP: 48.2°C [NOMINAL]</p>
      </div>
    </div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button variant="neon" glow className="w-full">DISMISS</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Frosted Cyber-Glass Bottom Tray

Layered acrylic drawer with circuit texture substrates and laser sweeps.

tsx

<Drawer variant="glass" direction="bottom">
  <DrawerTrigger asChild>
    <Button variant="glass" leftIcon={<Sliders className="h-4 w-4 text-cyan-400" />}>
      OPEN GLASS TRAY
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle className="flex items-center gap-2">
        <Sliders className="h-4 w-4 text-cyan-400" />
        Subsystem Matrix Control
      </DrawerTitle>
      <DrawerDescription>Quick actions and sensor sensitivity calibration.</DrawerDescription>
    </DrawerHeader>
    <div className="p-6 max-w-xl mx-auto w-full space-y-3 font-mono text-xs">
      <div className="p-3 rounded-lg border border-white/10 bg-white/[0.03] flex justify-between items-center">
        <span className="text-slate-300">Optical Laser Sync</span>
        <Badge variant="glass" dot dotColor="cyan">ACTIVE</Badge>
      </div>
      <div className="p-3 rounded-lg border border-white/10 bg-white/[0.03] flex justify-between items-center">
        <span className="text-slate-300">Carrier Bandwidth</span>
        <span className="text-cyan-400 font-bold">4.8 GB/s</span>
      </div>
    </div>
  </DrawerContent>
</Drawer>

Tactical HUD Diagnostics Drawer Card

Composite mission defense card with integrated slideout drawer actions.

HARDWARE DIAGNOSTICS

READY

Slide out comprehensive telemetry diagnostics.

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">HARDWARE DIAGNOSTICS</CardTitle>
      <Badge variant="neon" size="sm">READY</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Slide out comprehensive telemetry diagnostics.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <Drawer variant="neon" direction="right">
      <DrawerTrigger asChild>
        <Button variant="neon" glow className="w-full">
          OPEN DIAGNOSTICS TRAY
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>TACTICAL_DIAGNOSTICS</DrawerTitle>
          <DrawerDescription>Full telemetry dump of Sector 09.</DrawerDescription>
        </DrawerHeader>
        <div className="p-4 flex-1 space-y-2 font-mono text-xs text-slate-300">
          <p>&gt; VOLTAGE RAIL 12V: 12.04V [OK]</p>
          <p>&gt; PACKET LOSS: 0.00%</p>
          <p className="text-emerald-400">&gt; ALL SUBSYSTEMS NOMINAL</p>
        </div>
      </DrawerContent>
    </Drawer>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
direction	Edge of the viewport the drawer slides from.	"top" \| "bottom" \| "left" \| "right"	"right"
variant	Visual style propagated across drawer content and grab handles.	"default" \| "neon" \| "glass"	"default"
shouldScaleBackground	Whether background surface scales down when drawer opens on mobile.	boolean	true

Accessibility

Touch Gestures: Supports touch swipe gestures to dismiss on mobile and tablet touchscreens.

Best Practices

Direction Context: Use direction="bottom" on mobile interfaces for bottom sheets and direction="right" for desktop detail inspect panels.