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.
Almond-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences.
Getting started with Almond-UI is easy! Simply install the package using your package manager of choice, and you're ready to go. We've also included a set of Storybook stories to help you get familiar with our components and how to use them.
We're always looking for new contributors to help us improve Almond-UI! If you'd like to contribute, please check out our contribution guidelines to get started. We're looking forward to working with you!
If you'd like to learn more about Almond-UI, please visit our website. You can also follow us on Twitter to stay up to date with the latest news and updates.
import { Accordion } from '@almond-ui/core';
function App() {
return (
<Accordion defaultItem="item-1" 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 '@almond-ui/core';Colors
The Accordion component comes with four colors: white, gray, zinc and slate.
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
<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.
Some text...
Some more text...
Some text...
Some more text...
<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 '@almond-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
Some text...
Some more text...
<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. Almond-UI is using tailwind-merge to merge the default classes with the classes you provide in the className prop and resolve any possible conflicts.
Some pink text on a
pink background...
Some green text on
a green background...
<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 |