Drawer

A panel that slides in from an edge — filters, record detail, or mobile navigation.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Button, Drawer } from "@aile.sh/elia";

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

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Open filters
      </Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        title="Filters"
        description="Narrow the evaluation runs in view."
        footer={
          <>
            <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
              Reset
            </Button>
            <Button size="sm" onClick={() => setOpen(false)}>
              Apply
            </Button>
          </>
        }
      >
        <p>Drawer content goes here — form controls, a record, a nav tree.</p>
      </Drawer>
    </>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia