The Accordion component is a UI component that allows users to dynamically show and hide content by clicking a trigger element. This component uses React context to manage the state of the currently open item.
Here is some content for Section 1.
Here is some content for Section 1.
Here is some content for Section 1.
Explore more details in Section 2.
Explore more details in Section 2.
Find useful insights in Section 3.
import { Accordion } from "mogora-ui";
export default function AccordionDemo() {
return (
<Accordion className="max-w-sm">
<Accordion.Item value="item-1">
<Accordion.Trigger>Section 1</Accordion.Trigger>
<Accordion.Content>
<p>Here is some content for Section 1.</p>
</Accordion.Content>
<Accordion.Content>
<p>Here is some content for Section 1.</p>
</Accordion.Content>
<Accordion.Content>
<p>Here is some content for Section 1.</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Section 2</Accordion.Trigger>
<Accordion.Content>
<p>Explore more details in Section 2.</p>
</Accordion.Content>
</Accordion.Item>
</Accordion>
)
}The main component that wraps all items in a single accordion group.
| Prop | Type | Description |
|---|---|---|
| className | string | (Optional) Adds a custom class for styling |
A component for each item in the accordion.
| Prop | Type | Description |
|---|---|---|
| className | string | (Optional) Adds a custom class for styling |
| value | string | number | A unique value that identifies this item. |
A button component used to open or close the content.
| Prop | Type | Description |
|---|---|---|
| className | string | (Optional) Adds a custom class for styling |
A component that contains content that can be expanded or hidden.
| Prop | Type | Description |
|---|---|---|
| className | string | (Optional) Adds a custom class for styling |
This component uses Tailwind CSS for styling. You can add additional CSS classes through the className prop to customize the appearance as needed.