Data Display
Accordion
A set of collapsible panels with headings.
Of course! Cnippet UI is free and open source.
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Component() {
const items = [
{
content:
"Cnippet UI is a library of high-quality unstyled React components for design systems and web apps.",
id: "1",
title: "What is Cnippet UI?",
},
{
content:
"Head to the \"Quick start\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.",
id: "2",
title: "How do I get started?",
},
{
content: "Of course! Cnippet UI is free and open source.",
id: "3",
title: "Can I use it for my project?",
},
];
return (
<Accordion className="max-w-md" defaultValue={["3"]}>
{items.map((item) => (
<AccordionItem key={item.id} value={item.id}>
<AccordionTrigger>{item.title}</AccordionTrigger>
<AccordionPanel>{item.content}</AccordionPanel>
</AccordionItem>
))}
</Accordion>
);
}
Installation
pnpm dlx cnippet@latest add accordion
Usage
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionPanel>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionPanel>
</AccordionItem>
</Accordion>Examples
With plus/minus icons
We use industry-standard AES-256 encryption to protect your sensitive information at rest and in transit.
// import {
// Accordion,
// AccordionItem,
// AccordionPanel,
// AccordionTrigger,
// } from "@/components/ui/accordion";
// export default function Component() {
// const items = [
// {
// content:
// "Cnippet Ui is a library of high-quality unstyled React components for design systems and web apps.",
// id: "1",
// title: "What is Cnippet Ui?",
// },
// {
// content:
// "Head to the \"Quick start\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.",
// id: "2",
// title: "How do I get started?",
// },
// {
// content: "Of course! Cnippet Ui is free and open source.",
// id: "3",
// title: "Can I use it for my project?",
// },
// ];
// return (
// <Accordion className="w-lg" defaultValue={["1"]}>
// <AccordionItem>
// <AccordionTrigger>Accordion inside and an accordion</AccordionTrigger>
// <AccordionPanel>
// <Accordion className="w-lg pl-4" defaultValue={["3"]}>
// {items.map((item) => (
// <AccordionItem key={item.id} value={item.id}>
// <AccordionTrigger>{item.title}</AccordionTrigger>
// <AccordionPanel>{item.content}</AccordionPanel>
// </AccordionItem>
// ))}
// </Accordion>
// </AccordionPanel>
// </AccordionItem>
// <AccordionItem>
// <AccordionTrigger>This can be a surprize</AccordionTrigger>
// <AccordionPanel>Surpisseee!! 🙌</AccordionPanel>
// </AccordionItem>
// </Accordion>
// );
// }
import { Minus, Plus } from "lucide-react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
const items = [
{
content:
"We use industry-standard AES-256 encryption to protect your sensitive information at rest and in transit.",
trigger: "Data Security",
value: "security",
},
{
content:
"Seamlessly connect with your favorite tools using our robust REST API and pre-built connectors.",
trigger: "API Integration",
value: "integration",
},
{
content:
"Invite team members, assign roles, and work together in real-time on shared projects and documents.",
trigger: "Team Collaboration",
value: "collaboration",
},
];
export default function Pattern() {
return (
<div className="mx-auto mb-auto w-full max-w-lg">
<Accordion defaultValue={["security"]}>
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionTrigger
className="hover:no-underline"
icon={
<div className="flex h-7 w-7 items-center justify-center">
<Plus className="in-data-panel-open:hidden" size={16} />
<Minus
className="in-data-panel-open:block hidden"
size={16}
/>
</div>
}
>
<span>{item.trigger}</span>
</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
);
}
With borders
Of course! Cnippet UI is free and open source.
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Component() {
const items = [
{
content:
"Cnippet UI is a library of high-quality unstyled React components for design systems and web apps.",
id: "1",
title: "What is Cnippet UI?",
},
{
content:
"Head to the \"Quick start\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.",
id: "2",
title: "How do I get started?",
},
{
content: "Of course! Cnippet UI is free and open source.",
id: "3",
title: "Can I use it for my project?",
},
];
return (
<Accordion className="space-y-4 md:w-lg" defaultValue={["3"]}>
{items.map((item) => (
<AccordionItem
className="rounded-lg border px-4 last:border-b"
key={item.id}
value={item.id}
>
<AccordionTrigger>{item.title}</AccordionTrigger>
<AccordionPanel>{item.content}</AccordionPanel>
</AccordionItem>
))}
</Accordion>
);
}
Multiple Accordion
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Particle() {
return (
<Accordion className="md:w-md" multiple>
<AccordionItem value="item-1">
<AccordionTrigger>What is Base UI?</AccordionTrigger>
<AccordionPanel>
Base UI is a library of high-quality unstyled React components for
design systems and web apps.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How do I get started?</AccordionTrigger>
<AccordionPanel>
Head to the "Quick start" guide in the docs. If you've used unstyled
libraries before, you'll feel at home.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Can I use it for my project?</AccordionTrigger>
<AccordionPanel>
Of course! Base UI is free and open source.
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}
Within a card
Subscription & Billing
Common questions about your account, plans, and payments
Annual billing is available with a 20% discount. All plans include a 14-day free trial with no credit card required.
import { ArrowUpRightIcon } from "lucide-react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
const items = [
{
content: (
<>
<p>
<a className="text-primary hover:underline" href="#">
Annual billing is available
</a>{" "}
with a 20% discount. All plans include a 14-day free trial with no
credit card required.
</p>
<Button className="mt-4" size="sm">
View plans
<ArrowUpRightIcon className="size-4" />
</Button>
</>
),
trigger: "What subscription plans do you offer?",
value: "plans",
},
{
content: (
<>
<p>
Billing occurs automatically at the start of each billing cycle. We
accept all major credit cards, PayPal, and ACH transfers for
enterprise customers.
</p>
</>
),
trigger: "How does billing work?",
value: "billing",
},
{
content: (
<>
<p>
We take security seriously. All data is encrypted at rest using
AES-256 and in transit via TLS 1.3. We perform regular third-party
security audits and maintain SOC 2 Type II compliance.
</p>
<p>
You can also enable multi-factor authentication (MFA) and single
sign-on (SSO) for additional security.
</p>
</>
),
trigger: "Is my data secure?",
value: "security",
},
];
export function Pattern() {
return (
<div className="mx-auto mb-auto w-full max-w-lg">
<Card>
<CardHeader>
<CardTitle>Subscription & Billing</CardTitle>
<CardDescription>
Common questions about your account, plans, and payments
</CardDescription>
</CardHeader>
<CardContent>
<Accordion defaultValue={["plans"]} multiple>
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionTrigger>{item.trigger}</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</CardContent>
</Card>
</div>
);
}
With custom icons and badges
Manage your account preferences, security settings, and personal information. You can also configure two-factor authentication here.
import { HelpCircleIcon, LockIcon, SettingsIcon } from "lucide-react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
const items = [
{
badge: "New",
content:
"Manage your account preferences, security settings, and personal information. You can also configure two-factor authentication here.",
icon: <SettingsIcon className="size-4 text-muted-foreground" />,
trigger: "Account Settings",
value: "account",
},
{
content:
"Control who can see your profile and what data we collect. View our latest security audits and transparency reports.",
icon: <LockIcon className="size-4 text-muted-foreground" />,
trigger: "Privacy & Security",
value: "privacy",
},
{
content:
"Access our help center, community forums, and contact support. We're here to help you 24/7.",
icon: <HelpCircleIcon className="size-4 text-muted-foreground" />,
trigger: "Help & Support",
value: "support",
},
];
export function Pattern() {
return (
<div className="mx-auto mb-auto w-full max-w-lg">
<Accordion
className="space-y-3 border-0"
defaultValue={["account"]}
multiple={false}
>
{items.map((item) => (
<AccordionItem
className="rounded-lg border border-border bg-card px-2 last:border-b **:data-[slot=accordion-content]:p-0!"
key={item.value}
value={item.value}
>
<AccordionTrigger className="items-center px-1 py-3 font-semibold hover:no-underline">
<div className="flex items-center gap-3">
<div className="flex size-8 items-center justify-center rounded-lg bg-muted">
{item.icon}
</div>
<span>{item.trigger}</span>
{item.badge && <Badge variant="info">{item.badge}</Badge>}
</div>
</AccordionTrigger>
<AccordionContent className="px-2 pt-0 pb-4 text-muted-foreground leading-relaxed">
<div className="pl-11">{item.content}</div>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
);
}
With rotating arrow indicator
Yes, you can use ReUI for any of your personal or commercial projects. The library is distributed under the MIT license.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
const items = [
{
content:
"Yes, you can use ReUI for any of your personal or commercial projects. The library is distributed under the MIT license.",
trigger: "Can I use this for my project?",
value: "item-1",
},
{
content:
"We are currently working on a comprehensive Figma design system that will be released soon to all ReUI users.",
trigger: "Is there a Figma file available?",
value: "item-2",
},
{
content:
"You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository.",
trigger: "How do I contribute to ReUI?",
value: "item-3",
},
];
export function Pattern() {
return (
<div className="mx-auto mb-auto w-full max-w-lg">
<Accordion defaultValue={["item-1"]} multiple={false}>
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionTrigger className="flex-row-reverse items-center justify-end gap-3 py-3 hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden">
<span className="font-medium text-foreground/90">
{item.trigger}
</span>
</AccordionTrigger>
<AccordionContent className="ps-7 text-muted-foreground leading-relaxed">
{item.content}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
);
}