StackBits - React UI & Full-Stack Code Library

Components > Accordion

Accordion

Why dump all your content on the screen when you can hide it in style? Our accordion lets you tuck away details neatly until they’re needed—like a treasure chest waiting to be opened! Perfect for FAQs, docs, or any content that deserves a dramatic reveal.

Preview

Why use stackbits?

Our docs are actually *fun* to read. No 10,000-word essays—just quick, clear explanations so you can get back to building cool stuff.

Other devs *write* code. You? You *assemble* greatness. With StackBits, you get copy-paste-ready snippets that actually work (yes, really).

Think we just give you UI components? Nah. We also include backend logic, so you don’t have to keep Googling “how to hash a password securely.”

Follow below steps 👇🏻

Install dependencies

1npm i framer-motion lucide-react

Component

Create a file accordion.tsx in your components folder and paste this code

1import React from 'react';
2import { motion } from 'framer-motion';
3import { Plus } from 'lucide-react';
4
5type AccordionProps = {
6  isOpen: boolean;
7  selectAccordion: (index: number) => void;
8  item: {
9    title: string;
10    content: string;
11  };
12  index: number;
13  toggleIcon?: React.ReactNode;
14};
15
16const Accordion = ({
17  isOpen = false,
18  selectAccordion,
19  item,
20  index,
21  toggleIcon
22}: AccordionProps) => {
23  return (
24    <motion.div
25      initial={{
26        height: '60px',
27        background: 'linear-gradient(90deg, rgba(38, 38, 66, 1) 59%, rgba(69, 67, 89, 1) 100%)'
28      }}
29      animate={{
30        height: isOpen ? 'auto' : '60px', // ? height of the accordion increases when it is open
31        background: isOpen
32          ? 'linear-gradient(90deg, rgba(255, 99, 71, 1) 50%, rgba(255, 165, 0, 0.8) 100%)'
33          : 'linear-gradient(90deg, rgba(38, 38, 66, 1) 59%, rgba(69, 67, 89, 1) 100%)'
34      }}
35      className="shadow-lg rounded-xl overflow-hidden border border-gray-300 w-full relative"
36    >
37      <button
38        className="text-sm sm:text-[16px] w-full flex justify-between items-center p-5 h-[60px] text-left font-semibold text-white"
39        onClick={() => selectAccordion(index)}
40      >
41        {item.title}
42        {toggleIcon || (
43          <motion.div animate={{ rotate: isOpen ? 135 : 0 }}>
44            <Plus className="text-white h-4 w-4" />
45          </motion.div>
46        )}
47      </button>
48
49      <div className="px-5 pb-5 text-white overflow-hidden text-xs sm:text-[16px]">
50        {item.content}
51      </div>
52    </motion.div>
53  );
54};
55
56export default Accordion;

Usage

1import { useState } from 'react';
2
3import Accordion from './ui/accordion';
4
5// ? Content of the accordions
6const accordionItems = [
7  {
8    title: '📜 No Boring Documentation',
9    content:
10      'Our docs are actually *fun* to read. No 10,000-word essays—just quick, clear explanations so you can get back to building cool stuff.'
11  },
12  {
13    title: '⚡ Copy. Paste. Ship.',
14    content:
15      'Other devs *write* code. You? You *assemble* greatness. With StackBits, you get copy-paste-ready snippets that actually work (yes, really).'
16  },
17  {
18    title: '🛠️ Backend Included',
19    content:
20      'Think we just give you UI components? Nah. We also include backend logic, so you don’t have to keep Googling “how to hash a password securely.”'
21  }
22];
23
24const AccordionDemo = () => {
25  const [expanded, setExpanded] = useState<number | null>(null);
26
27  // ? Toggles the accordion
28  const toggleAccordion = (index: number) => {
29    setExpanded(expanded === index ? null : index);
30  };
31
32  return (
33    <div className="max-w-md w-full mx-auto p-6 space-y-4">
34      <p>Why use stackbits?</p>
35      {accordionItems.map((item, index) => (
36        <Accordion
37          key={index}
38          isOpen={expanded === index}
39          selectAccordion={toggleAccordion}
40          item={item}
41          index={index}
42          // toggleIcon={<ChevronDown className="text-white h-4 w-4" />} // ? Optional icon to toggle the accordion
43        />
44      ))}
45    </div>
46  );
47};
48
49export default AccordionDemo;

⭐️ Got a question or feedback?
Feel free to reach out!