Connect components to your application.

React

Use onValueChange, onPageChange, onBillingChange, onPlanSelect, onSortChange, and onSelect to update controlled state. Customize content with renderPanel and renderCell.

<AnimatedTabs items={items} value={tab} onValueChange={setTab} renderPanel={(item) => <strong>{item.content}</strong>} />

Vue

Bind value, page, billing, selected-plan, sort, or selected-id with native v-model arguments. Listen to value-change, page-change, billing-change, plan-select, sort-change, and select for payloads. Named panel/cell slots customize content.

<AnimatedTabs :items="items" v-model:value="tab">
  <template #panel="{ item }"><strong>{{ item.content }}</strong></template>
</AnimatedTabs>

Svelte

Supply controlled values with callback props, and panel/cell snippets for custom content. The callbacks use the same payloads as React.

<AnimatedTabs {items} value={tab} onValueChange={(value) => tab = value}>
  {#snippet panel(item)}<strong>{item.content}</strong>{/snippet}
</AnimatedTabs>

Ownership and empty states

Install each complete source closure. Arrays require unique IDs; empty data remains readable. Controlled values update only when the application accepts the emitted change. Defaults initialize local state once. The examples let you hold controlled values, replace data, unmount/remount components, and retry a rejected save.