Accordion
Accordion is set of components that allow you to create toggleable content.
Accordion- The main component that wraps the accordion items with context.AccordionItem- The single item component that wraps the trigger and content.AccordionTrigger- The trigger component that opens the item.AccordionContent- The content component that is shown when the trigger is clicked.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@dreamy-ui/react";Hi!
Hi!
Hi!
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>You can allow multiple open items by using the allowMultiple prop.
Hi!
Hi!
Hi!
<Accordion allowMultiple>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>You can allow toggle single item by using the allowToggle prop. With allowMultiple prop, it will be always possible to toggle them.
Hi!
Hi!
Hi!
<Accordion allowToggle>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>You can control the Accordion by using the onValueChange prop.
Hi!
Hi!
Hi!
export function ControlledAccordion() {
const [value, setValue] = useState<number | number[]>(0);
return (
<Accordion
index={value}
onChange={(i) => setValue(i)}
>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
);
}Hi!
Hi!
Hi!
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>
<HStack>
<Icon as={PiConfetti} color="fg.medium" />
<Text>Item {index + 1}</Text>
</HStack>
</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>You can change the variant of the Accordion by using the variant prop.
Outline
Hi!
Hi!
Hi!
Solid
Hi!
Hi!
Hi!
Subtle
Hi!
Hi!
Hi!
<VStack w="full" gap={6}>
<Flex col gap={2}>
<Text bold>Outline</Text>
<Accordion variant="outline">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Solid</Text>
<Accordion variant="solid">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Subtle</Text>
<Accordion variant="subtle">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
</VStack>You can change the size of the Accordion by using the size prop.
Small
Hi!
Hi!
Hi!
Medium
Hi!
Hi!
Hi!
Large
Hi!
Hi!
Hi!
<Text bold>Small</Text>
<Accordion size="sm">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold>Medium</Text>
<Accordion size="md">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold>Large</Text>
<Accordion size="lg">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>