ComponentsFeatures Accordion

A component to display 2 to 5 features in an accordion. By default, the first feature is selected. When a feature is clicked, the others are closed.

  • The text is clickable and displays the feature description when clicked.
  • The media could be a video or an image (or nothing). Videos are set to auto play for the best UX.
Features Accordion Component

/app/page.js

1import FeaturesAccordion from "@/components/FeaturesAccordion";
2
3export default function Home() {
4  return (
5    <>
6      <main>
7        <FeaturesAccordion />
8      </main>
9    </>
10  );
11}

Tips

  • Keep the title short and simple (less than 5 words).
  • You can create a video feature using Screen Studio (Mac only).