@styloviz/accordion

10 varieties: default, flush, separated, filled, multi-expand, icon placements, badges & subtitles and disabled items. Sizes (sm / md / lg), CSS-grid animation and keyboard navigation are free; multi-expand is available in the Pro package.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/accordion

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvAccordionComponent } from '@styloviz/accordion';

@Component({
  standalone: true,
  imports: [SvAccordionComponent],
  template: `
    <sv-accordion [items]="items" expandMode="single" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | items | AccordionItem[] | [] | Array of panel definitions. | | variant | AccordionVariant | 'default' | Visual style. | | expandMode | AccordionExpand | 'single' | Whether one or many panels can be open at once. | | size | AccordionSize | 'md' | Padding / font scale. | | iconPosition | AccordionIconPos | 'right' | Which side the chevron appears on. | | customIconPath | string | '' | Custom SVG <path d="…"> used as the expand/collapse indicator instead of the default chevron. Leave empty to use the built-in chevron. When only this is set the icon rotates 180° on open (good for arrows). | | customIconOpenPath | string | '' | Optional alternate SVG <path d="…"> shown when the panel is open. Set this alongside customIconPath for a true swap (e.g. plus → minus). When set, rotation is disabled — the paths switch instead. | | customClass | string | '' | Extra CSS classes applied to the root wrapper. |

Outputs

| Output | Type | Description | | --- | --- | --- | | itemToggled | AccordionToggleEvent | Fires whenever a panel is opened or closed. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/accordion

License

MIT