0Pricing
Sveltejs Academy · Lesson

Compound Components with Context

Build multi-part components that share state through context.

Compound Components

A compound component is one logical UI split into several sub-components that coordinate (Tabs + Tab + TabPanel).

Shared State via Context

The parent sets shared state in context; children read it via getContext.

<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });

All lessons in this course

  1. Render Props with Snippets
  2. Higher-Order Components
  3. The Builder Pattern for Headless UI
  4. Compound Components with Context
← Back to Sveltejs Academy