Components

Sections

Accordition

Accordition

Dependencies

npminstall lucide-react

npminstall framer-motion

Configuration and Re-usability

AccorditionData.tsx:

import ModernAccordion from 'your-path'
 
// Questions:
 
const accordionItems = [
  {
    title: "What is React?",
    content: "React is a JavaScript library for building user interfaces, particularly single-page applications."
  },
  {
    title: "Why use TypeScript with React?",
    content: "TypeScript adds static typing to JavaScript, which can help catch errors early and improve code quality and maintainability in React projects."
  },
  // Add more items as needed
]
 
export default function AccorditionData() {
  return (
    <div className="p-4">
    {/**Component Calling*/}
      <ModernAccordion items={accordionItems} allowMultiple={true} />
    </div>
  )
}

tailwind.config.ts:

import type { Config } from "tailwindcss";
 
// Code of the tailwind.config.ts...
 
const config: Config = {
  darkMode: "class",
  // Rest...
};
 

tailwind.config.js:

// Rest of the code
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // Rest...
};
 

Usage Methods