Accordion

Component

About

Accordion with real headings, an animated height and a card variant, single or multiple open. Part of the Layro System: layro.vercel.app

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 * as React from "react";
import { Accordion, AccordionItem } from "@/components/ui/layro-accordion";

/* Questions that fold, one open at a time or several. Headings are real
   headings, the height animates, and the card variant separates each item. */

export default function AccordionDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 480 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Questions</h2>
        <div className="mb-5" />
        <Accordion type="single" collapsible defaultValue="refunds" variant="card">
          <AccordionItem level={3} value="refunds" title="Can I get a refund?">Within 14 days of buying, no questions asked. A refund ends the licence.</AccordionItem>
          <AccordionItem level={3} value="seats" title="How many people can use a licence?" subtitle="Personal vs team">A personal licence is for up to three developers; a team licence covers eight.</AccordionItem>
          <AccordionItem level={3} value="updates" title="Do I get updates?">Every update to what you bought, for life.</AccordionItem>
        </Accordion>
      </div>
    </div>
  );
}