Status
Right Drawer

This drawer slides in from the right. Use it for detail panels, filter sidebars, or any auxiliary content.

Left Drawer

This one slides in from the left — useful for navigation menus or step-by-step flows.

Basic Modal

This is a basic modal dialog. Click the X button or the backdrop to close it. On mobile it becomes a bottom sheet you can drag to dismiss.

Create Account
Confirm deletion

Are you sure you want to delete this item? This action cannot be undone.

Overlays

Modal dialogs and popover dropdowns. Both use GSAP for smooth entrance/exit animations. On mobile, modals become bottom sheets with drag-to-dismiss.

Modal

kd-modal uses Teleport to render at the body level. Pass :visible and listen for the @close event.

Popover

kd-popover positions a floating panel relative to its trigger. It auto-adjusts to stay within the viewport.

Drawer

kd-drawer slides in from either side. It uses Teleport and GSAP — same pattern as modals.