DEV Community

Cover image for TWC is not a revolution but…
Jeremy SFEZ
Jeremy SFEZ

Posted on • Updated on

TWC is not a revolution but…

I'm a true fan of shadcn/ui as it offers out-of-the-box components that are highly customizable. By blending TailwindCSS for styling and theming, along with Radix for accessibility, it provides a smart kick-start for product development.

However, at some point, you will have to create your own React-TypeScript components, which can become complicated, even for coding a simple styled div:

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-xl border bg-card text-card-foreground shadow",
      className
    )}
    {...props}
  />
))
Enter fullscreen mode Exit fullscreen mode

Enter TWC, that dramatically simplifies this with a straightforward syntax:

import { twc } from "react-twc";

const Card = twc.div`rounded-xl border bg-card text-card-foreground shadow`;
Enter fullscreen mode Exit fullscreen mode

Among other features TWC offers some useful helpers like handling conditional classes, cva support and conditional props.

import { twc, TwcComponentProps } from "react-twc";

type ButtonProps = TwcComponentProps<"button"> & { $primary?: boolean };

// Conditional ClassNames
const Button = twc.button<ButtonProps>((props) => [
  "font-semibold border border-blue-500 rounded",
  props.$primary ? "bg-blue-500 text-white" : "bg-white text-gray-800",
]);
Enter fullscreen mode Exit fullscreen mode
import { twc, TwcComponentProps } from "react-twc";

// Adds `target` and `rel` attributes on external links
const Anchor = twc.a.attrs<AnchorProps>((props) =>
  props.$external ? { target: "_blank", rel: "noopener noreferrer" } : {},
)`appearance-none size-4 border-2 border-blue-500 rounded-sm bg-white`;
Enter fullscreen mode Exit fullscreen mode

Integration with Other Libraries

TWC can be used to add TailwindCSS classes on several design systems components including Radix or React Aria.

Takeaway

TWC is not a revolution, but it's a lib crafted by an experienced developer (gregberge), that addresses the frustrations of building React components in modern stacks. For me, it's a ❤️ tool that enhances development experience, and my productivity.

Top comments (1)

Collapse
 
gregberge profile image
Greg Bergé

Thanks! I created TWC to help developers be more productive. I am very happy that it fulfills its mission 🤗