Side Sheet
A side panel that sits beside the content, with no overlay.
Preview
Loading...
import { SideSheet, SideSheetMain, SideSheetPanel } from "@/components/ui/SideSheet";
export function SideSheetDemo() {
return (
<div className="h-24 overflow-hidden rounded-sm border border-gray-6">
<SideSheet>
<SideSheetMain>
<div className="bg-gray-2 p-1.5">
<p className="m-0">Page content stays beside the panel.</p>
</div>
</SideSheetMain>
<SideSheetPanel label="Details">
<p className="m-0 font-medium">Details</p>
<p className="m-0">No overlay. The panel sits next to the content.</p>
</SideSheetPanel>
</SideSheet>
</div>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/side-sheetManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the SideSheet component into your components/ui/SideSheet.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function SideSheet({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="side-sheet"
className={cn("flex h-full min-h-0 min-w-0", className)}
{...props}
/>
);
}
function SideSheetMain({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="side-sheet-main"
className={cn("min-w-0 flex-1", className)}
{...props}
/>
);
}
function SideSheetPanel({
className,
open = true,
side = "end",
label = "Side panel",
...props
}: React.ComponentProps<"aside"> & {
open?: boolean;
side?: "start" | "end";
label?: string;
}) {
return (
<aside
aria-label={label}
data-slot="side-sheet-panel"
data-state={open ? "open" : "closed"}
hidden={!open}
className={cn(
"flex w-20 shrink-0 flex-col gap-1 bg-gray-1 p-1.5",
side === "end" ? "order-2 border-s border-gray-6" : "order-1 border-e border-gray-6",
className,
)}
{...props}
/>
);
}
export { SideSheet, SideSheetMain, SideSheetPanel };