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 { Button } from "@repo/ui/components/button";
2import {
3  Sheet as SheetComp,
4  SheetClose,
5  SheetContent,
6  SheetDescription,
7  SheetFooter,
8  SheetHeader,
9  SheetTitle,
10  SheetTrigger,
11} from "@repo/ui/components/sheet";

Usage

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="outline">Open</Button>
4  </SheetTrigger>
5  <SheetContent>
6    <SheetHeader>
7      <SheetTitle>Sheet Title</SheetTitle>
8      <SheetDescription>Sheet Description</SheetDescription>
9    </SheetHeader>
10    <div>Sheet Content</div>
11    <SheetFooter>
12      <SheetClose asChild>
13        <Button variant="outline">Close</Button>
14      </SheetClose>
15    </SheetFooter>
16  </SheetContent>
17</Sheet>
PopoverSkeleton