tetra-ui Logotetra ui

Slot

A utility component that allows merging props onto an optional child component.

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 * as Slot from "@/components/ui/slot";
export const Button = ({ asChild, children, ...props }: ButtonProps) => {
  const Comp = asChild ? Slot.Pressable : Pressable;

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

On this page