A slide over side panel from any edge for filters, settings, inspectors and mobile navigation. Accessible with focus trapping, built on Base UI.
"use client";
import * as React from "react";
import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const Button = React.forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement> & {
variant?: "primary" | "secondary" | "ghost";
leftIcon?: React.ReactNode;
}
>(function Button({ variant = "primary", leftIcon, className, children, ...props }, ref) {
return (
<button
ref={ref}
type="button"
className={cn(
"inline-flex h-9 items-center justify-center gap-2 rounded-[10px] px-4 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] [&_svg]:size-4",
variant === "primary" && "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90",
variant === "secondary" && "border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)] hover:bg-[var(--muted)]",
variant === "ghost" && "text-[var(--foreground)] hover:bg-[var(--muted)]",
className,
)}
{...props}
>
{leftIcon}
{children}
</button>
);
});
function Switch({ label, defaultChecked = false }: { label: string; defaultChecked?: boolean }) {
const [on, setOn] = React.useState(defaultChecked);
return (
<label className="flex cursor-pointer items-center justify-between gap-4 text-sm text-[var(--foreground)]">
{label}
<button
type="button"
role="switch"
aria-checked={on}
onClick={() => setOn((v) => !v)}
className={cn(
"relative h-5 w-9 shrink-0 rounded-full transition-colors",
on ? "bg-[var(--primary)]" : "bg-[var(--muted)]",
)}
>
<span
className={cn(
"absolute top-0.5 left-0.5 size-4 rounded-full bg-[var(--background)] shadow-sm transition-transform",
on && "translate-x-4",
)}
/>
</button>
</label>
);
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
function DemoFrame({
title,
subtitle,
children,
}: {
title: string;
subtitle?: string;
children: React.ReactNode;
}) {
return (
<div className={cn(wensityCardSurfaceClass, "w-full max-w-md p-5")}>
<div className="mb-4 border-b border-[var(--border)] pb-3">
<p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
{title}
</p>
{subtitle ? (
<p className="mt-1 text-[12px] text-[var(--muted-foreground)]">{subtitle}</p>
) : null}
</div>
{children}
<p className="mt-4 text-center text-[11px] text-[var(--muted-foreground)]">
Opens as a full-viewport overlay
</p>
</div>
);
}
function SheetDemo({
side,
persistent,
triggerLabel,
}: {
side: "left" | "right" | "top" | "bottom";
persistent?: boolean;
triggerLabel: string;
}) {
return (
<Sheet persistent={persistent} defaultOpen>
<SheetTrigger asChild>
<Button variant="secondary">{triggerLabel}</Button>
</SheetTrigger>
<SheetContent side={side} accessibilityTitle="Filters">
<SheetHeader>
<SheetTitle>Filters</SheetTitle>
<SheetDescription>Refine the component directory.</SheetDescription>
</SheetHeader>
<SheetBody className="space-y-4">
<Switch defaultChecked label="UI Primitives only" />
<Switch label="Show Pro components" />
<Switch defaultChecked label="Include templates" />
</SheetBody>
<SheetFooter>
<SheetClose asChild>
<Button className="w-full">Apply filters</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
);
}
export function SheetPreview() {
return (
<DemoFrame title="Right sheet" subtitle="Slides in from the edge with drawer easing.">
<SheetDemo side="right" triggerLabel="Open filters" />
</DemoFrame>
);
}
export default function Demo() {
return <SheetPreview />;
}