Accordion

A collapsible content container with expandable sections

Default Variant

The default accordion with bottom borders and underline hover effect.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
9        <Accordion.Content>
10            Yes. It adheres to the WAI-ARIA design pattern.
11        </Accordion.Content>
12    </Accordion.Item>
13    <Accordion.Item value="item-2">
14        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
15        <Accordion.Content>
16            Yes. It comes with default styles that match the other components' aesthetics.
17        </Accordion.Content>
18    </Accordion.Item>
19    <Accordion.Item value="item-3">
20        <Accordion.Trigger>Is it animated?</Accordion.Trigger>
21        <Accordion.Content>
22            Yes. It's animated by default, but you can disable it if you prefer.
23        </Accordion.Content>
24    </Accordion.Item>
25</Accordion.Root>
26

Bordered Variant

A bordered container with dividers between items.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" variant="bordered" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger
9            >What payment methods do you accept?</Accordion.Trigger
10        >
11        <Accordion.Content>
12            We accept all major credit cards, PayPal, and bank
13            transfers. For enterprise customers, we also offer
14            invoice-based payments.
15        </Accordion.Content>
16    </Accordion.Item>
17    <Accordion.Item value="item-2">
18        <Accordion.Trigger
19            >How do I cancel my subscription?</Accordion.Trigger
20        >
21        <Accordion.Content>
22            You can cancel your subscription at any time from your
23            account settings. Your access will continue until the
24            end of your billing period.
25        </Accordion.Content>
26    </Accordion.Item>
27    <Accordion.Item value="item-3">
28        <Accordion.Trigger>Do you offer refunds?</Accordion.Trigger>
29        <Accordion.Content>
30            Yes, we offer a 30-day money-back guarantee for all new
31            subscriptions. If you're not satisfied, contact our
32            support team for a full refund.
33        </Accordion.Content>
34    </Accordion.Item>
35</Accordion.Root>
36

Splitted Variant

Separate bordered cards for each item with spacing between them.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" variant="splitted" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger
9            >How do I create an account?</Accordion.Trigger
10        >
11        <Accordion.Content>
12            Click the "Sign Up" button in the top right corner. Fill
13            in your email, create a password, and you're ready to
14            go!
15        </Accordion.Content>
16    </Accordion.Item>
17    <Accordion.Item value="item-2">
18        <Accordion.Trigger
19            >How do I reset my password?</Accordion.Trigger
20        >
21        <Accordion.Content>
22            Click "Forgot Password" on the login page. Enter your
23            email address, and we'll send you a link to reset your
24            password.
25        </Accordion.Content>
26    </Accordion.Item>
27    <Accordion.Item value="item-3">
28        <Accordion.Trigger
29            >Can I change my username?</Accordion.Trigger
30        >
31        <Accordion.Content>
32            Yes, you can change your username in your profile
33            settings. Note that this can only be done once every 30
34            days.
35        </Accordion.Content>
36    </Accordion.Item>
37</Accordion.Root>
38

Shadow Variant

A bordered container with shadow for outline appearance.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" variant="shadow" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger
9            >What is your data retention policy?</Accordion.Trigger
10        >
11        <Accordion.Content>
12            We retain your data for as long as your account is
13            active. Upon account deletion, your data is permanently
14            removed within 30 days.
15        </Accordion.Content>
16    </Accordion.Item>
17    <Accordion.Item value="item-2">
18        <Accordion.Trigger
19            >How is my data protected?</Accordion.Trigger
20        >
21        <Accordion.Content>
22            We use industry-standard encryption (AES-256) for data
23            at rest and TLS 1.3 for data in transit. Our systems are
24            regularly audited.
25        </Accordion.Content>
26    </Accordion.Item>
27    <Accordion.Item value="item-3">
28        <Accordion.Trigger>Can I export my data?</Accordion.Trigger>
29        <Accordion.Content>
30            Yes, you can export all your data at any time from your
31            account settings. We provide exports in JSON and CSV
32            formats.
33        </Accordion.Content>
34    </Accordion.Item>
35</Accordion.Root>
36

Multiple Selection

