HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

Background FireworksBackground HexagonBackground HoleBackground StartElement SpringLoadingProgress ScrollText HighlightText RollingText ShimmeringText SplittingText Typing

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Preview

Import

1import {
2  Drawer,
3  DrawerClose,
4  DrawerContent,
5  DrawerDescription,
6  DrawerFooter,
7  DrawerHeader,
8  DrawerTitle,
9  DrawerTrigger,
10} from "@repo/ui/components/drawer";

Usage

1<Drawer>
2  <DrawerTrigger asChild>
3    <Button variant="outline">Open</Button>
4  </DrawerTrigger>
5  <DrawerContent>
6    <div className="w-full">
7      <DrawerHeader>
8        <DrawerTitle>Header</DrawerTitle>
9        <DrawerDescription>Description</DrawerDescription>
10      </DrawerHeader>
11      <div className="text-center">Data Content</div>
12      <DrawerFooter>
13        <DrawerClose asChild>
14          <Button variant="outline">Close</Button>
15        </DrawerClose>
16      </DrawerFooter>
17    </div>
18  </DrawerContent>
19</Drawer>
DialogForm