Components
Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Anatomy
Pass a list of items to the component.
Accordion Anatomy.vue
<template>
<UiAccordion :items />
</template>
<script lang="ts" setup>
const items = [];
</script>
Or use each part individually
Accordion Anatomy.vue
<template>
<UiAccordion>
<UiAccordionItem>
<UiAccordionHeader>
<UiAccordionTrigger />
</UiAccordionHeader>
<UiAccordionContent />
</UiAccordionItem>
</UiAccordion>
</template>
Installation
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.
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
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.
A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design.
Yes! Reka UI is a collection of low-level UI components that you can use to create a design system.
Of course! You can customize the animation of the accordion by updating the animation that is in the tailwind.config file.
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.
A lot of hard work and dedication. Apple is a great place to work, but it's not easy to get a job there. You need to be passionate about technology and willing to put in the time and effort to succeed.
It depends on the language and your level of experience. Some languages are easier to learn than others, but most people can learn the basics of a new language in a few weeks. To become proficient, it can take several months or even years of practice.
You don't need to learn multiple languages to become a software developer, but it can be helpful. Most developers are proficient in at least one language, but knowing multiple languages can make you more versatile and marketable.
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
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
With Chevron Left
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
With Chevron & Icon
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
With Sub-Header & Chevron
Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.
Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
Our support team is available around the clock to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.
With Icon, Sub-Header & Chevron
Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.
Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.
Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.
Our support team is available around the clock to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.
Tabs with Chevron
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
Tabs with Left Chevron
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
Table with Chevron
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
Table with Left Chevron
UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.
Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.
Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.
All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.
Multi-Level
Our components are tree-shakeable and typically add minimal overhead to your bundle.
API Reference
Accordion Root
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
collapsible | boolean | undefined | true | No | When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect. |
disabled | boolean | undefined | — | No | When `true`, prevents the user from interacting with the accordion and all its items |
dir | Direction | undefined | — | No | The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode. |
orientation | DataOrientation | undefined | — | No | The orientation of the accordion. |
unmountOnHide | boolean | undefined | — | No | When `true`, the element will be unmounted on closed state. |
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | — | No | The element or component this component should render as. Can be overwritten by `asChild`. |
type | SingleOrMultipleType | undefined | "single" | No | Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`. |
modelValue | string | string[] | undefined | — | No | The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with `v-model` |
defaultValue | string | string[] | undefined | — | No | The default active value of the item(s). Use when you do not need to control the state of the item(s). |
items | AccordionItem[] | undefined | [] | No | No description provided. |
Accordion Content
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
forceMount | boolean | undefined | — | No | Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries. |
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | — | No | The element or component this component should render as. Can be overwritten by `asChild`. |
content | any | — | No | The content of the accordion. |
Accordion Header
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | — | No | The element or component this component should render as. Can be overwritten by `asChild`. |
Accordion Item
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | string | — | Yes | A string value for the accordion item. All items within an accordion should use a unique value. |
disabled | boolean | undefined | — | No | Whether or not an accordion item is disabled from user interaction. When `true`, prevents the user from interacting with the item. |
unmountOnHide | boolean | undefined | — | No | When `true`, the element will be unmounted on closed state. |
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | — | No | The element or component this component should render as. Can be overwritten by `asChild`. |
Accordion Trigger
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | — | No | The element or component this component should render as. Can be overwritten by `asChild`. |
title | string | undefined | "" | No | The title of the accordion trigger. |
icon | string | undefined | "lucide:chevron-down" | No | The icon to show next to the title. |