Components
Loading preview...
HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expanded keys, custom indicator, disabled items, hidden separators, grouped FAQ layout and custom styles. Works in light and dark themes.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-accordionimport { Accordion } from "@/components/ui/heroui-accordion"
import { ShoppingBag, Receipt, CreditCard, Box, Globe, RotateCcw, ChevronDown } from "lucide-react"
const items = [
{ icon: <ShoppingBag className="size-4" />, title: "How do I place an order?", content: "Browse our products, add items to your cart, and proceed to checkout. You'll need to provide shipping and payment information to complete your purchase." },
{ icon: <Receipt className="size-4" />, title: "Can I modify or cancel my order?", content: "Yes, you can modify or cancel your order before it's shipped. Once your order is processed, you can't make changes." },
{ icon: <CreditCard className="size-4" />, title: "What payment methods do you accept?", content: "We accept all major credit cards, including Visa, Mastercard, and American Express." },
{ icon: <Box className="size-4" />, title: "How much does shipping cost?", content: "Shipping costs vary based on your location and the size of your order. We offer free shipping for orders over $50." },
{ icon: <Globe className="size-4" />, title: "Do you ship internationally?", content: "Yes, we ship to most countries. Please check our shipping rates and policies for more information." },
{ icon: <RotateCcw className="size-4" />, title: "How do I request a refund?", content: "If you're not satisfied with your purchase, you can request a refund within 30 days of purchase. Please contact our customer support team for assistance." },
]
export default function Usage() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Accordion className="w-full max-w-md">
{items.map((item, i) => (
<Accordion.Item key={i}>
<Accordion.Heading>
<Accordion.Trigger>
<span className="mr-3 flex size-4 shrink-0 items-center justify-center text-muted [&>svg]:size-4">{item.icon}</span>
{item.title}
<Accordion.Indicator className="[&>svg]:size-4">
<ChevronDown className="size-4" />
</Accordion.Indicator>
</Accordion.Trigger>
</Accordion.Heading>
<Accordion.Panel>
<Accordion.Body>{item.content}</Accordion.Body>
</Accordion.Panel>
</Accordion.Item>
))}
</Accordion>
</div>
)
}