Components
Loading preview...
A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and responsive UI layouts.
npx shadcn@latest add https://21st.dev/r/sshahaider/sheetimport React from 'react';
import { cn } from '@/lib/utils';
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
export default function DemoOne() {
return (
<div className="relative flex min-h-screen w-full items-center justify-center">
<div
aria-hidden="true"
className={cn(
'pointer-events-none -z-10 absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full',
'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
'blur-[30px]',
)}
/>
<Sheet>
<SheetTrigger asChild>
<Button>Open Sheet</Button>
</SheetTrigger>
<SheetContent showClose={true}>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here.
</SheetDescription>
</SheetHeader>
<div className="grid flex-1 auto-rows-min gap-6 px-4">
<div className="grid gap-3">
<Label htmlFor="sheet-demo-name">Name</Label>
<Input id="sheet-demo-name" defaultValue="Shaban" />
</div>
<div className="grid gap-3">
<Label htmlFor="sheet-demo-username">Username</Label>
<Input id="sheet-demo-username" defaultValue="@shaban" />
</div>
</div>
<SheetFooter>
<SheetClose asChild>
<Button variant="outline">Cancel</Button>
</SheetClose>
<SheetClose asChild>
<Button>Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
{/* <NavigationMenuDemo /> */}
</div>
);
}