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 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`;
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",
]);
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`;
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.
SOCIAL SHARE CARD GENERATOR