Slot

This component is mainly used internally to help manage composition patterns throughout the library by supporting the asChild prop.

Installation

npx shadcn@latest add @tetra-ui/slot

Usage

import { Slot } from "@/components/ui/slot";

export const Button = ({ asChild, children, ...props }: ButtonProps) => {
  const Comp = asChild ? Slot.Pressable : Pressable;

  return (
    <Comp {...props}>
      {children}
    </Comp>
  );
};

API Reference

Slot

Slot exports Pressable and View helpers that merge props onto a single child element. Use them when implementing an asChild pattern.

Slot.Pressable

Merges React Native Pressable props onto its single child. Event handlers, style, and className are composed; other child props override the slot.

Slot.View

Merges React Native View props onto its single child with the same merge rules as Slot.Pressable.