@pras-ui/slot

A slot utility package that wraps @radix-ui/react-slot with additional features. When using createTag, your components will gain support for asChild, as, and childProps props. This small yet powerful extension is built to enhance flexibility and composability within pras-ui.

---

📦 Installation

1npm install @pras-ui/slot
2# or
3yarn add @pras-ui/slot
4# or
5bun add @pras-ui/slot

---

🧩 API

Slot & Slottable

Slot and Slottable work together to manage dynamic content insertion and prop forwarding. While Slot can work independently, use Slottable when Slot wraps multiple children to ensure the correct one receives the props.

1import { Slot, Slottable } from "@pras-ui/slot";
2
3function ButtonWrapper({ children, ...props }) {
4  return (
5    <Slot {...props}>
6      <Slottable>
7        <div>child 1</div>
8      </Slottable>
9      <div>child 2</div>
10    </Slot>
11  );
12}
13
14// Props like `onClick` will be passed into the Slottable child
15<ButtonWrapper onClick={() => console.log("clicked")}>  
16  <button>Press</button>  
17</ButtonWrapper>;

---

createTag

createTag returns a component that supports flexible rendering via:

• asChild: forwards all props and refs to its only child
• as: replaces the rendered element/tag
• childProps: injects selective props into the child, without passing all parent props

Note: If asChild is true, childProps will be ignored. childProps only applies when asChild is false.

Props

Name	Type	Description
asChild	boolean	Forwards all props and refs to the only child element
as	React.ElementType	Overrides the rendered HTML/React tag
childProps	Partial<ComponentProps<E>> & object	Injects props into the child when not using asChild

Example

1import { createTag } from '@pras-ui/slot';
2
3const Box = createTag('div');
4
5// Default usage (renders as a div)
6<Box className="bg-gray-100">Hello</Box>
7
8// Render as a different tag
9<Box as="section">I'm a section</Box>
10
11// Forward props to child element
12<Box asChild>
13  <button onClick={() => alert('clicked')}>Click me</button>
14</Box>
15
16// Inject child-specific props only
17<Box
18  className="bg-gray-100" // only applies to Box
19  childProps={{ onClick: () => alert('clicked') }} // only applies to child
20>
21  <button>Click me</button>
22</Box>

---

createSlot & createSlottable

These helpers allow you to create namespaced Slot and Slottable components:

1const MySlot = createSlot("MyCustomSlot");
2const MySlottable = createSlottable("MyCustomSlot");

This is useful for managing multiple Slot contexts or scoped slot logic.

---

Notes

For more low-level details, refer to the official @radix-ui/react-slot documentation.