Drawer

v1.0.0

Slide-out panel for secondary workflows and inspectors.

Import

import { Drawer } from '@meteorack/sdk-react';

How To Use It

Use it for secondary detail views, inspectors, or editing side panels where the main page should remain visible.
Choose a drawer over a modal when users benefit from keeping table rows or page context in view.

Works Well With

Button Table Card

Props

open: boolean

Controls whether the drawer is mounted and visible.

onClose: () => void

Called when the user dismisses the drawer.

title: string

Heading rendered in the drawer header.

children: ReactNode

Scrollable drawer body content.

footer?: ReactNode

Optional sticky footer row for actions.

side?: 'right' | 'left'

Chooses which edge of the viewport the drawer slides from.

className?: string

Optional class name for the drawer content container.

Example

Drawer.tsx

import { useState } from 'react';
import { Drawer, Button, Card } from '@meteorack/sdk-react';

export function PluginInspector() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        View details
      </Button>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Plugin details"
        side="right"
        footer={
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Close
          </Button>
        }
      >
        <Card>
          <p style={{ margin: 0 }}>
            Keep table context visible while reviewing plugin metadata,
            status, or recent activity.
          </p>
        </Card>
      </Drawer>
    </>
  );
}

PreviousModal NextPluginCard