Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.
All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal.
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item.
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root type="single" class="w-full sm:max-w-[70%]" value="item-1">
<Accordion.Item value="item-1">
<Accordion.Trigger>Product Information</Accordion.Trigger>
<Accordion.Content class="flex flex-col gap-4 text-balance">
<p>
Our flagship product combines cutting-edge technology with sleek design.
Built with premium materials, it offers unparalleled performance and
reliability.
</p>
<p>
Key features include advanced processing capabilities, and an intuitive
user interface designed for both beginners and experts.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Shipping Details</Accordion.Trigger>
<Accordion.Content class="flex flex-col gap-4 text-balance">
<p>
We offer worldwide shipping through trusted courier partners. Standard
delivery takes 3-5 business days, while express shipping ensures
delivery within 1-2 business days.
</p>
<p>
All orders are carefully packaged and fully insured. Track your shipment
in real-time through our dedicated tracking portal.
</p>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Return Policy</Accordion.Trigger>
<Accordion.Content class="flex flex-col gap-4 text-balance">
<p>
We stand behind our products with a comprehensive 30-day return policy.
If you're not completely satisfied, simply return the item in its
original condition.
</p>
<p>
Our hassle-free return process includes free return shipping and full
refunds processed within 48 hours of receiving the returned item.
</p>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>Installation
pnpm dlx shadcn-svelte@latest add accordionInstall bits-ui
pnpm add bits-uiCopy and paste the following code into your project.
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { cn, type WithoutChild } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
</script>
<AccordionPrimitive.Content
bind:ref
data-slot="accordion-content"
class="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm text-zinc-400"
{...restProps}
>
<div
class={cn(
'px-4 pt-0 pb-4 leading-6 [&_a]:text-[#d0e891] [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-zinc-50 [&_p:not(:last-child)]:mb-4',
className
)}
>
{@render children?.()}
</div>
</AccordionPrimitive.Content>
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
...restProps
}: AccordionPrimitive.ItemProps = $props();
</script>
<AccordionPrimitive.Item
bind:ref
data-slot="accordion-item"
class={cn('border-zinc-900 not-last:border-b', className)}
{...restProps}
/>
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { cn, type WithoutChild } from '$UTILS$.js';
import CaretDownIcon from 'phosphor-svelte/lib/CaretDown';
import CaretUpIcon from 'phosphor-svelte/lib/CaretUp';
let {
ref = $bindable(null),
class: className,
level = 3,
children,
...restProps
}: WithoutChild<AccordionPrimitive.TriggerProps> & {
level?: AccordionPrimitive.HeaderProps['level'];
} = $props();
</script>
<AccordionPrimitive.Header {level} class="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
bind:ref
class={cn(
'focus-visible:ring-zinc-300/30 focus-visible:border-zinc-300 **:data-[slot=accordion-trigger-icon]:text-zinc-500 gap-6 rounded-none px-4 py-3 text-left font-mono text-xs font-semibold tracking-widest text-zinc-100 uppercase hover:bg-zinc-950 hover:text-white focus-visible:ring-2 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
className
)}
{...restProps}
>
{@render children?.()}
<CaretDownIcon
data-slot="accordion-trigger-icon"
class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
/>
<CaretUpIcon
data-slot="accordion-trigger-icon"
class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<script lang="ts">
import { Accordion as AccordionPrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
value = $bindable(),
class: className,
...restProps
}: AccordionPrimitive.RootProps = $props();
</script>
<AccordionPrimitive.Root
bind:ref
bind:value={value as never}
data-slot="accordion"
class={cn('cn-accordion flex w-full flex-col border border-zinc-900 bg-background', className)}
{...restProps}
/>
import Root from './accordion.svelte';
import Content from './accordion-content.svelte';
import Item from './accordion-item.svelte';
import Trigger from './accordion-trigger.svelte';
export {
Root,
Content,
Item,
Trigger,
//
Root as Accordion,
Content as AccordionContent,
Item as AccordionItem,
Trigger as AccordionTrigger
};
Usage
<script lang="ts">
import * as Accordion from '$lib/components/ui/accordion/index.js';
</script><Accordion.Root type="single">
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
</Accordion.Item>
</Accordion.Root>