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 { Switch } from "@repo/ui/components/switch";
2import { Switch as SwitchAnimate } from "@repo/ui/animate-ui/switch";

Usage

1<div className="flex gap-2 flex-col">
2  <div className="flex items-center space-x-2">
3    <Switch id="default-switch" />
4    <Label htmlFor="default-switch">Default Switch</Label>
5  </div>
6  <div className="flex items-center space-x-2">
7    <Switch id="animation-switch" />
8    <Label htmlFor="animation-switch">Animation Switch</Label>
9  </div>
10</div>
SonnerTable