Components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
php artisan blatui:add accordion
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that match the other components' aesthetic.
Yes. It's animated by default, but you can disable it if you prefer.
<x-ui.accordion type="single" collapsible class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger>Is it accessible?</x-ui.accordion-trigger>
<x-ui.accordion-content>
Yes. It adheres to the WAI-ARIA design pattern.
</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger>Is it styled?</x-ui.accordion-trigger>
<x-ui.accordion-content>
Yes. It comes with default styles that match the other components' aesthetic.
</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger>Is it animated?</x-ui.accordion-trigger>
<x-ui.accordion-content>
Yes. It's animated by default, but you can disable it if you prefer.
</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Active Card
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- The open item lifts into a bordered, shadowed card. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md space-y-1 overflow-visible">
<x-ui.accordion-item value="item-1" class="bg-background rounded-lg border border-transparent px-5 transition-all duration-200 data-[state=open]:border-border data-[state=open]:shadow-md">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content>Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="bg-background rounded-lg border border-transparent px-5 transition-all duration-200 data-[state=open]:border-border data-[state=open]:shadow-md">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content>Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="bg-background rounded-lg border border-transparent px-5 transition-all duration-200 data-[state=open]:border-border data-[state=open]:shadow-md">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Active Fill
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- The open item gets a filled (accent) background. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1" class="rounded-lg border-none px-5 transition-colors duration-200 data-[state=open]:bg-accent">
<x-ui.accordion-trigger>How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content>Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="rounded-lg border-none px-5 transition-colors duration-200 data-[state=open]:bg-accent">
<x-ui.accordion-trigger>What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content>Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="rounded-lg border-none px-5 transition-colors duration-200 data-[state=open]:bg-accent">
<x-ui.accordion-trigger>Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Avatar
Manage your plan, payment method and invoices from the billing page in your dashboard.
Track shipments, start a return, or update a delivery address before your order is dispatched.
Enable two-factor authentication and review active sessions from your security settings.
{{-- Rich trigger with an avatar, name and supporting line. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="chevron-updown" class="items-center hover:no-underline">
<span class="flex items-center gap-3">
<x-ui.avatar class="size-9"><x-ui.avatar-fallback>RP</x-ui.avatar-fallback></x-ui.avatar>
<span class="flex flex-col">
<span>Richard Payne</span>
<span class="text-muted-foreground text-xs font-normal">Account & billing</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Manage your plan, payment method and invoices from the billing page in your dashboard.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="chevron-updown" class="items-center hover:no-underline">
<span class="flex items-center gap-3">
<x-ui.avatar class="size-9"><x-ui.avatar-fallback>SM</x-ui.avatar-fallback></x-ui.avatar>
<span class="flex flex-col">
<span>Sofia Mills</span>
<span class="text-muted-foreground text-xs font-normal">Orders & shipping</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Track shipments, start a return, or update a delivery address before your order is dispatched.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="chevron-updown" class="items-center hover:no-underline">
<span class="flex items-center gap-3">
<x-ui.avatar class="size-9"><x-ui.avatar-fallback>AK</x-ui.avatar-fallback></x-ui.avatar>
<span class="flex flex-col">
<span>Amir Khan</span>
<span class="text-muted-foreground text-xs font-normal">Privacy & security</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Enable two-factor authentication and review active sessions from your security settings.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Bordered
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- A single bordered, rounded container wrapping all items. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md overflow-hidden rounded-lg border">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="chevron-updown" class="px-5">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="chevron-updown" class="px-5">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="chevron-updown" class="px-5">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Bordered Icon
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Bordered container with a leading icon and subtitle on every row. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md overflow-hidden rounded-lg border">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="plus-minus" class="items-center px-5">
<span class="flex items-center gap-3">
<x-lucide-truck class="text-muted-foreground size-4 shrink-0" />
<span class="flex flex-col">
<span>How do I track my order?</span>
<span class="text-muted-foreground text-xs font-normal">Shipping & delivery</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="plus-minus" class="items-center px-5">
<span class="flex items-center gap-3">
<x-lucide-undo-2 class="text-muted-foreground size-4 shrink-0" />
<span class="flex flex-col">
<span>What is your return policy?</span>
<span class="text-muted-foreground text-xs font-normal">Returns & refunds</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="plus-minus" class="items-center px-5">
<span class="flex items-center gap-3">
<x-lucide-globe class="text-muted-foreground size-4 shrink-0" />
<span class="flex flex-col">
<span>Do you ship internationally?</span>
<span class="text-muted-foreground text-xs font-normal">Worldwide shipping</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-12">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Chevron Updown
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Chevron that swaps down → up instead of rotating. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="chevron-updown">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content>Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="chevron-updown">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content>Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="chevron-updown">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Default Open
A Laravel Blade component library you copy, paste and own.
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It is open source under the MIT license.
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger>What is BlatUI?</x-ui.accordion-trigger>
<x-ui.accordion-content>A Laravel Blade component library you copy, paste and own.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger>Is it accessible?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger>Is it free?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes. It is open source under the MIT license.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Filled Header
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- The trigger header has a filled (accent) background; each item is a bordered card. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md space-y-2">
<x-ui.accordion-item value="item-1" class="overflow-hidden rounded-lg border last:border-b">
<x-ui.accordion-trigger class="bg-accent px-5 data-[state=open]:rounded-b-none">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5 pt-4">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="overflow-hidden rounded-lg border last:border-b">
<x-ui.accordion-trigger class="bg-accent px-5 data-[state=open]:rounded-b-none">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5 pt-4">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="overflow-hidden rounded-lg border last:border-b">
<x-ui.accordion-trigger class="bg-accent px-5 data-[state=open]:rounded-b-none">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5 pt-4">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Highlight
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- The active item is highlighted with an accent colour and a coloured divider. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1" class="data-[state=open]:border-primary not-last:data-[state=open]:border-b-2">
<x-ui.accordion-trigger class="in-data-[state=open]:text-primary">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content>Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="data-[state=open]:border-primary not-last:data-[state=open]:border-b-2">
<x-ui.accordion-trigger class="in-data-[state=open]:text-primary">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content>Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="data-[state=open]:border-primary not-last:data-[state=open]:border-b-2">
<x-ui.accordion-trigger class="in-data-[state=open]:text-primary">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Icon Left Expand
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Expand chevron moved to the left of the label. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="chevron-updown" icon-position="left" class="justify-start">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="chevron-updown" icon-position="left" class="justify-start">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="chevron-updown" icon-position="left" class="justify-start">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Icon Subtitle
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Circular icon badge with a title and subtitle, plus / minus toggle. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">
<span class="flex items-center gap-3">
<span class="flex size-10 shrink-0 items-center justify-center rounded-full border" aria-hidden="true"><x-lucide-truck class="size-4" /></span>
<span class="flex flex-col">
<span>How do I track my order?</span>
<span class="text-muted-foreground text-xs font-normal">Shipping & delivery</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-13">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">
<span class="flex items-center gap-3">
<span class="flex size-10 shrink-0 items-center justify-center rounded-full border" aria-hidden="true"><x-lucide-undo-2 class="size-4" /></span>
<span class="flex flex-col">
<span>What is your return policy?</span>
<span class="text-muted-foreground text-xs font-normal">Returns & refunds</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-13">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">
<span class="flex items-center gap-3">
<span class="flex size-10 shrink-0 items-center justify-center rounded-full border" aria-hidden="true"><x-lucide-globe class="size-4" /></span>
<span class="flex flex-col">
<span>Do you ship internationally?</span>
<span class="text-muted-foreground text-xs font-normal">Worldwide shipping</span>
</span>
</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-13">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Leading Icon
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- A leading icon before each trigger label, chevron on the right. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger>
<span class="flex items-center gap-3"><x-lucide-truck class="text-muted-foreground size-4 shrink-0" /> How do I track my order?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger>
<span class="flex items-center gap-3"><x-lucide-undo-2 class="text-muted-foreground size-4 shrink-0" /> What is your return policy?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger>
<span class="flex items-center gap-3"><x-lucide-globe class="text-muted-foreground size-4 shrink-0" /> Do you ship internationally?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Multiple
We ship worldwide within 3–5 business days.
Free returns within 30 days of delivery.
All products include a 2-year limited warranty.
<x-ui.accordion type="multiple" class="w-full max-w-md">
<x-ui.accordion-item value="shipping">
<x-ui.accordion-trigger>Shipping</x-ui.accordion-trigger>
<x-ui.accordion-content>We ship worldwide within 3–5 business days.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="returns">
<x-ui.accordion-trigger>Returns</x-ui.accordion-trigger>
<x-ui.accordion-content>Free returns within 30 days of delivery.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="warranty">
<x-ui.accordion-trigger>Warranty</x-ui.accordion-trigger>
<x-ui.accordion-content>All products include a 2-year limited warranty.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Outline
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Each item is fully outlined and separated. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md space-y-2">
<x-ui.accordion-item value="item-1" class="rounded-lg border last:border-b">
<x-ui.accordion-trigger class="px-5">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="rounded-lg border last:border-b">
<x-ui.accordion-trigger class="px-5">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="rounded-lg border last:border-b">
<x-ui.accordion-trigger class="px-5">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Plus Minus
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Plus / minus toggle icon instead of a chevron. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content>Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content>Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="plus-minus" class="items-center">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content>Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Plus Rotate
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Leading icon with a plus that rotates into a cross when open. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md">
<x-ui.accordion-item value="item-1">
<x-ui.accordion-trigger icon="plus" class="items-center">
<span class="flex items-center gap-3"><x-lucide-truck class="text-muted-foreground size-4 shrink-0" /> How do I track my order?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2">
<x-ui.accordion-trigger icon="plus" class="items-center">
<span class="flex items-center gap-3"><x-lucide-undo-2 class="text-muted-foreground size-4 shrink-0" /> What is your return policy?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3">
<x-ui.accordion-trigger icon="plus" class="items-center">
<span class="flex items-center gap-3"><x-lucide-globe class="text-muted-foreground size-4 shrink-0" /> Do you ship internationally?</span>
</x-ui.accordion-trigger>
<x-ui.accordion-content class="ps-7">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>Separated
Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.
Returns are free within 30 days of delivery. Items must be unused and in their original packaging.
Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.
{{-- Each item is a separate elevated card; chevron points left and rotates up. --}}
<x-ui.accordion type="single" collapsible value="item-1" class="w-full max-w-md space-y-2">
<x-ui.accordion-item value="item-1" class="bg-card rounded-lg border-b-0 shadow-md data-[state=open]:shadow-lg">
<x-ui.accordion-trigger icon="chevron-left" class="rounded-lg px-5 py-2.5">How do I track my order?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Once your order ships, we'll email you a tracking link. You can also find it under Orders in your account.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-2" class="bg-card rounded-lg border-b-0 shadow-md data-[state=open]:shadow-lg">
<x-ui.accordion-trigger icon="chevron-left" class="rounded-lg px-5 py-2.5">What is your return policy?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Returns are free within 30 days of delivery. Items must be unused and in their original packaging.</x-ui.accordion-content>
</x-ui.accordion-item>
<x-ui.accordion-item value="item-3" class="bg-card rounded-lg border-b-0 shadow-md data-[state=open]:shadow-lg">
<x-ui.accordion-trigger icon="chevron-left" class="rounded-lg px-5 py-2.5">Do you ship internationally?</x-ui.accordion-trigger>
<x-ui.accordion-content class="px-5">Yes — we ship to most countries. Costs and delivery estimates are shown at checkout.</x-ui.accordion-content>
</x-ui.accordion-item>
</x-ui.accordion>API Reference
Props, slots and exposed methods for
<x-ui.accordion>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type |
string
|
'single'
|
Whether only one item can be open at a time (single) or several at once (multiple).
single
multiple
|
collapsible |
bool
|
false
|
In single mode, allow the open item to be closed by clicking it again (leaving all items closed). Ignored in multiple mode. |
value |
string|array
|
— | The initially open item(s), matched against each item's value. A string in single mode, an array of values in multiple mode. |
Slots
| Slot | Description |
|---|---|
default |
The accordion items. Compose one <x-ui.accordion-item value="..."> per row, each wrapping an <x-ui.accordion-trigger> (the header button) and an <x-ui.accordion-content> (the collapsible panel). |