Accordion
Accordion is set of components that allow you to create toggleable content.
pnpm dlx dreamy add accordionAccordion is a component that allows you to toggle the visibility of content.
Hi!
Hi!
Hi!
<Accordion.Root>
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>You can allow multiple open items by using the allowMultiple prop.
Hi!
Hi!
Hi!
<Accordion.Root allowMultiple>
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>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.Root allowToggle>
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>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.Root
index={value}
onChange={(i) => setValue(i)}
>
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
);
}Hi!
Hi!
Hi!
<Accordion.Root>
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>
<HStack>
<Icon as={PiConfetti} color="fg.medium" />
<Text>Item {index + 1}</Text>
</HStack>
</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>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.Root variant="outline">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</Flex>
<Flex col gap={2}>
<Text bold>Solid</Text>
<Accordion.Root variant="solid">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</Flex>
<Flex col gap={2}>
<Text bold>Subtle</Text>
<Accordion.Root variant="subtle">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</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.Root size="sm">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<Text bold>Medium</Text>
<Accordion.Root size="md">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<Text bold>Large</Text>
<Accordion.Root size="lg">
{Array.from({ length: 3 }).map((_, index) => (
<Accordion.Item key={index}>
<Accordion.Trigger>Item {index + 1}</Accordion.Trigger>
<Accordion.Content>Hi!</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>