Components
Loading preview...
A vertically stacked set of interactive headings that each reveal a section of content.
npx shadcn@latest add https://21st.dev/r/shadcn/accordionimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
import { Cog, Mail, Users, Zap } from "lucide-react"
interface AccordionData {
icon: React.ReactNode
title: string
content: string[]
}
const accordionData: AccordionData[] = [
{
icon: <Zap className="size-4 stroke-2 text-muted-foreground" />,
title: "Getting Started",
content: [
"Create your MynaUI account",
"Verify your email address",
"Complete your profile setup",
"Explore the dashboard",
],
},
{
icon: <Users className="size-4 stroke-2 text-muted-foreground" />,
title: "User Management",
content: [
"Invite team members",
"Set user permissions",
"Create user groups",
"Manage access controls",
],
},
{
icon: <Cog className="size-4 stroke-2 text-muted-foreground" />,
title: "Configuration",
content: [
"Configure project settings",
"Set up integrations",
"Customize appearance",
"Define workflow rules",
],
},
{
icon: <Mail className="size-4 stroke-2 text-muted-foreground" />,
title: "Communication",
content: [
"Set up notification preferences",
"Configure email templates",
"Manage communication channels",
"Review message history",
],
},
]
function IconAccordion() {
return (
<div className="mx-auto w-full max-w-7xl p-4 max-w-[400px]">
<Accordion type="single" collapsible className="w-full">
{accordionData.map((item, index) => (
<AccordionItem key={index} value={`item-${index}`}>
<AccordionTrigger>
<div className="flex items-center gap-2">
<span className="text-muted-foreground">{item.icon}</span>
{item.title}
</div>
</AccordionTrigger>
<AccordionContent>
<ul className="space-y-2 pl-7">
{item.content.map((step, stepIndex) => (
<li key={stepIndex}>{step}</li>
))}
</ul>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
)
}
export { IconAccordion }