---
title: "Accordion Panels — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Accordions. Accordion Panels is an interactive Framer code component designed to showcase categories, services, features, or content groups…"
canonical: "https://framer.elliotli.dev/component/accordion-panels"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Accordion Panels

# Accordion Panels

Interactive Pill Accordion

[View on Framer](https://framer.com/marketplace/components/accordion-panels/?via=elliot-li)

![Accordion Panels preview image 1](https://framer.elliotli.dev/og/component/accordion-panels/6fa03b08e535c7b7/1600x1200.jpg)

## Summary

Accordion Panels is an interactive Framer code component designed to showcase categories, services, features, or content groups through a smooth expandable pill-based layout.

## Description

[Accordion Panels](https://accordionpanels.framer.website/) is an interactive Framer code component designed to showcase categories, services, features, or content groups through a smooth expandable pill-based layout. One panel stays open while the others collapse into narrow vertical pills. Clicking any pill smoothly expands it while collapsing the previously active panel, creating a clean and engaging interaction.

### Interactive Accordion Experience

-   Expand any panel with a simple click.
    
-   Keep one panel expanded while the remaining panels collapse into compact pills.
    
-   Animate panel width and height precisely without stretching text or images.
    
-   Expanded content smoothly enters from the direction the panel was clicked.
    
-   Collapsed labels rotate vertically for a compact, editorial-style layout.
    
-   Automatically switches to a stacked layout on smaller screens.
    
-   Keyboard accessible with Enter and Space controls.
    
-   Animations are disabled in the Framer Canvas and during export for clean static rendering.
    

### Fully Customizable

Pill Panels includes Framer property controls for panels, content, colors, typography, spacing, sizing, imagery, corner radius, and animation behavior.

### Customize

-   **Panels —** Add, remove, and reorder panels.
    
-   **Content —** Edit labels, headings, descriptions, and images.
    
-   **Colors —** Set individual background and text colors for every panel.
    
-   **Typography —** Customize label, heading, and description fonts.
    
-   **Layout —** Adjust panel gap, collapsed pill size, padding, and responsive breakpoint.
    
-   **Images —** Control image size, aspect ratio, corner radius, and spacing.
    
-   **Shape —** Use automatic pill-shaped corners or set a custom collapsed radius.
    
-   **Animation —** Customize transition type, duration, easing, and content delay.
    
-   **Description —** Control the maximum width of supporting text.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1951

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-08-09
- **Updated**: 2026-11-04
- **Added**: 2026-08-09
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories