# Accordion Horizontal Panels — React Accordion Component

> Side-by-side panels where the chosen one springs wide to reveal its story while the others fold down to a vertical title.

- Category: [Accordions](https://pixelpapa.com/components/accordions.md)
- Tags: accordion, horizontal, panels, expand, gallery
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/accordions/accordion-horizontal-panels

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/accordion-horizontal-panels
```

The file is written to `components/pixelpapa/accordion-horizontal-panels.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/accordions/accordion-horizontal-panels.

## AI prompt

```text
Add the "Accordion Horizontal Panels" component from PixelPapa UI to this project.

What it is: Side-by-side panels where the chosen one springs wide to reveal its story while the others fold down to a vertical title.
Category: Accordions. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/accordion-horizontal-panels
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/accordion-horizontal-panels.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/accordion-horizontal-panels.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/accordion-horizontal-panels" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More accordions

- [Accordion Nested Tree](https://pixelpapa.com/components/accordions/accordion-nested-tree.md) (Pro): A nested tree with indent guides where branches unfold with animated height and staggered children, fully navigable with the arrow keys.
- [Accordion Numbered Editorial](https://pixelpapa.com/components/accordions/accordion-numbered-editorial.md): A magazine-style accordion with oversized serif numerals, a rule that draws across the open row and a plus that folds into a minus.
- [Accordion Smooth Height](https://pixelpapa.com/components/accordions/accordion-smooth-height.md): A single-open accordion that animates to its content's natural height while the chevron turns and the answer settles in from a blur.
- [Accordion With Icons Cards](https://pixelpapa.com/components/accordions/accordion-with-icons-cards.md): Separate accordion cards with icon tiles; the open card lifts on a spring, its icon fills with colour and the plus turns into a close mark.