SliderModal

A modal that slides in from any side of the screen with smooth animations, overlay support, keyboard navigation, and full accessibility. Perfect for sidebars, drawers, notifications, and contextual content panels.

Basic Usage

Different Sides

Different Variants

Different Sizes

With Footer

Custom Header

Shopping Cart Example

SliderModal Component

tsx

1"use client";
2import React, { useEffect, useRef } from "react";
3import { X } from "lucide-react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/lib/cn";
6
7const contentVariants = cva([
8  "relative bg-white dark:bg-neutral-900",
9  "shadow-2xl border-0",
10  "flex flex-col",
11  "transition-all duration-300 ease-out",
12  "focus:outline-none",
13], {
14  variants: {
15    side: {
16      left: [
17        "h-full w-full max-w-sm sm:max-w-md lg:max-w-lg",
18        "data-[state=open]:animate-in data-[state=closed]:animate-out",
19        "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
20      ],