Slot

Installation

npm install @native-ui-org/primitives

pnpm add @native-ui-org/primitives

yarn add @native-ui-org/primitives

bun add @native-ui-org/primitives

Overview

Slot is the foundation for the asChild pattern used across all primitives. It merges props, composes event handlers, and forwards refs without adding DOM nodes.

Setup & Usage Guide

Slot is a low-level utility used internally by primitives. You typically don't use it directly unless building your own primitive components.

1. Install and Import

Install from npm:

npm install @native-ui-org/primitives

Then import from the package:

import { Slot } from "@native-ui-org/primitives";

2. Basic Usage

Slot merges props from parent into its child:

<Slot style={{ padding: 16 }}>
  <Pressable onPress={() => console.log('pressed')}>
    <Text>Click me</Text>
  </Pressable>
</Slot>

3. Building Polymorphic Components

Use Slot to create components that support asChild:

interface ButtonProps {
  asChild?: boolean;
  children: React.ReactNode;
}

function Button({ asChild, children, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : Pressable;
  
  return (
    <Comp {...props} style={{ padding: 12, backgroundColor: 'blue' }}>
      {asChild ? children : <Text style={{ color: 'white' }}>{children}</Text>}
    </Comp>
  );
}

4. Event Handler Composition

Child handlers run first, then parent handlers:

<Slot onPress={() => console.log('Parent')}>
  <Pressable onPress={() => console.log('Child')}>
    <Text>Press me</Text>
  </Pressable>
</Slot>

// Logs: "Child", then "Parent"

API Reference

Slot

Polymorphic component that merges props into its child.

Key behaviors:

• Child props always win over parent props
• Event handlers are composed (child first, then parent)
• Refs are composed (both parent and child refs called)
• No style or className merging (keeps RN compatibility)

Platform Behavior

Accessibility

Slot is transparent and doesn't affect accessibility. All ARIA props are passed through to the child element.

Version History

Summary: Slot is a low-level utility for building polymorphic components. Most developers will use primitives with asChild support rather than Slot directly. Use it when building your own primitive components with flexible APIs.