Components
Accordion component
An kit:accordion lets you group content into collapsible sections. It improves legibility and saves space in an interface, while offering precise control over the display of information. It is composed of two parts: kit:accordion as the container and kit:accordion-item for each collapsible entry.
Role of the Accordion component
- Manages the layout and shared visual configuration of all items
- Delegates open/close state to an external
useAccordionhook - Renders accessible trigger buttons with
aria-expanded - Supports single or multiple open items depending on the hook configuration
Lapikit is a Svelte component library designed to help you build modern, accessible, and
customizable user interfaces with minimal effort.
Install the package via npm:
npm install lapikit, then import the components you
need directly into your Svelte files.<script lang="ts">
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion();
</script>
<kit:accordion>
<kit:accordion-item
index={0}
text="What is Lapikit?"
open={accordion.values.includes(0)}
toggle={accordion.toggle}
>
Lapikit is a Svelte component library designed to help you build modern, accessible, and
customizable user interfaces with minimal effort.
</kit:accordion-item>
<kit:accordion-item
index={1}
text="How do I install Lapikit?"
open={accordion.values.includes(1)}
toggle={accordion.toggle}
>
Install the package via npm: <code>npm install lapikit</code>, then import the components you
need directly into your Svelte files.
</kit:accordion-item>
</kit:accordion>
kit:accordion is a controlled component: it has no internal state. You manage open/close externally and pass two props to each item - open (boolean) and toggle (function called with the item’s index on click).
The recommended way is the useAccordion hook from lapikit/actions, which handles the reactive state for you.
Each kit:accordion-item requires a unique index (string or number).
kit:accordion-item does nothing without a toggle function - state is always external.
Examples of accordion
Spacer
The spacer prop adds a gap between items, useful when items have a rounded radius and need visual separation.
- spacer:
boolean=false
<script lang="ts">
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion();
</script>
<kit:accordion spacer>
<kit:accordion-item
index={0}
text="What is Lapikit?"
open={accordion.values.includes(0)}
toggle={accordion.toggle}
>
Lapikit is a Svelte component library designed to help you build modern, accessible, and
customizable user interfaces with minimal effort.
</kit:accordion-item>
<kit:accordion-item
index={1}
text="How do I install Lapikit?"
open={accordion.values.includes(1)}
toggle={accordion.toggle}
>
Install the package via npm: <code>npm install lapikit</code>, then import the components you
need directly into your Svelte files.
</kit:accordion-item>
</kit:accordion>
Multiple items open
Pass { multiple: true } to useAccordion to allow several items to be expanded at the same time.
- multiple:
boolean=false
<script>
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion({ multiple: true });
const items = [
{
index: '1',
title: 'Design tokens',
content:
'Lapikit uses CSS custom properties for colors, spacing, and radius - making theming straightforward.'
},
{
index: '2',
title: 'Component preprocess',
content:
'The preprocessor transforms kit:* syntax into native Svelte components at build time, with zero runtime overhead.'
},
{
index: '3',
title: 'SvelteKit integration',
content:
'Lapikit is designed to work with SvelteKit layouts. Place kit:app in your root +layout.svelte to cover the whole app.'
}
];
</script>
<kit:accordion spacer>
{#each items as item (item)}
<kit:accordion-item
index={item.index}
open={accordion.values.includes(item.index)}
toggle={accordion.toggle}
text={item.title}
>
{item.content}
</kit:accordion-item>
{/each}
</kit:accordion>
readOnly and disabled
readOnly locks an item in its current state without applying disabled styling. disabled prevents interaction and visually dims the item.
- readOnly:
boolean=false - disabled:
boolean=false
<script>
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion();
</script>
<kit:accordion>
<kit:accordion-item
index={0}
text="Always visible (readOnly)"
open={true}
toggle={accordion.toggle}
readOnly
>
This item is open by default and cannot be collapsed. Use <code>readOnly</code> to lock an item in
its current state without applying disabled styling.
</kit:accordion-item>
<kit:accordion-item
index={1}
text="Normal item"
open={accordion.values.includes(1)}
toggle={accordion.toggle}
>
This item can be toggled normally.
</kit:accordion-item>
<kit:accordion-item
index={2}
text="Disabled item"
open={accordion.values.includes(2)}
toggle={accordion.toggle}
disabled
>
This content is unreachable because the item is disabled.
</kit:accordion-item>
</kit:accordion>
hideIcon
The hideIcon prop on kit:accordion hides the chevron indicator on all child items via a CSS rule on the container.
- hideIcon:
boolean=false
<script>
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion();
</script>
<kit:accordion hideIcon>
<kit:accordion-item
index={0}
text="No indicator icon"
open={accordion.values.includes(0)}
toggle={accordion.toggle}
>
The chevron icon is hidden on all items when <code>hideIcon</code> is set on the parent
<code>kit:accordion</code>.
</kit:accordion-item>
<kit:accordion-item
index={1}
text="Also no icon here"
open={accordion.values.includes(1)}
toggle={accordion.toggle}
>
<code>hideIcon</code> applies globally to every child item via a CSS rule on the container.
</kit:accordion-item>
</kit:accordion>
activator snippet
Use the activator snippet to fully customize the trigger content - replaces the text prop. It receives no arguments.
- activator:
Snippet | undefined=undefined
<script>
import { Boxes, Tractor } from 'lucide-svelte';
import { useAccordion } from 'lapikit/actions';
const accordion = useAccordion();
</script>
<kit:accordion>
<kit:accordion-item index={0} open={accordion.values.includes(0)} toggle={accordion.toggle}>
{#snippet activator()}
<span style="display: flex; align-items: center; gap: 0.5rem;">
<kit:icon><Tractor /></kit:icon>
<span>
<strong>Design tokens</strong>
<small style="display: block; opacity: 0.6;">Colors, spacing, radius</small>
</span>
</span>
{/snippet}
Lapikit uses CSS custom properties for colors, spacing, and radius - making theming
straightforward without overriding component internals.
</kit:accordion-item>
<kit:accordion-item index={1} open={accordion.values.includes(1)} toggle={accordion.toggle}>
{#snippet activator()}
<span style="display: flex; align-items: center; gap: 0.5rem;">
<kit:icon><Boxes /></kit:icon>
<span>
<strong>Preprocessor</strong>
<small style="display: block; opacity: 0.6;">kit:* syntax at build time</small>
</span>
</span>
{/snippet}
The preprocessor transforms <code>kit:*</code> syntax into native Svelte components at build time,
with zero runtime overhead.
</kit:accordion-item>
</kit:accordion>
indicator snippet
Use the indicator snippet to replace the default chevron with a custom element. It receives { open: boolean } so you can adapt the rendering to the item’s state.
- indicator:
Snippet<[{ open: boolean }]> | undefined=undefined
<script lang="ts">
import { Anvil, BadgeMinus, BadgePlus, ChessRook } from 'lucide-svelte';
import { useAccordion } from 'lapikit/actions';
import type { ModelAccordionItemProps } from 'lapikit/components';
const accordion = useAccordion();
</script>
<kit:accordion>
<kit:accordion-item
index={0}
text="What is Lapikit?"
open={accordion.values.includes(0)}
toggle={accordion.toggle}
>
{#snippet indicator({ open }: ModelAccordionItemProps)}
<kit:icon>
{#if open}
<BadgeMinus />
{:else}
<BadgePlus />
{/if}
</kit:icon>
{/snippet}
Lapikit is a Svelte component library designed to help you build modern, accessible, and customizable
user interfaces with minimal effort.
</kit:accordion-item>
<kit:accordion-item
index={1}
text="How do I install Lapikit?"
open={accordion.values.includes(1)}
toggle={accordion.toggle}
>
{#snippet indicator({ open }: ModelAccordionItemProps)}
<kit:icon>
{#if open}
<Anvil />
{:else}
<ChessRook />
{/if}
</kit:icon>
{/snippet}
Install the package via npm: <code>npm install lapikit</code>, then import the components you
need directly into your Svelte files.
</kit:accordion-item>
</kit:accordion>
Without preprocess Lapikit
If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:
import { Accordion, AccordionItem } from 'lapikit/components';
import { useAccordion } from 'lapikit/actions';API References
kit:accordion
| props | type | description | default |
|---|---|---|---|
| ref $bindable | HTMLElement | Bindable reference to the rendered DOM element. | null |
| is | div | Defines the HTML tag used as the root element. | 'div' |
| s-class | enum'string''array''object' | Sets className on accordion | |
| s-style | enum'string''array''object' | Sets styles on accordion | |
| spacer | boolean | Adds a gap between items. | |
| hideIcon | boolean | Hides the indicator icon on all child items. | |
| rounded | enum0'xs''sm''md''lg''xl''full' | Border radius applied to all items. | 'md' |
| text | string | Applies a text color CSS variable. | |
| density | enum'none''compact''default''comfortable' | Spacing inside accordion. | 'default' |
| size | enum'xs''sm''md''lg''xl' | Sizing height, font and gap for accordion items. | 'md' |
| variant | enum'filled''outline''text' | Visual style of the accordion items. | 'filled' |
| color | string | Foreground color override (--kit-accordion-item-fg). | |
| background | string | Background color override (--kit-accordion-item-bg). | |
| children | Snippet | Accordion items to render. |
kit:accordion-item
| props | type | description | default |
|---|---|---|---|
| ref $bindable | HTMLElement | Bindable reference to the rendered DOM element. | null |
| is | div | Defines the HTML tag used as the root element. | 'div' |
| s-class | enum'string''array''object' | Sets className on accordion item | |
| s-style | enum'string''array''object' | Sets styles on accordion item | |
| index | string | number | Unique identifier for this item. Required. | |
| open | boolean | Whether the item is expanded. | false |
| toggle | (index: string | number) => void | Called when the trigger is clicked. Receives the item’s index. | |
| text | string | Label displayed in the trigger button. | |
| activator | Snippet | Custom trigger content - replaces text. | |
| indicator | Snippet<[{ open: boolean }]> | Custom indicator - replaces the default chevron icon. | |
| disabled | boolean | Prevents the item from being toggled. | false |
| readOnly | boolean | Renders the item as non-interactive without disabled styling. | false |
| color | string | Foreground color override (--kit-accordion-item-fg). | |
| background | string | Background color override (--kit-accordion-item-bg). | |
| children | Snippet | Content revealed when the item is open. | |
| elevation | ElevationStateenum'0''1''2''3''4''5' | Add shadow effect |
For the state hook API, see the dedicated useAccordion page and for complete your kit:accordion interface, consider the Icon and Chip components for dynamic content.