HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

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

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Preview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur veritatis aliquam earum neque ex, reprehenderit velit laudantium non. Dolor nemo consequuntur dolorem tempora esse maxime eum, excepturi similique officiis?

Import

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@repo/ui/components/accordion";

Usage

1<Accordion
2  type="single"
3  collapsible
4  className="w-full"
5  defaultValue="item-1"
6>
7  <AccordionItem value="item-1">
8    <AccordionTrigger>Trigger 1</AccordionTrigger>
9    <AccordionContent>
10      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur
11      veritatis aliquam earum neque ex, reprehenderit velit laudantium non.
12      Dolor nemo consequuntur dolorem tempora esse maxime eum, excepturi
13      similique officiis?
14    </AccordionContent>
15  </AccordionItem>
16  <AccordionItem value="item-2">
17    <AccordionTrigger>Trigger 2</AccordionTrigger>
18    <AccordionContent>
19      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur
20      veritatis aliquam earum neque ex, reprehenderit velit laudantium non.
21      Dolor nemo consequuntur dolorem tempora esse maxime eum, excepturi
22      similique officiis?
23    </AccordionContent>
24  </AccordionItem>
25  <AccordionItem value="item-3">
26    <AccordionTrigger>Trigger 3</AccordionTrigger>
27    <AccordionContent>
28      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur
29      veritatis aliquam earum neque ex, reprehenderit velit laudantium non.
30      Dolor nemo consequuntur dolorem tempora esse maxime eum, excepturi
31      similique officiis?
32    </AccordionContent>
33  </AccordionItem>
34</Accordion>
CSS Grid LayoutAspect Ratio