Accordion

Component

About

A vertically stacked set of interactive headings that each reveal an associated section of content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion to your project and fits it to your theme.

Code

How Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "@/components/ui/accordion";
import { Star, Shield, Zap, Heart } from "lucide-react";


export default function DemoOne() {
  return (
    <>
<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="features">
    <AccordionTrigger icon={<Star className="h-4 w-4" />}>
      Features
    </AccordionTrigger>
    <AccordionContent>
      Our platform includes advanced features like real-time collaboration,
      version control, and automated deployments.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="security">
    <AccordionTrigger icon={<Shield className="h-4 w-4" />}>
      Security
    </AccordionTrigger>
    <AccordionContent>
      We implement enterprise-grade security with end-to-end encryption,
      two-factor authentication, and regular security audits.
    </AccordionContent>
  </AccordionItem>
    <AccordionItem value="Performance">
    <AccordionTrigger icon={<Shield className="h-4 w-4" />}>
      Performance
    </AccordionTrigger>
    <AccordionContent>
    Built for speed with optimized caching, CDN distribution, and performance monitoring to ensure fast load times globally.
    </AccordionContent>
  </AccordionItem>
    <AccordionItem value="Support">
    <AccordionTrigger icon={<Shield className="h-4 w-4" />}>
      Support
    </AccordionTrigger>
    <AccordionContent>
    24/7 customer support with dedicated account managers, comprehensive documentation, and community forums.
    </AccordionContent>
  </AccordionItem>
</Accordion>
    </>
  )
}