Allow multiple items to be expanded at the same time.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="multiple" variant="bordered" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger>Frontend Development</Accordion.Trigger>
9        <Accordion.Content>
10            <ul class="list-disc list-inside space-y-1">
11                <li>React, Vue, Svelte</li>
12                <li>TypeScript</li>
13                <li>CSS & Tailwind</li>
14                <li>State Management</li>
15            </ul>
16        </Accordion.Content>
17    </Accordion.Item>
18    <Accordion.Item value="item-2">
19        <Accordion.Trigger>Backend Development</Accordion.Trigger>
20        <Accordion.Content>
21            <ul class="list-disc list-inside space-y-1">
22                <li>Node.js, Python, Go</li>
23                <li>REST & GraphQL APIs</li>
24                <li>Database Design</li>
25                <li>Authentication & Security</li>
26            </ul>
27        </Accordion.Content>
28    </Accordion.Item>
29    <Accordion.Item value="item-3">
30        <Accordion.Trigger>DevOps & Cloud</Accordion.Trigger>
31        <Accordion.Content>
32            <ul class="list-disc list-inside space-y-1">
33                <li>Docker & Kubernetes</li>
34                <li>CI/CD Pipelines</li>
35                <li>AWS, GCP, Azure</li>
36                <li>Infrastructure as Code</li>
37            </ul>
38        </Accordion.Content>
39    </Accordion.Item>
40</Accordion.Root>
41

Disabled Items

Some items can be disabled to prevent interaction.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" variant="splitted" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger>Available Feature</Accordion.Trigger>
9        <Accordion.Content>
10            This feature is fully available and ready to use.
11        </Accordion.Content>
12    </Accordion.Item>
13    <Accordion.Item value="item-2" disabled>
14        <Accordion.Trigger
15            >Premium Feature (Locked)</Accordion.Trigger
16        >
17        <Accordion.Content>
18            Upgrade to premium to unlock this feature.
19        </Accordion.Content>
20    </Accordion.Item>
21    <Accordion.Item value="item-3">
22        <Accordion.Trigger
23            >Another Available Feature</Accordion.Trigger
24        >
25        <Accordion.Content>
26            This feature is also available for all users.
27        </Accordion.Content>
28    </Accordion.Item>
29</Accordion.Root>
30

Default Expanded

An accordion with an item expanded by default.

This section is expanded by default. Users can still collapse it.

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<Accordion.Root type="single" value="item-2" variant="bordered" class="w-full">
7    <Accordion.Item value="item-1">
8        <Accordion.Trigger>First Section</Accordion.Trigger>
9        <Accordion.Content>
10            This section is collapsed by default.
11        </Accordion.Content>
12    </Accordion.Item>
13    <Accordion.Item value="item-2">
14        <Accordion.Trigger
15            >Second Section (Default Open)</Accordion.Trigger
16        >
17        <Accordion.Content>
18            This section is expanded by default. Users can still
19            collapse it.
20        </Accordion.Content>
21    </Accordion.Item>
22    <Accordion.Item value="item-3">
23        <Accordion.Trigger>Third Section</Accordion.Trigger>
24        <Accordion.Content>
25            This section is also collapsed by default.
26        </Accordion.Content>
27    </Accordion.Item>
28</Accordion.Root>
29

Variants Comparison

Side-by-side comparison of all variants.

Default

Bordered

Splitted

Shadow

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<div class="grid md:grid-cols-2 gap-6">
7    <div>
8        <h3 class="text-sm font-medium mb-2 text-muted-foreground">
9            Default
10        </h3>
11        <Accordion.Root type="single" class="w-full">
12            <Accordion.Item value="item-1">
13                <Accordion.Trigger>Accordion Item</Accordion.Trigger
14                >
15                <Accordion.Content>
16                    Content for the default variant.
17                </Accordion.Content>
18            </Accordion.Item>
19        </Accordion.Root>
20    </div>
21    <div>
22        <h3 class="text-sm font-medium mb-2 text-muted-foreground">
23            Bordered
24        </h3>
25        <Accordion.Root
26            type="single"
27            variant="bordered"
28            class="w-full"
29        >
30            <Accordion.Item value="item-1">
31                <Accordion.Trigger>Accordion Item</Accordion.Trigger
32                >
33                <Accordion.Content>
34                    Content for the bordered variant.
35                </Accordion.Content>
36            </Accordion.Item>
37        </Accordion.Root>
38    </div>
39    <div>
40        <h3 class="text-sm font-medium mb-2 text-muted-foreground">
41            Splitted
42        </h3>
43        <Accordion.Root
44            type="single"
45            variant="splitted"
46            class="w-full"
47        >
48            <Accordion.Item value="item-1">
49                <Accordion.Trigger>Accordion Item</Accordion.Trigger
50                >
51                <Accordion.Content>
52                    Content for the splitted variant.
53                </Accordion.Content>
54            </Accordion.Item>
55        </Accordion.Root>
56    </div>
57    <div>
58        <h3 class="text-sm font-medium mb-2 text-muted-foreground">
59            Shadow
60        </h3>
61        <Accordion.Root
62            type="single"
63            variant="shadow"
64            class="w-full"
65        >
66            <Accordion.Item value="item-1">
67                <Accordion.Trigger>Accordion Item</Accordion.Trigger
68                >
69                <Accordion.Content>
70                    Content for the shadow variant.
71                </Accordion.Content>
72            </Accordion.Item>
73        </Accordion.Root>
74    </div>
75</div>
76
77

