Accordion
Collapsible content panels with smooth transitions and accessible keyboard navigation.
Basic
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion>
<.accordion_item>
<:header>
What's the refund policy?
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Can I upgrade my license later?
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Do you offer technical support?
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>Multiple Sections
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion multiple>
<.accordion_item>
<:header>
What's the refund policy?
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Can I upgrade my license later?
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Do you offer technical support?
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>Default Expanded
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion>
<.accordion_item>
<:header>
What's the refund policy?
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item expanded>
<:header>
Can I upgrade my license later?
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Do you offer technical support?
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>Custom Icons
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion>
<.accordion_item icon={false}>
<:header>
What's the refund policy?
<.icon
name="u-plus"
class="size-4 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
/>
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item icon={false}>
<:header>
Can I upgrade my license later?
<.icon
name="u-plus"
class="size-4 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
/>
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item icon={false}>
<:header>
Do you offer technical support?
<.icon
name="u-plus"
class="size-4 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
/>
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>Custom Styles
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion class="space-y-2">
<.accordion_item class="border border-zinc-200 dark:border-white/10 rounded-xl bg-white dark:bg-zinc-800">
<:header class="px-5 py-3">
What's the refund policy?
</:header>
<:panel class="px-5 pb-3">
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item class="border border-zinc-200 dark:border-white/10 rounded-xl bg-white dark:bg-zinc-800">
<:header class="px-5 py-3">
Can I upgrade my license later?
</:header>
<:panel class="px-5 pb-3">
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item class="border border-zinc-200 dark:border-white/10 rounded-xl bg-white dark:bg-zinc-800">
<:header class="px-5 py-3">
Do you offer technical support?
</:header>
<:panel class="px-5 pb-3">
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>Custom Animation
animation_duration=600
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
animation_duration=100
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
Yes, we offer technical support via email.
<.accordion animation_duration={600}>
<.accordion_item>
<:header>
What's the refund policy?
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Can I upgrade my license later?
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Do you offer technical support?
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>
<.accordion animation_duration={100}>
<.accordion_item>
<:header>
What's the refund policy?
</:header>
<:panel>
Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Can I upgrade my license later?
</:header>
<:panel>
Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
</:panel>
</.accordion_item>
<.accordion_item>
<:header>
Do you offer technical support?
</:header>
<:panel>
Yes, we offer technical support via email.
</:panel>
</.accordion_item>
</.accordion>