Side Panel
Sliding side panel with customizable positioning
panel
"use client"
import { useState } from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/vritti/button"
import { SidePanel } from "@/components/vritti/side-panel"
export function SidePanelExample() {
const [panelOpen, setPanelOpen] = useState(false)
const handlePanelOpen = () => {
setPanelOpen(!panelOpen)
}
const renderButton = (handleToggle: () => void) => (
<div
className={cn(
"flex items-center w-full justify-start pr-4 md:pl-4 py-1 md:py-1",
panelOpen ? "pr-3" : ""
)}
>
<p className="text-xl font-black tracking-tight text-gray-900 sm:text-3xl">
<span className="bg-gradient-to-t from-neutral-200 to-stone-300 bg-clip-text font-brand text-xl font-bold text-transparent sm:text-6xl">
panel
</span>
</p>
<Button
className="rounded-r-[33px] py-8 ml-2"
onClick={handlePanelOpen}
variant="secondary"
>
{panelOpen ? "close" : "open"}
</Button>
</div>
)
return (
<div className="w-full max-w-4xl">
<div className="min-h-[500px] flex flex-col justify-center border border-dashed rounded-lg space-y-4">
<SidePanel
panelOpen={panelOpen}
handlePanelOpen={handlePanelOpen}
renderButton={renderButton}
>
{panelOpen && (
<div className="flex items-center justify-center w-full h-[300px] md:h-[500px] rounded-2xl bg-muted/50 border border-border p-8">
<div className="text-center space-y-4">
<h3 className="text-2xl font-bold">Side Panel Content</h3>
<p className="text-muted-foreground max-w-sm">
This panel slides open from the side with smooth spring
animations. Click the button to toggle it.
</p>
</div>
</div>
)}
</SidePanel>
</div>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/side-panel"