@radix-ui/react-slot

What is @radix-ui/react-slot?

The @radix-ui/react-slot package is a utility for React that allows you to distribute elements as 'slots'. It is useful for component libraries and design systems where you want to provide a flexible API for component composition. It allows users to replace elements within a component while still maintaining the component's logic and styling.

What are @radix-ui/react-slot's main functionalities?

Slotting elements

This code demonstrates how to use the @radix-ui/react-slot package to create a flexible Button component that can render as a 'button' or as any other element passed to it, while preserving the button's behavior and styles.

{"import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nfunction Button({ children, asChild }) {\n  const Component = asChild ? Slot : 'button';\n  return <Component>{children}</Component>;\n}\n\nexport default function App() {\n  return (\n    <div>\n      <Button>Default button</Button>\n      <Button asChild>\n        <a href=\"#\">Link with button styling</a>\n      </Button>\n    </div>\n  );\n}"}

Other packages similar to @radix-ui/react-slot

react-slot-fill

The react-slot-fill package provides a similar slot and fill pattern for React components, allowing developers to define placeholder slots in their components and fill them from elsewhere in the component tree. It differs from @radix-ui/react-slot in its API and implementation details, but serves a similar purpose of component composition.

slotify

Slotify is another React library that offers a slot-based composition pattern. It allows for more complex slot arrangements and provides additional features like slot naming and default content. It is a more feature-rich alternative to @radix-ui/react-slot, but may come with a steeper learning curve.

README

react-slot

View docs here.