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";

Usage

1<div className="flex flex-wrap gap-3">
2  <Button>Default</Button>
3  <Button variant="secondary">Secondary</Button>
4  <Button variant="destructive">Destructive</Button>
5  <Button variant="outline">Outline</Button>
6  <Button variant="ghost">Ghost</Button>
7  <Button variant="link">Link</Button>
8  <Button variant="secondary" size="icon">
9    <BatteryFull />
10  </Button>
11  <Button variant="outline">
12    <Heart /> With Icon
13  </Button>
14  <Button disabled>
15    <Loader2Icon className="animate-spin" />
16    Loading...
17  </Button>
18</div>
BreadcrumbCarousel