General

Accordion

A group of togglable entries

Overview

The Accordion component lets users expand and collapse sections of content, keeping the layout compact while allowing access to detailed information on demand.

Key Business & UX Benefits

Reduces visual clutter by showing only one or a few sections at a time.
Improves scannability so users can jump to the section they need.
Familiar pattern that matches user expectations and reduces learning effort.
Keeps users on the page by revealing content in place instead of navigating away.

Pro-Tip from Larry: Use accordions for FAQ or long specs so the page stays short and easy to scan.

Usage

LuiAccordion

<LuiAccordion>
  <LuiAccordionItem title="Hello, world!">
    Lorem Ipsum dolor
  </LuiAccordionItem>
  <LuiAccordionItem title="This is a headline!">
    And this might be the greatest content ever!
  </LuiAccordionItem>
</LuiAccordion>

Feature List

Expandable and collapsible content sections
Single or multiple sections open at once
Clear visual state for expanded vs collapsed
Accessible keyboard and screen reader support

API Reference

LuiAccordion

Prop	Default	Type
`accordionStyle`	`simple`	`"simple" \| "boxed-buttons" \| "buttons"`
`type`	`single`	`"single" \| "multiple"`
`defaultValue`		`string`
`size`	`m`	`"s" \| "m"`

Slot	Type
`default`	`any`

LuiAccordionItem

Prop	Default	Type
`title`required		`string`
`icon`		`string`
`value`		`string`
`disabled`		`boolean`

Slot	Type
`default`	`any`
`headerText`	`any`

Edit this pageorReport an issue

UI Kit

The UI Kit is the core set of Laioutr UI primitives and foundational components used across packages, grouped into general, typography, layout, content, surfaces, form, and indicators.

Avatar

Avatar component for displaying user images, initials, or icons with size and color variants.