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  Popover as PopoverComp,
4  PopoverContent,
5  PopoverTrigger,
6} from "@repo/ui/components/popover";

Usage

1<Popover>
2  <PopoverTrigger asChild>
3    <Button variant="outline">Open</Button>
4  </PopoverTrigger>
5  <PopoverContent className="w-80">
6    <div>Popover Content</div>
7  </PopoverContent>
8</Popover>
PaginationSheet