Slide-Over Drawer

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/modal-drawer

Usage

"use client";

import { useState } from "react";
import { ModalDrawer } from "@/components/modal-drawer";

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

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open drawer
      </button>
      <ModalDrawer
        open={open}
        onClose={() => setOpen(false)}
        title="Notification settings"
        side="right"
      >
        <p>Choose how the workspace reaches you.</p>
      </ModalDrawer>
    </>
  );
}

Props

Customisation

Slide-Over Drawer declares no tokens of its own; the panel and backdrop consume the global semantic tokens through Tailwind utilities, and the slide uses the shared springSoft preset from lib/motion.ts, so retuning that preset retunes every soft-spring component together. The className prop is merged onto the panel, which is the usual place to change its width or padding:

:root {
  --border: oklch(from var(--color-neutral-50) l c h / 0.16);
}

<ModalDrawer
  open={open}
  onClose={() => setOpen(false)}
  title="Notification settings"
  className="max-w-lg p-8"
>
  ...
</ModalDrawer>

Frequently asked questions

Is Slide-Over Drawer free for commercial use?

Yes. Slide-Over Drawer is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is Slide-Over Drawer accessible for keyboard and screen reader users?

Yes. It renders a native dialog element opened with showModal, so the browser provides the focus trap, top layer rendering and Escape handling, and the page behind it becomes inert. The visible title labels the drawer through aria-labelledby, the close button is a real button named Close drawer, background scroll is locked while the drawer is open, and the staggered content is ordinary DOM that screen readers can read at any point during the animation. When the drawer closes, focus returns to the button that opened it immediately, never waiting for the exit animation.

How does the slide and stagger animation work, and what happens with reduced motion?

Motion animates only transform and opacity: the backdrop fades in over 300 milliseconds while the full-height panel slides from the chosen edge to rest on the shared springSoft preset, settling in about half a second. Once the panel is in flight its direct children rise 12 pixels into place with a 50 millisecond stagger that starts 0.15 seconds in, and closing slides the panel out over 0.25 seconds while the backdrop fades. With prefers-reduced-motion enabled the slide and stagger are dropped entirely and both panel and content become plain opacity fades of 150 milliseconds or less.

Related components

• Command Palette
• Fullscreen Takeover Modal
• Spring Dialog