Skip to main content
Urbicon UI
source

Accordion

Collapsible content sections with expand/collapse animation. Supports single or multiple open items, three visual variants, keyboard navigation, and full ARIA accordion pattern.

Design tokens are named values — colors, spacing, radii — that form the single source of truth for your design system.

Semantic tokens map to foundation tokens. Swap the foundation layer and the entire UI updates automatically.

Yes — semantic tokens handle dark mode via the CSS light-dark() function. No manual dark: classes needed.

Loading syntax highlighting...

01 Examples

FAQ Section

A realistic FAQ layout with rich content — the canonical real-world use case for Accordion.

Frequently Asked Questions

Everything you need to know to get started.

Basic Svelte knowledge helps, but our components are designed with simple, declarative APIs. If you can write HTML and pass props, you're good to go. Check the Getting Started guide for a gentle introduction.

We use a 3-layer token system: foundation, semantic, and interaction tokens. Dark mode is handled automatically via light-dark() — no manual dark: classes needed.

Absolutely. Every component is tree-shakeable. Import only what you need and your bundle stays lean.

Yes. All components follow WAI-ARIA patterns, support keyboard navigation, and include proper focus management. We test with screen readers and respect prefers-reduced-motion.

Loading syntax highlighting...

Controlled State

Bind the open item via bind:value for external state management — useful when the accordion's selection drives other UI.
Open: what-is
A Svelte 5 component library with built-in i18n, semantic design tokens, and zero-config dark mode.
Yes — Urbicon UI is free and open-source under the MIT license.
Check the documentation, open a GitHub issue, or join the community Discord.
Loading syntax highlighting...

Custom Trigger

Replace the default trigger with a custom snippet for full control over the header layout — icons, badges, multi-line metadata.

Includes community support, basic components, and public repos only.

Priority support, private repos, advanced theming, and early access to new components.

Loading syntax highlighting...

02 Built on Collapsible

Accordion vs Collapsible

Accordion coordinates multiple panels via a shared context. For a single expand/collapse panel, use Collapsible directly.

Single panel → Collapsible

Use Collapsible when you need a single panel that manages its own state. No context, no coordination — just expand and collapse.

Multi-panel → Accordion

Opening this closes panel B. Accordion coordinates multiple Collapsible panels via a shared context.
Single-mode, multiple-mode, non-collapsible — all managed by the Accordion wrapper.
Loading syntax highlighting...

Architecture note: Each AccordionItem uses Collapsible internally for its expand/collapse animation and ARIA attributes. The Accordion component adds multi-item coordination (single/multiple mode, non-collapsible, disabled) on top. See the Collapsible docs for the standalone API.

03 Customization

slotClasses Override

Restyle individual slots with overrides that win the cascade — wider border in primary, tinted background, bold primary-colored trigger text, and an inset content rail.
Every slot is overridable: the item gets a two-pixel primary border + tinted background, the trigger inherits the primary intent in bold, the chevron matches, and the content inner pane adds a primary left rail for emphasis.
slotClasses are applied to every item in the accordion, keeping the visual language consistent across sections.
Loading syntax highlighting...

Glassmorphism (unstyled)

Fully custom frosted-glass accordion built entirely with class overrides.
The accordion strips all defaults in unstyled mode. Every visual detail — background, blur, text color, spacing — is hand-crafted through class props.
A single backdrop-blur layer on the item wraps both trigger and content — no seams, no double-blur where the two panes meet.
Proof that unstyled gives full creative freedom while keeping structure, animation, and accessibility intact.
Loading syntax highlighting...

Terminal (unstyled)

Monospace hacker aesthetic built entirely with class overrides.

NODE_ENV=production

PORT=3000

LOG_LEVEL=info

Process exited with code 0

● app.service - Application Server

  Active: active (running)

  Memory: 128.4M

[12:34:01] GET /api/health 200 2ms

[12:34:03] POST /api/users 201 45ms

[12:34:05] Listening on :3000

Loading syntax highlighting...

04 Accessibility

Built-in ARIA

Each trigger uses aria-expanded and aria-controls to link to its content panel. Content panels have role="region" with aria-labelledby pointing back to the trigger. The data-state attribute exposes open / closed for CSS-only styling.

Keyboard Navigation

Tab moves focus between triggers. Enter / Space toggle the focused item. Focus rings use focus-visible: so they only appear on keyboard navigation, never on mouse clicks.

Disabled State

Disabled triggers get the native disabled attribute, removing them from the tab order and preventing activation. Visual feedback via opacity-50 and cursor-not-allowed.

Reduced Motion

The expand/collapse animation uses CSS grid-template-rows transitions. When prefers-reduced-motion is enabled, transition durations are reduced via the design token system.

05 API Reference

15 props
15 props 1 required

No matching properties

No matching properties

06 Installation

Import

Loading syntax highlighting...
llm.txt