Accordion
UiAccordion wraps a native <details> element. Group items with UiAccordionGroup; share a name so only one stays open at a time.
Add an accordion group
<template>
<UiAccordionGroup>
<UiAccordion title="What is Colorffy?" name="faq">
<template #content>
<p>A Vue 3 component library and SCSS framework.</p>
</template>
</UiAccordion>
<UiAccordion title="Is it free?" name="faq">
<template #content>
<p>Yes — MIT licensed.</p>
</template>
</UiAccordion>
</UiAccordionGroup>
</template>
Control the open state
Use v-model:open for controlled expand / collapse:
<script setup lang="ts">
import { ref } from 'vue'
const open = ref(true)
</script>
<template>
<UiAccordion v-model:open="open" title="Details">
<template #content><p>Controlled panel.</p></template>
</UiAccordion>
</template>
Add a leading icon
Pass icon with a Material Symbols HTML entity to show an icon before the title:
<template>
<UiAccordion icon="" title="Shipping & Returns">
<template #content>
<p>Free shipping on all orders. Returns accepted within 30 days.</p>
</template>
</UiAccordion>
</template>
Sizes
Set size on the group to scale every item (paddings, arrow, title), or on a
single item to override the group:
<template>
<UiAccordionGroup size="sm">
<UiAccordion title="Compact item" name="sizes">
<template #content><p>Smaller paddings and arrow.</p></template>
</UiAccordion>
</UiAccordionGroup>
</template>
Variants & shape
variant="borderless" removes the surface and borders; variant="border-block"
renders a flush list separated by horizontal rules (pairs well with
shape="square"):
<template>
<UiAccordionGroup variant="border-block" shape="square" size="sm">
<UiAccordion title="What is Colorffy?" name="faq">
<template #content><p>A Vue 3 component library.</p></template>
</UiAccordion>
<UiAccordion title="Is it free?" name="faq">
<template #content><p>Yes — MIT licensed.</p></template>
</UiAccordion>
</UiAccordionGroup>
</template>
UiAccordion props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | null | null | DOM id for the <details> element. |
title | string | null | '' | Header text (or use the #header slot). |
icon | string | null | null | Leading Material Symbols icon (HTML entity) before the title. Ignored when the header slot is used. |
iconClass | string | string[] | Record<string, boolean> | null | null | Classes for the icon. |
name | string | null | 'accordion-item' | Native <details> group name. |
text | string | null | '' | Body text (or use the #content slot). |
disabled | boolean | false | The header can't be clicked or focused, so the item keeps its open state. v-model:open can still change it. |
size | 'sm' | 'md' | null | null | Per-item size override (defaults to the group size / md). |
customClass | string | string[] | Record<string, boolean> | null | null | Extra classes. |
Model: v-model:open (boolean).
Slots: #header, #content.
UiAccordionGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
isTransparent | boolean | false | Surface-less container. |
variant | 'borderless' | 'border-block' | null | null | Surface variant: no surface/borders, or flush list with horizontal rules. |
size | 'sm' | 'md' | null | null | Size applied to all items (default md). |
shape | 'rounded' | 'square' | 'rounded' | Corner shape for the items. |
customClass | string | string[] | Record<string, boolean> | null | null | Extra classes. |
CSS variables
Set these on :root, or on any wrapper to restyle only the accordions inside it. In a stacked group, --cffy-accordion-radius sets the outer corners of the first and last items; the inner corners stay small. The transparent, pane, borderless, border-block, square and sm styles keep their own values. Hover and pressed backgrounds come from the shared state layer.
:root {
--cffy-accordion-bg-color: var(--cffy-surface-container-low);
--cffy-accordion-hover-color: var(--cffy-accent-a10);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-accordion-bg-color / --cffy-accordion-color | --cffy-surface-accordion / --cffy-on-background | Background and title text |
--cffy-accordion-border-color | transparent | Border |
--cffy-accordion-radius | --cffy-shape-container | Corners (outer corners in a group) |
--cffy-accordion-padding | --cffy-space-14 | Header and body padding |
--cffy-accordion-title-font-size / --cffy-accordion-body-font-size | --cffy-fs-xs / --cffy-fs-2xs | Title and body text size |
--cffy-accordion-body-color | --cffy-muted-a10 | Body text |
--cffy-accordion-icon-color | --cffy-muted-a10 | Leading icon and toggle arrow |
--cffy-accordion-hover-color | --cffy-primary-a10 | Title of the hovered header |
--cffy-accordion-easing / --cffy-accordion-duration | --cffy-ease-overshoot-soft / --cffy-duration-600 | Open and close animation |
--cffy-accordion-group-gap | --cffy-space-4 | Space between items |