Component

Accordion

A vertically stacked set of headers that each reveal a section of content. Use it to fold long, secondary material into a calm surface the reader opens on demand.

Basic

A copy-paste component collection for Angular, tuned to the light of a German autumn.

Yes. Components live inside your project, so every token, class, and line is yours to edit.

Every component reads semantic CSS variables that turn with the .dark class.

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbAccordionImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-accordion-basic',
  imports: [HbAccordionImports],
  template: `
    <hb-accordion class="w-full max-w-md" hbDefaultValue="item-1">
      <hb-accordion-item hbValue="item-1" hbTitle="What is Herbst UI?">
        A copy-paste component collection for Angular, tuned to the light of a German autumn.
      </hb-accordion-item>
      <hb-accordion-item hbValue="item-2" hbTitle="Is the code really mine?">
        Yes. Components live inside your project, so every token, class, and line is yours to edit.
      </hb-accordion-item>
      <hb-accordion-item hbValue="item-3" hbTitle="Does it support dark mode?">
        Every component reads semantic CSS variables that turn with the .dark class.
      </hb-accordion-item>
    </hb-accordion>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoAccordionBasicComponent {}

Multiple

Amber and rust drifting over cobblestone — the palette the theme is built from.

Long shadows and a quiet haze; the same restraint the components keep.

A cool paper backdrop that lets a single ember of colour do the work.

Non-collapsible

With hbCollapsible set to false the open item cannot be closed — you can only move to another one.

Selecting a header opens it and keeps exactly one section visible at all times.

Useful when you always want to keep the reader on a single active section.

Card & disabled

A card-bordered accordion groups its items inside a single framed surface.

This item cannot be opened while it is disabled.

Disabled items stay visible so the structure of the content is never lost.

API reference

hb-accordion

Property	Description	Type	Default
[hbType]	Whether one or several items can be open at once.	'single' \| 'multiple'	'single'
[hbCollapsible]	Allow the open item to be closed again (single mode).	boolean	true
[hbBordered]	Border treatment around and between items.	'none' \| 'divider' \| 'card'	'divider'
[hbDefaultValue]	Value(s) of the item(s) open on first render.	string \| string[]	''
[class]	Extra CSS classes merged onto the host.	string	''

hb-accordion-item

Property	Description	Type	Default
[hbTitle]	Text shown in the item header.	string	''
[hbValue]	Unique value identifying the item.	string	''
[hbDisabled]	Prevent the item from opening or closing.	boolean	false
[class]	Extra CSS classes merged onto the item.	string	''