Accordion

Tidy up your content with our Accordion - a neat stack of titles ready to reveal their secrets on a single tap

Example

1import { Accordion } from "@sugarcoat/ui";
2
3<Accordion variant="stacked">
4  <Accordion.Item value="firstItem">
5    <Accordion.Header>First item</Accordion.Header>
6    <Accordion.Content>
7      <Typography.Paragraph>Section Content One</Typography.Paragraph>
8    </Accordion.Content>
9  </Accordion.Item>
10    <Accordion.Item value="secondItem">
11    <Accordion.Header>Second Item</Accordion.Header>
12    <Accordion.Content>
13      <Typography.Paragraph>Section Content Two</Typography.Paragraph>
14    </Accordion.Content>
15  </Accordion.Item>
16</Accordion>;
17

API Reference

It builds on top of Radix-UI Accordion

Component Properties

Accordion

Acts as RadixUI's Accordion.Root. Most of the props available here can be used on the Accordion component

Prop	Type	Default	Explanation
`variant`	`enum`	stacked	The variant style of the accordion list.
`type`	`enum`	single	Determines whether one or multiple items can be opened at the same time.

Accordion.Item

A styled wrapper around RadixUI's Accordion.Item. Check here for the original props available

Accordion.Header

Prop	Type	Default	Explanation
`arrow`	`boolean`	true	(Optional) Show animated arrow on the right of the heading

Accordion.Content

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius