Accordion

A vertically stacked set of interactive headings with smooth animated chevron indicators and collapsible content sections

accordion-single.tsx

"use client";import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from "@/components/foliokit/accordion";export default function AccordionSingle() {  return (    <div className="w-full max-w-2xl mx-auto p-4">      <Accordion type="single" collapsible>        <AccordionItem value="item-1">          <AccordionTrigger>What is React?</AccordionTrigger>          <AccordionContent>            React is a JavaScript library for building user interfaces. It lets            you create reusable components and manage state efficiently.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-2">          <AccordionTrigger>What is Next.js?</AccordionTrigger>          <AccordionContent>            Next.js is a React framework that enables functionality such as            server-side rendering and static site generation for building modern            web applications.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-3">          <AccordionTrigger>What is TypeScript?</AccordionTrigger>          <AccordionContent>            TypeScript is a strongly typed programming language that builds on            JavaScript, giving you better tooling at any scale.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}

Installation

pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/accordion.json

npx shadcn@latest add https://folio-kit.vercel.app/r/accordion.json

yarn shadcn@latest add https://folio-kit.vercel.app/r/accordion.json

bunx shadcn@latest add https://folio-kit.vercel.app/r/accordion.json

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Default Accordion

accordion-demo.tsx

"use client";import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from "@/components/foliokit/accordion";export default function AccordionDemo() {  return (    <div className="w-full max-w-2xl mx-auto p-4">      <Accordion type="single" collapsible>        <AccordionItem value="item-1">          <AccordionTrigger>Is it accessible?</AccordionTrigger>          <AccordionContent>            Yes. It adheres to the WAI-ARIA design pattern and is built on Radix            UI's Accordion primitive for full accessibility support.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-2">          <AccordionTrigger>Is it styled?</AccordionTrigger>          <AccordionContent>            Yes. It comes with default styles that you can customize with            Tailwind CSS classes or your own custom CSS.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-3">          <AccordionTrigger>Is it animated?</AccordionTrigger>          <AccordionContent>            Yes. It features smooth animations powered by Motion, including an            interactive chevron that rotates on hover and when opened.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}

Single Collapsible

accordion-single.tsx

"use client";import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from "@/components/foliokit/accordion";export default function AccordionSingle() {  return (    <div className="w-full max-w-2xl mx-auto p-4">      <Accordion type="single" collapsible>        <AccordionItem value="item-1">          <AccordionTrigger>What is React?</AccordionTrigger>          <AccordionContent>            React is a JavaScript library for building user interfaces. It lets            you create reusable components and manage state efficiently.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-2">          <AccordionTrigger>What is Next.js?</AccordionTrigger>          <AccordionContent>            Next.js is a React framework that enables functionality such as            server-side rendering and static site generation for building modern            web applications.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-3">          <AccordionTrigger>What is TypeScript?</AccordionTrigger>          <AccordionContent>            TypeScript is a strongly typed programming language that builds on            JavaScript, giving you better tooling at any scale.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}

Multiple Items

Install the package using your preferred package manager. Run npm install, pnpm install, or yarn install in your project directory.

Configure your project by adding the necessary settings to your configuration file. This includes setting up paths, plugins, and environment variables.

accordion-multiple.tsx

"use client";import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from "@/components/foliokit/accordion";export default function AccordionMultiple() {  return (    <div className="w-full max-w-2xl mx-auto p-4">      <Accordion type="multiple" defaultValue={["item-1", "item-2"]}>        <AccordionItem value="item-1">          <AccordionTrigger>Installation</AccordionTrigger>          <AccordionContent>            Install the package using your preferred package manager. Run npm            install, pnpm install, or yarn install in your project directory.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-2">          <AccordionTrigger>Configuration</AccordionTrigger>          <AccordionContent>            Configure your project by adding the necessary settings to your            configuration file. This includes setting up paths, plugins, and            environment variables.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-3">          <AccordionTrigger>Usage</AccordionTrigger>          <AccordionContent>            Import the components you need and use them in your application. The            components are fully typed and come with comprehensive            documentation.          </AccordionContent>        </AccordionItem>        <AccordionItem value="item-4">          <AccordionTrigger>Troubleshooting</AccordionTrigger>          <AccordionContent>            If you encounter any issues, check the documentation or raise an            issue on GitHub. Common problems include incorrect import paths and            missing dependencies.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}

Custom Styling

accordion-custom.tsx

"use client";import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from "@/components/foliokit/accordion";export default function AccordionCustom() {  return (    <div className="w-full max-w-2xl mx-auto p-4">      <Accordion type="single" collapsible className="space-y-4">        <AccordionItem          value="item-1"          className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 rounded-xl px-6 border-2 border-blue-200 dark:border-blue-800 shadow-sm hover:shadow-md transition-shadow"        >          <AccordionTrigger className="text-blue-900 dark:text-blue-100 hover:text-blue-700 dark:hover:text-blue-300">            Premium Features          </AccordionTrigger>          <AccordionContent className="text-blue-800 dark:text-blue-200">            Unlock advanced features including priority support, custom            integrations, and enhanced security options.          </AccordionContent>        </AccordionItem>        <AccordionItem          value="item-2"          className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950 dark:to-pink-950 rounded-xl px-6 border-2 border-purple-200 dark:border-purple-800 shadow-sm hover:shadow-md transition-shadow"        >          <AccordionTrigger className="text-purple-900 dark:text-purple-100 hover:text-purple-700 dark:hover:text-purple-300">            Analytics Dashboard          </AccordionTrigger>          <AccordionContent className="text-purple-800 dark:text-purple-200">            Get detailed insights with our comprehensive analytics dashboard            featuring real-time data and custom reports.          </AccordionContent>        </AccordionItem>        <AccordionItem          value="item-3"          className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 rounded-xl px-6 border-2 border-green-200 dark:border-green-800 shadow-sm hover:shadow-md transition-shadow"        >          <AccordionTrigger className="text-green-900 dark:text-green-100 hover:text-green-700 dark:hover:text-green-300">            Team Collaboration          </AccordionTrigger>          <AccordionContent className="text-green-800 dark:text-green-200">            Work together seamlessly with shared workspaces, real-time            collaboration, and team management tools.          </AccordionContent>        </AccordionItem>        <AccordionItem          value="item-4"          className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-950 dark:to-red-950 rounded-xl px-6 border-2 border-orange-200 dark:border-orange-800 shadow-sm hover:shadow-md transition-shadow"        >          <AccordionTrigger className="text-orange-900 dark:text-orange-100 hover:text-orange-700 dark:hover:text-orange-300">            Security & Compliance          </AccordionTrigger>          <AccordionContent className="text-orange-800 dark:text-orange-200">            Enterprise-grade security with SOC 2 compliance, encryption at rest            and in transit, and advanced access controls.          </AccordionContent>        </AccordionItem>      </Accordion>    </div>  );}