Components
Loading preview...
Accordion component from Interfaces DS — Radix-based with monochromatic oklch tokens, hover accents, and smooth open/close animations.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/interfaces-accordionimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/interfaces-accordion"
const items = [
{
value: "shipping",
title: "What are your shipping options?",
content:
"We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.",
},
{
value: "returns",
title: "What is your return policy?",
content:
"Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7 business days.",
},
{
value: "support",
title: "How can I contact customer support?",
content:
"Reach us via email, live chat, or phone. We respond within 24 hours during business days.",
},
]
export default function AccordionDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<Accordion type="single" className="w-full max-w-lg">
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionTrigger>{item.title}</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
)
}