Saaj UI

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Preview

Installation

npx saaj add Accordion

Usage

MyAccordion.tsx
import React from 'react';
 
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  AccordionIndicator,
} from '@/components/ui/Accordion';
import { Icon } from '@/components/ui/Icon';
import { Text } from '@/components/ui/Text';
 
 
export function MyAccordion() {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionTrigger>
          <Text variant="labelMd" highContrast>
            What is Lorem Ipsum?
          </Text>
          <AccordionIndicator>
            <Icon name={'chevron-down'} />
          </AccordionIndicator>
        </AccordionTrigger>
        <AccordionContent>
          <Text variant="bodySm">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.
          </Text>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

On this page