Component · C-032

Drawer

A side panel for editing or filtering without losing the table behind it. It keeps context, enters from one side and returns focus on close.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/drawer.json

Requirements

Portaled popup: The panel mounts inside BaseDrawer.Portal with its backdrop. Do not nest it in overflowing containers or it will be clipped.

Accessibility

Title and description name the panel and explain its purpose.
Focus enters the panel, stays trapped, and returns to the trigger when Escape closes it.
The header close control is an icon, so closeLabel is required.
The swipe gesture follows side and does not replace the close button.

Read the whole page