Drawer

Edge-anchored panel that slides in from a side. Same close behavior as Modal.

Drawer is a side-anchored sibling of Modal. Same controlled open / onClose shape, same backdrop and Escape behavior, but the panel sits flush against an edge instead of centering.

Try it live

import { useState } from "react";
import { Drawer } from "@plyxui/comps";
import { Box, Button, Text, Stack } from "@plyxui/primitives";

export default function App() {
const [open, setOpen] = useState(false);
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Button onClick={() => setOpen(true)}>Open drawer</Button>
    <Drawer
      open={open}
      onClose={() => setOpen(false)}
      side="right"
      title="Settings"
      footer={<Button variant="primary" onClick={() => setOpen(false)}>Done</Button>}
    >
      <Stack direction="vertical" gap={3}>
        <Text size="sm">Edit any prop on the left. Try side="left" or side="bottom".</Text>
      </Stack>
    </Drawer>
  </Box>
);
}

API

import { Drawer } from "@plyxui/comps";

const [open, setOpen] = useState(false);

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  side="right"
  title="Settings"
  footer={<Button onClick={() => setOpen(false)}>Done</Button>}
>
  …
</Drawer>

Props

Defaults

Default size is 360 px for left/right and 280–320 px for top/bottom. The inner corners on the side facing the page get a radius.lg so the drawer doesn't feel like it's punching a square hole in the layout.

Native

The native build uses RN Modal for the backdrop and Animated for the slide-in transform. Same prop shape; size is a number only.