Radix homepageRadix Homepage


Converts a primitive part into a slot.


  • Can be passed into the `as` prop of any primitive part to convert it to a slottable area.

Install the component from your command line.

npm install @radix-ui/react-slot

Import the component.

import { Slot } from '@radix-ui/react-slot';
export default () => (

Uses the as prop to convert the TooltipTrigger into a slottable area. It will render the button passed as children for the trigger.

// your-tooltip.jsx
import React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { Slot } from '@radix-ui/react-slot';
function Tooltip({ children, content, open, defaultOpen, onOpenChange, ...props }) {
return (
<TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} >
<TooltipPrimitive.Trigger as={Slot}>
<TooltipPrimitive.Content side="top" align="center" {...props}>
<TooltipPrimitive.Arrow offset={5} width={11} height={5} />
import { Tooltip } from './your-tooltip';
export default () => (
<Tooltip content="Tooltip content">
<button>Tooltip trigger</button>