The asChild prop

twc offers a flexible way to reuse your classes on another component using the asChild prop. This prop allows you to replace the default component with a custom child element while keeping the defined classes.

Usage

A good example is an Anchor component that you may want to reuse but with a next/link component. Let's see how you can achieve this using asChild:

Take an Anchor component:

import { twc } from "react-twc";
 
export const Anchor = twc.a`underline text-blue-800 hover:text-blue-900`;

You can reuse the style for a next/link using asChild prop:

import NextLink from "next/link";
import { Anchor } from "./components/anchor";
 
export default () => (
  <Anchor asChild>
    <NextLink href="/">Go home</NextLink>
  </Anchor>,
);

To learn more about asChild, read Radix documentation (opens in a new tab). twc uses Slot component (opens in a new tab) internally to implement asChild prop.