Accordion

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add accordion

Usage

Basic

The most common way to use the accordion is by just passing an array of items to the items prop. Each item should have a value, title, and content.

Custom styling

If you want to change the way that the items look, you can do so by using the different components that the accordion is composed of.

Custom icon

You can change the icon that is displayed based on the open state of an item. Just override the the trigger slot and then override the icon slot.

Origin UI Examples

These are some examples that I found today over here Origin UI. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

With Chevron

With Chevron Left

With Chevron & Icon

With Sub-Header & Chevron

With Icon, Sub-Header & Chevron

Tabs with Chevron

Tabs with Left Chevron

Table with Chevron

Table with Left Chevron

Multi-Level