# Shadcn Icons & Badges

> Advanced accordion with custom icons and badges

- Type: example, free and open source (MIT)
- Component: [Accordion](https://reui.io/components/accordion.md)
- Page: https://reui.io/components/accordion/c-accordion-6
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/accordion.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/accordion.md
- MCP: `get_example("c-accordion-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-accordion-6.json
- Uses: Accordion, Badge

## Best for

Spaced card rows led by an icon tile, one open at a time, with a New badge and the panel text indented under the label

## When not to use

- Rows joined in one connected stack that each open without closing the rest: use [In Frame](https://reui.io/components/accordion/c-accordion-7.md) (`get_example("c-accordion-7")`)

## Install

```bash
npx shadcn@latest add @reui/c-accordion-6
```

## About Shadcn Accordion

### When to use

- Help and FAQ sections where each question opens its own answer
- Settings, plans, product details and onboarding steps grouped into sections that expand on demand
- Lists of people or records that open to show detail, such as team members and roles

### When not to use

- One block of extra content shown and hidden by a single trigger: use [Collapsible](https://reui.io/components/collapsible.md) (`get_component("collapsible")`)
- A complete questions section for a landing page, with heading and support prompt: use the [FAQ blocks](https://reui.io/blocks/marketing/faq.md)
- Switching between views of the same space where exactly one is always shown: use [Tabs](https://reui.io/components/tabs.md) (`get_component("tabs")`)

### Agent notes

- The base twin takes `multiple` and an array `defaultValue`; the radix twin takes `type`, and `defaultValue` is a string only when `type` is single
- A closed `AccordionContent` ships no text in the server HTML of either twin unless kept mounted, so crawlers without JS never read it

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.