Sheet

1<Sheet>
2  <SheetTrigger asChild>
3    <Button>&gt; FROM RIGHT</Button>
4  </SheetTrigger>
5  <SheetContent side="right">
6    <SheetHeader>
7      <SheetTitle>Right Side Sheet</SheetTitle>
8    </SheetHeader>
9  </SheetContent>
10</Sheet>

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="secondary">&gt; FROM LEFT</Button>
4  </SheetTrigger>
5  <SheetContent side="left">
6    <SheetHeader>
7      <SheetTitle>Left Side Sheet</SheetTitle>
8    </SheetHeader>
9  </SheetContent>
10</Sheet>

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="outline">&gt; FROM TOP</Button>
4  </SheetTrigger>
5  <SheetContent side="top">
6    <SheetHeader>
7      <SheetTitle>Top Side Sheet</SheetTitle>
8    </SheetHeader>
9  </SheetContent>
10</Sheet>

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="ghost">&gt; FROM BOTTOM</Button>
4  </SheetTrigger>
5  <SheetContent side="bottom">
6    <SheetHeader>
7      <SheetTitle>Bottom Side Sheet</SheetTitle>
8    </SheetHeader>
9  </SheetContent>
10</Sheet>

1<Sheet>
2  <SheetTrigger asChild>
3    <Button>&gt; EDIT SETTINGS</Button>
4  </SheetTrigger>
5  <SheetContent>
6    <SheetHeader>
7      <SheetTitle>Edit settings</SheetTitle>
8      <SheetDescription>
9        Update your account settings.
10      </SheetDescription>
11    </SheetHeader>
12    <div className="grid gap-4 py-4">
13      <div className="grid grid-cols-4 items-center gap-4">
14        <Label htmlFor="email" className="text-right">
15          Email
16        </Label>
17        <Input id="email" className="col-span-3" />
18      </div>
19    </div>
20    <SheetFooter>
21      <Button type="submit">&gt; SAVE CHANGES</Button>
22    </SheetFooter>
23  </SheetContent>
24</Sheet>