Accordion
A collapsible list for displaying and organizing information.
The Accordion component is a versatile and easy-to-use component that allows you to display a list of headers, each of which can be clicked to expand or collapse the associated content. This makes it a great choice for organizing content in a compact and user-friendly way.
import { Accordion } from '@rewind-ui/core';
function App() {
return (
<Accordion defaultItem="item-1" activeColor="purple" bordered={false} shadow="base" shadowColor="gray">
<Accordion.Item anchor="item-1">
<Accordion.Header>Header</Accordion.Header>
<Accordion.Body>Body</Accordion.Body>
</Accordion.Item>
<Accordion.Item anchor="item-2">
<Accordion.Header>Header</Accordion.Header>
<Accordion.Body>Body</Accordion.Body>
</Accordion.Item>
<Accordion.Item anchor="item-3">
<Accordion.Header>Header</Accordion.Header>
<Accordion.Body>Body</Accordion.Body>
</Accordion.Item>
</Accordion>
);
}Import
Import the Accordion component using the following import statement.
import { Accordion } from '@rewind-ui/core';Colors
The Accordion component comes with four colors: white, gray, zinc and slate.
<View>
<Accordion color="white">
// ...
</Accordion>
<Accordion color="gray">
// ...
</Accordion>
<Accordion color="zinc">
// ...
</Accordion>
<Accordion color="slate">
// ...
</Accordion>
</View>Tones & Active item colors
The Accordion component comes with two tones: solid and light.
Moreover, the active item can be styled with the activeColor prop.
The available activeColor values are: white, blue, red, green, yellow, purple, gray, dark and black.
Solid
<View>
<Accordion tone="solid" activeColor="white">
// ...
</Accordion>
<Accordion tone="solid" activeColor="blue">
// ...
</Accordion>
<Accordion tone="solid" activeColor="red">
// ...
</Accordion>
<Accordion tone="solid" activeColor="green">
// ...
</Accordion>
<Accordion tone="solid" activeColor="yellow">
// ...
</Accordion>
<Accordion tone="solid" activeColor="purple">
// ...
</Accordion>
<Accordion tone="solid" activeColor="gray">
// ...
</Accordion>
<Accordion tone="solid" activeColor="dark">
// ...
</Accordion>
<Accordion tone="solid" activeColor="black">
// ...
</Accordion>
</View>Light
<View>
<Accordion tone="light" activeColor="white">
// ...
</Accordion>
<Accordion tone="light" activeColor="blue">
// ...
</Accordion>
<Accordion tone="light" activeColor="red">
// ...
</Accordion>
<Accordion tone="light" activeColor="green">
// ...
</Accordion>
<Accordion tone="light" activeColor="yellow">
// ...
</Accordion>
<Accordion tone="light" activeColor="purple">
// ...
</Accordion>
<Accordion tone="light" activeColor="gray">
// ...
</Accordion>
<Accordion tone="light" activeColor="dark">
// ...
</Accordion>
<Accordion tone="light" activeColor="black">
// ...
</Accordion>
</View>Sizes
Available size values are: sm, md, lg and xl.
<View>
<Accordion size="sm">
// ...
</Accordion>
<Accordion size="md">
// ...
</Accordion>
<Accordion size="lg">
// ...
</Accordion>
<Accordion size="xl">
// ...
</Accordion>
</View>Radiuses
Available radius values are: none, sm, base, md and lg.
<View>
<Accordion radius="none">
// ...
</Accordion>
<Accordion radius="sm">
// ...
</Accordion>
<Accordion radius="base">
// ...
</Accordion>
<Accordion radius="md">
// ...
</Accordion>
<Accordion radius="lg">
// ...
</Accordion>
</View>Shadows
Available shadow values are: none, sm, base, md, lg and xl.
<View>
<Accordion shadow="none">
// ...
</Accordion>
<Accordion shadow="sm">
// ...
</Accordion>
<Accordion shadow="base">
// ...
</Accordion>
<Accordion shadow="md">
// ...
</Accordion>
<Accordion shadow="lg">
// ...
</Accordion>
<Accordion shadow="xl">
// ...
</Accordion>
</View>Shadow colors
Available shadowColor values are: none, gray, zinc and slate.
<View>
<Accordion shadow="lg" shadowColor="none">
// ...
</Accordion>
<Accordion shadow="lg" shadowColor="gray">
// ...
</Accordion>
<Accordion shadow="lg" shadowColor="zinc">
// ...
</Accordion>
<Accordion shadow="lg" shadowColor="slate">
// ...
</Accordion>
</View>Borders
Borders can be added to the Accordion component by using the bordered prop.
<View>
<Accordion bordered={true}>
// ...
</Accordion>
<Accordion bordered={false}>
// ...
</Accordion>
</View>Ring
You can add a ring to the accordion by setting the withRing prop to true.
<View>
<Accordion withRing={true}>
// ...
</Accordion>
<Accordion withRing={false}>
// ...
</Accordion>
</View>Ref
Accordion, Accordion.Header and Accordion.Body elements support the ref prop, which allows for obtaining a reference to the associated underlying HTML elements.
import { useRef } from 'react';
import { Accordion } from '@rewind-ui/core';
function App() {
const accordionRef = useRef<HTMLDivElement>(null);
const accordionHeaderRef = useRef<HTMLButtonElement>(null);
const accordionBodyRef = useRef<HTMLDivElement>(null);
return (
<Accordion ref={accordionRef}>
<Accordion.Item anchor="item-1">
<Accordion.Header ref={accordionHeaderRef}>Header</Accordion.Header>
<Accordion.Body ref={accordionBodyRef}>Some text...</Accordion.Body>
</Accordion.Item>
</Accordion>
);
}Examples
Full width
<View>
<Accordion className="w-full" defaultItem="item-1">
<Accordion.Item anchor="item-1">
<Accordion.Header>Header</Accordion.Header>
<Accordion.Body>Some text...</Accordion.Body>
</Accordion.Item>
<Accordion.Item anchor="item-2">
<Accordion.Header>Header</Accordion.Header>
<Accordion.Body>Some more text...</Accordion.Body>
</Accordion.Item>
</Accordion>
</View>Classname overrides
To avoid overwriting the default styles, the className prop can be used to override the default classes. Rewind-UI is using tailwind-merge to merge the default classes with the classes you provide in the className prop and resolve any possible conflicts.
<View>
<Accordion activeColor="black" bordered={false} defaultItem="item-2">
<Accordion.Item anchor="item-1">
<Accordion.Header className="font-semibold">Semi-bold header</Accordion.Header>
<Accordion.Body className="text-red-700 bg-red-50">Some red text on a red background...</Accordion.Body>
</Accordion.Item>
<Accordion.Item anchor="item-2">
<Accordion.Header className="font-semibold">Header</Accordion.Header>
<Accordion.Body className="text-green-700 bg-green-50">Some green text on a green background...</Accordion.Body>
</Accordion.Item>
</Accordion>
</View>API Reference
Properties
Accordion
| Prop | Type | Description | Default |
|---|---|---|---|
| activeColor | AccordionActiveColor | Sets the color of the active accordion header | dark |
| bordered | boolean | Adds borders | true |
| color | AccordionColor | Sets the accordion body color | white |
| defaultItem | string | Sets which item needs to be open by default | undefined |
| radius | AccordionRadius | Sets the border radius | md |
| shadow | AccordionShadow | Sets the shadow size | none |
| shadowColor | AccordionShadowColor | Sets the shadow color | none |
| size | AccordionSize | Sets the accordion size | md |
| tone | AccordionTone | Sets the accordion tone | solid |
| withRing | boolean | Shows a ring around the active accordion header on active state | true |
Accordion.Item
| Prop | Type | Description | Default |
|---|---|---|---|
| anchor | string | Sets the accordion item anchor value | undefined |
Types
type AccordionActiveColor =
| 'white'
| 'blue'
| 'red'
| 'green'
| 'yellow'
| 'purple'
| 'gray'
| 'dark'
| 'black';type AccordionColor = 'white' | 'gray' | 'slate' | 'zinc';type AccordionRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';type AccordionShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';type AccordionShadowColor = 'none' | 'gray' | 'slate' | 'zinc';type AccordionSize = 'sm' | 'md' | 'lg' | 'xl';type AccordionTone = 'solid' | 'light';Accessibility
The Accordion component adheres to the WAI-ARIA Accordion Pattern.
Keyboard interactions
| Key | Description |
|---|---|
Enter or Space | Toggles the state of focused header |
Tab | Moves focus to the next focusable element |
Shift + Tab | Moves focus to the previous focusable element |