Chewypixel component
Sheet
A side panel that slides in from any edge of the screen over a light overlay.
Installation
npx shadcn@latest add https://chewypixel.io/r/sheet.jsonUsage
import { Button } from "@/components/ui/button";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export function BagSheet() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">View bag</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Your bag</SheetTitle>
<SheetDescription>Gumdrops, taffy and sour belts.</SheetDescription>
</SheetHeader>
<SheetFooter>
<SheetClose asChild>
<Button>Check out</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
);
}Props
openWhether it's open, when controlled. Goes on Sheet.
boolean
onOpenChangeCalled when it opens or closes. Goes on Sheet.
(open: boolean) => void
sideThe edge it slides in from. Goes on SheetContent.
"top" | "right" | "bottom" | "left" = "right"
containerClassNameClasses for the box that positions the panel, such as a wider max width. Goes on SheetContent.
string
Released under the MIT License.
More components
- Dropdown MenuA frosted menu that scales out of its trigger and animates out when it closes.
- CommandA command palette whose highlight glides between results as you move through them.
- CollapsibleA section that opens and closes by animating its height.
- Image LightboxA thumbnail that flies out to a larger view in the middle of the screen, over a lightly blurred page.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.