All components

C Accordion 5

C Accordion 5 is a React and Tailwind CSS layout component from ReUI, licensed MIT. Copy it and paste it into your project.

ReUI MIT layout

What it is

C Accordion 5 is a React and Tailwind CSS layout component from ReUI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

No packages beyond the project baseline

Licence

This component comes from ReUI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

C Accordion 5

c-accordion-5.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  {
    value: "item-1",
    trigger: "Can I access my account history?",
    content:
      "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
    disabled: false,
  },
  {
    value: "item-2",
    trigger: "Premium feature information (Locked)",
    content:
      "This section contains information about premium features. Upgrade your plan to access this content.",
    disabled: true,
  },
  {
    value: "item-3",
    trigger: "How do I update my email address?",
    content:
      "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
    disabled: false,
  },
]

export function Pattern() {
  return (
    <div className="mx-auto mb-auto w-full max-w-lg">
      <Accordion
        multiple={false}
        defaultValue={["item-1"]}
        className="border-border rounded-lg overflow-hidden border"
      >
        {items.map((item) => (
          <AccordionItem
            key={item.value}
            value={item.value}
            disabled={item.disabled}
            className="data-open:bg-muted/50 **:data-[slot=accordion-content]:p-0!"
          >
            <AccordionTrigger className="px-4 py-4 hover:no-underline">
              {item.trigger}
            </AccordionTrigger>
            <AccordionContent className="px-4! pt-0 pb-4">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

Similar components