HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

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

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Preview

Photo by Drew Beamer

Import

1import { AspectRatio } from "@repo/ui/components/aspect-ratio";

Usage

1<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
2  <Image
3    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
4    alt="Photo by Drew Beamer"
5    fill
6    className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
7  />
8</AspectRatio>
AccordionBadge