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  HoverCard as HoverCardComp,
4  HoverCardContent,
5  HoverCardTrigger,
6} from "@repo/ui/components/hover-card";

Usage

1<HoverCard>
2  <HoverCardTrigger asChild>
3    <Button>Hover Card</Button>
4  </HoverCardTrigger>
5  <HoverCardContent className="w-60">
6    <div className="flex justify-between gap-4">Hover Card Content</div>
7  </HoverCardContent>
8</HoverCard>
FormPagination