Theme

Accordion

display @dryui/ui Compound

Collapsible content sections, single or multiple mode

disclosurecollapseexpandfaq

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Accordion } from '@dryui/ui';
</script>

<Accordion.Root>
  <Accordion.Item value="a">
    <Accordion.Trigger>Section A</Accordion.Trigger>
    <Accordion.Content>Content for section A.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="b">
    <Accordion.Trigger>Section B</Accordion.Trigger>
    <Accordion.Content>Content for section B.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Import options

Root package

ts
import { Accordion } from '@dryui/ui'

Per-component subpath

ts
import { Accordion } from '@dryui/ui/accordion'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Frequently Asked Questions

Yes. dryui is MIT-licensed and free for personal and commercial use, with no attribution required.
No. dryui has zero runtime dependencies. It only requires Svelte 5 as a peer dependency, which you already have in any Svelte 5 project.
Absolutely. dryui uses a three-tier CSS variable system. Override the semantic tokens like --dry-color-primary to match your brand palette, or go deeper and customize individual component variables.
Yes. All components are built on native browser APIs and render correctly in SSR environments. They work seamlessly with SvelteKit's static adapter.
svelte
<Accordion.Root type="multiple">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is dryui free to use in commercial projects?</Accordion.Trigger>
    <Accordion.Content>
      Yes. dryui is MIT-licensed and free for personal and commercial use, with no attribution required.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Do I need to install any peer dependencies?</Accordion.Trigger>
    <Accordion.Content>
      No. dryui has zero runtime dependencies. It only requires Svelte 5 as a peer dependency, which you already have in any Svelte 5 project.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Can I customize the theme and colors?</Accordion.Trigger>
    <Accordion.Content>
      Absolutely. dryui uses a three-tier CSS variable system. Override the semantic tokens like --dry-color-primary to match your brand palette, or go deeper and customize individual component variables.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-4">
    <Accordion.Trigger>Does it work with SSR and static site generation?</Accordion.Trigger>
    <Accordion.Content>
      Yes. All components are built on native browser APIs and render correctly in SSR environments. They work seamlessly with SvelteKit's static adapter.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Exclusive Mode (single)

Content for section A.
Content for section B.
svelte
<Accordion.Root type="single">
  <Accordion.Item value="a">
    <Accordion.Trigger>Section A</Accordion.Trigger>
    <Accordion.Content>Content for section A.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="b">
    <Accordion.Trigger>Section B</Accordion.Trigger>
    <Accordion.Content>Content for section B.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Structure

Compound components always start with Accordion.Root. Use this structure block to understand required wrappers before you wire state or styling.

Accordion.Root
  Accordion.Item
    Accordion.Trigger
    Accordion.Content
Accordion.Root Accordion.ItemAccordion.TriggerAccordion.Content

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Accordion.Root, then add only the parts you need.

Accordion.ItemAccordion.TriggerAccordion.Content

Accordion.Root

Prop Type Default Required Bindable
type
singlemultiple
 — — —
value
string[]
[] — —
orientation
horizontalvertical
 — — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Accordion.Item

Prop Type Default Required Bindable
value
string
— ✓ —
disabled
boolean
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Accordion.Trigger

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <button> attributes via rest props. Common examples: type, disabled, name.

Accordion.Content

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.