snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/radix/drawer-sides.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/styles/radix-nova/ui/drawer"
+
+const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function DrawerWithSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {DRAWER_SIDES.map((side) => (
+        <Drawer
+          key={side}
+          direction={
+            side === "bottom" ? undefined : (side as "top" | "right" | "left")
+          }
+        >
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
+            <DrawerHeader>
+              <DrawerTitle>Move Goal</DrawerTitle>
+              <DrawerDescription>
+                Set your daily activity goal.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="no-scrollbar overflow-y-auto px-4">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p
+                  key={index}
+                  className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <DrawerFooter>
+              <Button>Submit</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </div>
+  )
+}