The same Select in five runtimes.
Every panel imports the real adapter package, and they all read from one shared fixture, so the comparison is like-for-like.
Show code
src/components/react/SelectDemo.tsx
<Select options={selectFixture.options} defaultValue={selectFixture.defaultValue} label="Region" />
Show code
src/components/SelectDemo.vue
<Select :options="selectFixture.options" :default-value="selectFixture.defaultValue" label="Region" />
Show code
src/components/angular/select-demo.component.ts
<grassroot-select [options]="selectFixture.options" [defaultValue]="selectFixture.defaultValue" label="Region" />
Show code
src/components/SelectDemo.svelte
<Select options={selectFixture.options} defaultValue={selectFixture.defaultValue} label="Region" />
Show code
src/components/solid/SelectDemo.tsx
<Select options={selectFixture.options} defaultValue={selectFixture.defaultValue} label="Region" />How the page is built
Astro emits every panel as HTML up front. client:visible holds each framework runtime back until the panel you picked scrolls into view, and the tab strip itself is one vanilla island that all five examples share.
The catch
Open every tab and all five islands stay mounted, so the page gets heavier the more you click. That's measured rather than assumed. Tearing the idle ones back down is perfectly doable, it just hasn't been worth the work yet.