Real-World Example: FAQ

Code Svelte

1
2<script lang="ts">
3    import { AccordionPrimitives as Accordion} from "@kareyes/aether";
4</script>
5
6<div class="max-w-2xl">
7    <Accordion.Root type="single" variant="splitted" class="w-full">
8        <Accordion.Item value="shipping">
9            <Accordion.Trigger
10                >What are your shipping options?</Accordion.Trigger
11            >
12            <Accordion.Content>
13                <p class="mb-2">
14                    We offer several shipping options:
15                </p>
16                <ul
17                    class="list-disc list-inside space-y-1 text-muted-foreground"
18                >
19                    <li>
20                        <strong>Standard Shipping:</strong> 5-7 business
21                        days - Free on orders over $50
22                    </li>
23                    <li>
24                        <strong>Express Shipping:</strong> 2-3 business
25                        days - $9.99
26                    </li>
27                    <li>
28                        <strong>Overnight Shipping:</strong> Next business
29                        day - $24.99
30                    </li>
31                </ul>
32            </Accordion.Content>
33        </Accordion.Item>
34        <Accordion.Item value="returns">
35            <Accordion.Trigger
36                >What is your return policy?</Accordion.Trigger
37            >
38            <Accordion.Content>
39                We offer a hassle-free 30-day return policy. Items
40                must be unused and in their original packaging. Once
41                we receive your return, refunds are processed within
42                5-7 business days.
43            </Accordion.Content>
44        </Accordion.Item>
45        <Accordion.Item value="warranty">
46            <Accordion.Trigger
47                >Do your products come with a warranty?</Accordion.Trigger
48            >
49            <Accordion.Content>
50                Yes! All our products come with a 1-year
51                manufacturer's warranty. Extended warranty options
52                are available at checkout for an additional 2 years
53                of coverage.
54            </Accordion.Content>
55        </Accordion.Item>
56        <Accordion.Item value="international">
57            <Accordion.Trigger
58                >Do you ship internationally?</Accordion.Trigger
59            >
60            <Accordion.Content>
61                We currently ship to over 50 countries worldwide.
62                International shipping rates and delivery times vary
63                by location. You can see the available options at
64                checkout.
65            </Accordion.Content>
66        </Accordion.Item>
67    </Accordion.Root>
68</div>

Basic Usage

<script lang="ts">
  import * as Accordion from "@kareyes/aether";
</script>

<Accordion.Root type="single">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>
      Content for section 1.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Section 2</Accordion.Trigger>
    <Accordion.Content>
      Content for section 2.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

With Primitives Import

<script lang="ts">
  import { AccordionPrimitives } from "@kareyes/aether";
</script>

<AccordionPrimitives.Root type="single">
  <AccordionPrimitives.Item value="item-1">
    <AccordionPrimitives.Trigger>Section 1</AccordionPrimitives.Trigger>
    <AccordionPrimitives.Content>
      Content for section 1.
    </AccordionPrimitives.Content>
  </AccordionPrimitives.Item>
</AccordionPrimitives.Root>

Components

Component	Description
`Root`	The root container that manages state and context for the accordion
`Item`	Individual accordion item wrapper containing trigger and content
`Trigger`	The clickable header that toggles the content visibility
`Content`	The collapsible content section

Props Reference

Root

