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  Dialog,
3  DialogClose,
4  DialogContent,
5  DialogDescription,
6  DialogFooter,
7  DialogHeader,
8  DialogTitle,
9  DialogTrigger,
10} from "@repo/ui/components/dialog";
11import { Button } from "@repo/ui/components/button";

Usage

1<Dialog>
2  <DialogTrigger asChild>
3    <Button variant="outline">Open</Button>
4  </DialogTrigger>
5  <DialogContent className="sm:max-w-[425px]">
6    <DialogHeader>
7      <DialogTitle>Title</DialogTitle>
8      <DialogDescription>Description</DialogDescription>
9    </DialogHeader>
10    <div>Data content</div>
11    <DialogFooter>
12      <DialogClose asChild>
13        <Button variant="outline">Close</Button>
14      </DialogClose>
15    </DialogFooter>
16  </DialogContent>
17</Dialog>
Date PickerDrawer