---
title: "Accordion Stack — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aviral Lakhanpaul · Accordions. Demo Accordion Stack Component Preview Features Overlapping title layout with customizable overlap amount Smooth…"
canonical: "https://framer.elliotli.dev/component/accordion-stack"
---

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

# Accordion Stack

Unique stacked accordion

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

![Accordion Stack preview image 1](https://framer.elliotli.dev/og/component/accordion-stack/2371f39010182595/1600x1200.jpg)

## Summary

Demo Accordion Stack Component Preview Features Overlapping title layout with customizable overlap amount Smooth expand/collapse transitions with cubic-bezier easing Optional…

## Description

### Perfect for editorial, portfolio, and high-end landing pages.

This component adds clarity, personality, and motion without sacrificing usability.

## Update v3 Changelog (Mar 23, 2026)

### 📈 Improvements (1)

-   Added support for line breaks and whitespaces inside the dropdown content, enabling you to add customised content, including bullet lists (•), arrow lists (→), etc.
    

## Update v2 Changelog (Mar 09, 2026)

### 📈 Improvements (1)

-   Fixed the component not reacting to the layout contraints properly.
    

## Demo

Accordion Stack Component Preview

## Features

-   Overlapping title layout with customizable overlap amount
    
-   Smooth expand/collapse transitions with cubic-bezier easing
    
-   Optional serial numbering for each accordion item
    
-   Hover interactions with adjustable colour styles
    
-   Control which item is open by default
    
-   Responsive by default — adapts to any layout or width
    
-   Separate styling for active vs inactive states
    
-   Text transform options for both titles and content
    

## Customizations

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-db015nnb-0d1O0Gy3kZClHToSgENKouQgVSqg9G)

-   Title font, colour, active colour, hover colour, padding, and text transform
    
-   Content font, colour, padding, and text transform
    
-   Serial number toggle + individual font styling
    
-   Border colour between accordion items
    
-   Enable/disable the overlap effect
    
-   Adjustable overlap distance
    
-   Custom items, including title, description, and default open state
    

## Set up

1\. Add the Accordion Stack component to your Framer canvas

2\. Set the number of items using the **Items** property

3\. Add a **Title** and **Content** for each accordion item

4\. Done!

### After completing your purchase, you will receive a link to the component.

**Copy the URL and paste it into your Framer project to import it.**

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1qub8jk5-kp8WhHsZOr4L9bX91YV735p8sKK6yx)](https://polar.sh)

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

-   All · #1551

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $9.00
- **Published**: 2025-11-28
- **Updated**: 2026-10-28
- **Added**: 2025-11-23
- **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