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

Readme

Source

`react-slot`

Installation

$ yarn add @radix-ui/react-slot
# or
$ npm install @radix-ui/react-slot

Usage

View docs here.

FAQs

What is @radix-ui/react-slot?

Is @radix-ui/react-slot popular?

Is @radix-ui/react-slot well maintained?

Last updated on 26 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install