Components
Sheet
A sheet component
Preview
Loading...
import { Button } from "@/registry/axon/ui/button";import { Input } from "@/registry/axon/ui/input";import { Label } from "@/registry/axon/ui/label";import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,} from "@/registry/axon/ui/sheet";export default function SheetDemo() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Open</Button> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>Edit profile</SheetTitle> <SheetDescription> Make changes to your profile here. Click save when you're done. </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 defaultValue="Pedro Duarte" id="sheet-demo-name" /> </div> <div className="grid gap-3"> <Label htmlFor="sheet-demo-username">Username</Label> <Input defaultValue="@peduarte" id="sheet-demo-username" /> </div> </div> <SheetFooter> <Button type="submit">Save changes</Button> <SheetClose asChild> <Button variant="outline">Close</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> );}Installation
CLI
npx shadcn@latest add @emberui/sheetyarn shadcn@latest add @emberui/sheetpnpm dlx shadcn@latest add @emberui/sheetbunx --bun shadcn@latest add @emberui/sheetReference
This component is based on the shadcn/ui Sheet component.