The root component that wraps the entire accordion.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	required	Whether single or multiple items can be expanded
`variant`	`"default" \| "bordered" \| "splitted" \| "shadow"`	`"default"`	Visual style variant
`value`	`string \| string[]`	`undefined`	The value(s) of the expanded item(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Callback when expanded items change
`disabled`	`boolean`	`false`	Whether the accordion is disabled
`loop`	`boolean`	`true`	Whether to loop through items with arrow keys
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The orientation of the accordion
`class`	`string`	-	Additional CSS classes

Item

Individual accordion item wrapper.

Prop	Type	Default	Description
`value`	`string`	required	Unique identifier for the item
`disabled`	`boolean`	`false`	Whether the item is disabled
`class`	`string`	-	Additional CSS classes

Trigger

The clickable header element.

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	The heading level for accessibility
`class`	`string`	-	Additional CSS classes

Content

The collapsible content section.

Prop	Type	Default	Description
`forceMount`	`boolean`	`true`	Whether to mount content regardless of open state
`class`	`string`	-	Additional CSS classes

Variants

Default

The classic accordion with bottom borders and underline hover effect on triggers.

<Accordion.Root type="single">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Default Style</Accordion.Trigger>
    <Accordion.Content>Content here</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Bordered

A contained accordion with a border around the entire component and dividers between items.

<Accordion.Root type="single" variant="bordered">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Bordered Style</Accordion.Trigger>
    <Accordion.Content>Content here</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Splitted

Each item is a separate bordered card with spacing between them.

<Accordion.Root type="single" variant="splitted">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Splitted Style</Accordion.Trigger>
    <Accordion.Content>Content here</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Shadow

Similar to bordered but with a subtle shadow for an elevated appearance.

<Accordion.Root type="single" variant="shadow">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Shadow Style</Accordion.Trigger>
    <Accordion.Content>Content here</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Examples

Multiple Selection

Allow multiple items to be expanded simultaneously:

<Accordion.Root type="multiple" variant="splitted">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>Content for section 1.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Section 2</Accordion.Trigger>
    <Accordion.Content>Content for section 2.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Default Expanded

Set an item to be expanded by default:

<Accordion.Root type="single" value="item-2">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Collapsed by default</Accordion.Trigger>
    <Accordion.Content>Content</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Expanded by default</Accordion.Trigger>
    <Accordion.Content>This section is open initially.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

FAQ Section

<Accordion.Root type="single" variant="splitted" class="w-full max-w-2xl">
  <Accordion.Item value="shipping">
    <Accordion.Trigger>What are your shipping options?</Accordion.Trigger>
    <Accordion.Content>
      <p class="mb-2">We offer several shipping options:</p>
      <ul class="list-disc list-inside space-y-1">
        <li>Standard Shipping: 5-7 business days</li>
        <li>Express Shipping: 2-3 business days</li>
        <li>Overnight Shipping: Next business day</li>
      </ul>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="returns">
    <Accordion.Trigger>What is your return policy?</Accordion.Trigger>
    <Accordion.Content>
      We offer a 30-day money-back guarantee for all purchases.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Settings Panel

<Accordion.Root type="multiple" variant="bordered">
  <Accordion.Item value="notifications">
    <Accordion.Trigger>Notification Settings</Accordion.Trigger>
    <Accordion.Content>
      <!-- Notification toggles -->
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="privacy">
    <Accordion.Trigger>Privacy Settings</Accordion.Trigger>
    <Accordion.Content>
      <!-- Privacy options -->
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="account">
    <Accordion.Trigger>Account Settings</Accordion.Trigger>
    <Accordion.Content>
      <!-- Account options -->
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

With Disabled Items

<Accordion.Root type="single" variant="splitted">
  <Accordion.Item value="basic">
    <Accordion.Trigger>Basic Features</Accordion.Trigger>
    <Accordion.Content>Available to all users.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="premium" disabled>
    <Accordion.Trigger>Premium Features (Upgrade Required)</Accordion.Trigger>
    <Accordion.Content>Upgrade your plan to access.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Accessibility

The Accordion component follows the WAI-ARIA Accordion Pattern:

Keyboard Navigation

Key	Action
`Enter` / `Space`	Toggle the focused item
`Arrow Down`	Move focus to the next item
`Arrow Up`	Move focus to the previous item
`Home`	Move focus to the first item
`End`	Move focus to the last item

ARIA Attributes

aria-expanded indicates whether the content is visible
aria-controls links the trigger to its content
aria-labelledby associates content with its trigger
Proper heading structure with configurable level prop

Best Practices

Use descriptive trigger text: Make it clear what content will be revealed
Keep content focused: Each section should contain related information
Consider default expansion: Important content may benefit from being expanded by default
Test with screen readers: Ensure announcements are clear and helpful