Skip to main content
Urbicon UI
source

Collapsible

A single expand/collapse panel with smooth animation, a default or custom trigger, and full ARIA support. The low-level primitive behind Accordion — use it standalone for simple show/hide patterns or as a building block for compound components.

Design tokens are named values — colors, spacing, radii — that form the single source of truth for your design system. They bridge the gap between design tools and code.

Loading syntax highlighting...

01 Examples

FAQ item

Stack multiple independent Collapsibles to build a FAQ list. Each panel opens and closes on its own — for single-open-at-a-time coordination, reach for Accordion instead.

Named values — colors, spacing, radii — that form the single source of truth for your design system. They bridge the gap between design tools and code.

No. Every component ships with sensible defaults. Tailwind helps when you want to override styles via slotClasses, but it's optional.

Yes. The components are SSR-safe and hydrate without layout shift. See the SvelteKit adapter docs for setup details.

Loading syntax highlighting...

Controlled section toggle

Drive the open state from outside via bind:open — useful for filter panels, settings sections, or any UI that needs to coordinate state with the rest of the page.
closed

This panel is controlled via bind:open. Toggle it with the button above or by clicking the trigger.

Loading syntax highlighting...

Release-notes item with custom trigger

Replace the default trigger via the trigger snippet to surface rich metadata — icons, badges, secondary text — while keeping the expand/collapse mechanics.

Features: New Collapsible component, improved Accordion internals, Stepper navigation.

Fixes: Dialog focus trap on Safari, Tooltip positioning near edges.

Loading syntax highlighting...

02 Customization

slotClasses Override

Restyle individual slots — trigger background, content padding, chevron color.
Override individual slots without touching the component source. The card gets a primary-tinted border, the trigger uses a semibold font, and the chevron matches the primary intent.
Loading syntax highlighting...

Glassmorphism (unstyled)

Fully custom frosted-glass panel built entirely with class overrides.
The component strips all defaults in unstyled mode. Every visual detail is hand-crafted through class props — background, blur, text color, spacing, and border radius.
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

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

The default trigger uses aria-expanded and aria-controls to link to the content panel. The content panel has 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 to the trigger. Enter / Space toggle the content. Focus rings use focus-visible: so they only appear on keyboard navigation.

Custom Triggers

When using the trigger snippet, the component passes triggerId and contentId so you can wire up aria-expanded and aria-controls yourself. The content region always gets the correct aria-labelledby.

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.

04 API Reference

16 props
16 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt