Accordion
Aperture Accordion
The component is one piece of material, and opening a section punches a window in it: the answer lies in a sunken well, and the marker on the left is a scale model of that cut.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the items array: questions and answers
- slab — the material colour; the well, the hover fill and the rule are derived from it
- well — the answer in a sunken well (sunken) or flat on the slab (flat)
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/accordion-012?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Accordion012
well="sunken"
items={[
{ question: "What do I get after installing?", answer: "One component file in your project." },
]}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Cut
well· default: sunken- Material
slab· default: theme colour- Single section
exclusive· default: on- Open section
defaultOpen· default: -1
More in Accordion
FAQ
- How do I add Aperture Accordion with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Aperture Accordion depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Aperture Accordion?
- Adapt: the items array: questions and answers; slab — the material colour; the well, the hover fill and the rule are derived from it; well — the answer in a sunken well (sunken) or flat on the slab (flat). Keep as installed: the local --vibeui-accordion-012-* palette — do not swap it for your theme tokens (bg-card, border-border and the like); the absence of an accent colour: the moment a blue or purple accent appears, the component turns into an ordinary card with a chevron; the sunken well of the answer: that is the cut the whole component exists for.
- Is Aperture Accordion free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/accordion-012.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in local variables --vibeui-accordion-012-*. Native <details>/<summary> hold the disclosure, so the keyboard, find-on-page and the state before hydration all work without JS. The component has no accent colour: the states differ by the contrast of material and light, so the focus ring takes the text colour and is drawn inwards on the slab. The dark branch is not an inversion of the light one — on light the cut lets the light in and the well is brighter than the slab, on dark the well is darker and the edge catches a highlight from above. The material colour is set by the slab prop, and the row highlight and the rule between sections are derived from it by mixing. Padding and type size are computed from the component's own width through @container.
Tags
- accordion
- faq
- details
- material
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…