Expandable content sections using a compound component pattern with CascadingValue.

Overview

The Accordion component provides collapsible content sections. The parent Accordion uses CascadingValue to coordinate state with its AccordionItem children. Each item can be expanded or collapsed independently.

Installation

shellui add accordion

Usage

Basic Accordion

<Accordion>
  <AccordionItem Title="Section 1">
    <p>Content for section 1 goes here.</p>
  </AccordionItem>
  <AccordionItem Title="Section 2">
    <p>Content for section 2 goes here.</p>
  </AccordionItem>
  <AccordionItem Title="Section 3">
    <p>Content for section 3 goes here.</p>
  </AccordionItem>
</Accordion>

Controlled Accordion

Control which items are open via the IsOpen parameter:

<Accordion>
  <AccordionItem Title="Item 1" IsOpen="@item1Open">
    <p>Content 1</p>
  </AccordionItem>
  <AccordionItem Title="Item 2" IsOpen="@item2Open">
    <p>Content 2</p>
  </AccordionItem>
</Accordion>

@code {
    private bool item1Open = true;
    private bool item2Open = false;
}

FAQ Example

<Accordion>
  <AccordionItem Title="What is ShellUI?">
    <p>ShellUI is a CLI-first Blazor component library inspired by shadcn/ui.</p>
  </AccordionItem>
  <AccordionItem Title="How do I install ShellUI?">
    <p>Install via CLI or NuGet. See the installation guide for details.</p>
  </AccordionItem>
  <AccordionItem Title="Is ShellUI free?">
    <p>Yes — ShellUI is free and open source under the MIT license.</p>
  </AccordionItem>
</Accordion>

With Rich Content

<Accordion Class="w-full">
  <AccordionItem Title="Features">
    <ul class="list-disc list-inside space-y-2">
      <li>69+ production-ready components</li>
      <li>CLI-first installation</li>
      <li>Tailwind CSS integration</li>
      <li>Full accessibility support</li>
    </ul>
  </AccordionItem>
  <AccordionItem Title="Getting Started">
    <ol class="list-decimal list-inside space-y-2">
      <li>Install the CLI tool</li>
      <li>Initialize your project</li>
      <li>Add components</li>
    </ol>
  </AccordionItem>
</Accordion>

API Reference

Accordion

Parameter	Type	Default	Description
`ChildContent`	`RenderFragment`	—	`AccordionItem` children
`Class`	`string?`	`null`	Additional CSS classes

AccordionItem

Parameter	Type	Default	Description
`Title`	`string`	`""`	Header text displayed on the trigger
`IsOpen`	`bool`	`false`	Whether the item is expanded
`ChildContent`	`RenderFragment`	—	Collapsible content
`Class`	`string?`	`null`	Additional CSS classes

Accessibility

Each item header is a <button> with aria-expanded reflecting the open state.
Content regions use role="region" with aria-labelledby pointing to the header.
Full keyboard support — Enter / Space to toggle, Arrow keys to navigate between items.

Accordion

On this page