Slots
Named slots across React, Vue, and HTML/Lit — compose hosts and items, no invented items props.
Overview
Named slots compose layout regions (header, body, footer, icons, and more). Put slot="name" on the child. Do not invent an items prop unless the API documents one.
Across frameworks
| React | Vue | HTML / Lit | |
|---|---|---|---|
| Named slot | Child with slot="header" | #header / v-slot:header on the host | Child with slot="header" |
| Default slot | Ordinary children | Ordinary children (or explicit #default) | Ordinary children inside the host |
| Icons | VuIcon / vu-icon with ion: ids — no inline SVG | ||
| Lists / trees | Compose host + item tags — not a config items array | ||
Examples
import { VuDialog } from "@velkin/react/dialog";
import { VuButton } from "@velkin/react/button";
import { VuIcon } from "@velkin/react/icon";
<VuDialog open={open} onVuClose={() => setOpen(false)}>
<span slot="header">Confirm</span>
<div slot="body">This action cannot be undone.</div>
<div slot="footer">
<VuButton variant="outline" onClick={() => setOpen(false)}>
Cancel
</VuButton>
<VuButton color="danger">Delete</VuButton>
</div>
</VuDialog>
<VuButton>
<VuIcon slot="start" icon="ion:save-outline" />
Save
</VuButton>Host + item composition (accordion):
import { VuAccordion } from "@velkin/react/accordion";
import { VuAccordionItem } from "@velkin/react/accordion-item";
<VuAccordion>
<VuAccordionItem value="a">
<span slot="header">Section A</span>
Panel A
</VuAccordionItem>
<VuAccordionItem value="b">
<span slot="header">Section B</span>
Panel B
</VuAccordionItem>
</VuAccordion>Edge cases
- Slot names come from each component's Slots table (for example dialog
header|body|footer). - Compose child tags (
VuAccordion+VuAccordionItem, orvu-accordion+vu-accordion-item) instead of config arrays. - Check each component's Slots table on Components.
Icons use
vu-icon / VuIcon with Iconify ion: ids — do not inline SVG.Next steps
- Events —
onVu*,v-model:*,@vu-* - Methods — refs and imperative APIs
- Appearance — shared visual props
- Icons —
ion:ids and icon-only names