# Nested

> An accordion rendered inside another panel body.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/accordion-11).

- Page, with a live preview: https://shadcn.exchange/r/flx/accordion-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/accordion-11-light-0bbef628582b8eff.png
- Registry item: https://ui.flexnative.com/r/accordion-11.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/accordion-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `accordion`

## Files

### `registry/patterns/accordion/accordion-11.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'

export function Accordion11() {
  return (
    <Accordion defaultValue={['account']} className="w-full max-w-md">
      <AccordionItem value="account">
        <AccordionTrigger>Account</AccordionTrigger>
        <AccordionContent>
          <p className="text-muted-foreground">
            Manage your profile and security in the grouped sections below.
          </p>
          <div className="bg-muted/40 mt-3 rounded-lg border px-3">
            <Accordion defaultValue={['profile']}>
              <AccordionItem value="profile">
                <AccordionTrigger className="text-foreground py-3">
                  Profile
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground h-auto">
                  Update your name, avatar, and the email tied to your account.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="security" className="border-b-0">
                <AccordionTrigger className="text-foreground py-3">
                  Security
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground h-auto">
                  Enable two-factor authentication and review active sessions.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="workspace">
        <AccordionTrigger>Workspace</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">
          Members, roles, and billing settings for the whole team.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```