Accordion 1

Component 1

About

Accordion – Expandable content container. Organizes information into collapsible sections for better readability and space-saving layouts. Ideal for FAQs, settings, and multi-topic content.

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

Code

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

Usage.tsx

import {
  Gauge,
  Hand,
  Layers,
  MousePointerClick,
  Send,
} from "lucide-react"

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

// Helper component for consistent icon styling
const AccordionIcon = ({ icon: Icon }: { icon: React.ElementType }) => {
  return <Icon className="h-5 w-5 text-muted-foreground" />
}

export default function AccordionDemo() {
  return (
    <Accordion
      type="single"
      collapsible
      className="w-full max-w-md space-y-3"
      defaultValue="item-3" // Set "Usability & Accessibility" open by default
    >
      {/* Group 1 */}
      <div className="overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm">
        <AccordionItem value="item-1">
          <AccordionTrigger className="p-4 text-base hover:no-underline">
            <div className="flex items-center gap-3">
              <AccordionIcon icon={MousePointerClick} />
              What is Interaction Design?
            </div>
          </AccordionTrigger>
          <AccordionContent className="p-4 pt-0 text-muted-foreground">
            It's the practice of designing interactive digital products,
            environments, systems, and services.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-2" className="border-b-0">
          <AccordionTrigger className="p-4 text-base hover:no-underline">
            <div className="flex items-center gap-3">
              <AccordionIcon icon={Layers} />
              Principles & Patterns
            </div>
          </AccordionTrigger>
          <AccordionContent className="p-4 pt-0 text-muted-foreground">
            Fundamental guidelines and repeated solutions that ensure
            consistency and usability in design.
          </AccordionContent>
        </AccordionItem>
      </div>

      {/* Group 2 */}
      <div className="overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm">
        <AccordionItem value="item-3" className="border-b-0">
          <AccordionTrigger className="p-4 text-base hover:no-underline">
            <div className="flex items-center gap-3">
              <AccordionIcon icon={Hand} />
              Usability & Accessibility
            </div>
          </AccordionTrigger>
          <AccordionContent className="p-4 pt-0 text-muted-foreground">
            Focusing on making digital designs easy to use and accessible for
            everyone, including those with disabilities.
          </AccordionContent>
        </AccordionItem>
      </div>

      {/* Group 3 */}
      <div className="overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm">
        <AccordionItem value="item-4">
          <AccordionTrigger className="p-4 text-base hover:no-underline">
            <div className="flex items-center gap-3">
              <AccordionIcon icon={Send} />
              Prototyping & Testing
            </div>
          </AccordionTrigger>
          <AccordionContent className="p-4 pt-0 text-muted-foreground">
            Creating mockups and testing them with real users to find and fix
            flaws before development.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-5" className="border-b-0">
          <AccordionTrigger className="p-4 text-base hover:no-underline">
            <div className="flex items-center gap-3">
              <AccordionIcon icon={Gauge} />
              UX Optimisation
            </div>
          </AccordionTrigger>
          <AccordionContent className="p-4 pt-0 text-muted-foreground">
            Continuously refining the user experience based on data,
            feedback, and testing.
          </AccordionContent>
        </AccordionItem>
      </div>
    </Accordion>
  )
}