styled-cva

import tw from "@styled-cva/react";

// Intrinsic CVA shorthand with typed variant inference
export const Button = tw.button(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
  {
    variants: {
      $variant: {
        primary: "bg-blue-600 text-white hover:bg-blue-700",
        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
      },
      $size: {
        sm: "h-8 px-3 text-xs",
        md: "h-10 px-4 text-sm",
      },
    },
    defaultVariants: {
      $variant: "primary",
      $size: "md",
    },
  },
);

// Full autocompletion on $variant and $size props:
export const App = () => (
  <Button $variant="primary" $size="md">
    Click me
  </Button>
);

import Link from "next/link";
import tw from "@styled-cva/react";

export const ActionButton = tw.button(
  "inline-flex items-center justify-center rounded-md px-4 py-2 font-medium",
  {
    variants: {
      $variant: {
        primary: "bg-blue-600 text-white",
        ghost: "bg-transparent text-slate-700",
      },
    },
  },
);

// $as swaps the element or custom component while keeping variant typings
export const Navigation = () => (
  <nav className="flex gap-2">
    <ActionButton $as="a" href="https://github.com/alanrsoares/styled-cva">
      GitHub
    </ActionButton>
    <ActionButton $as={Link} href="/docs" $variant="primary">
      Documentation
    </ActionButton>
  </nav>
);

import tw from "@styled-cva/react";

// Tagged template syntax with Tailwind CSS utilities
export const Card = tw.div`
  rounded-xl border border-slate-200 bg-white p-6 shadow-sm
  transition-shadow hover:shadow-md
`;

export const CardTitle = tw.h3`
  text-lg font-semibold text-slate-900
`;

export const CardDescription = tw.p`
  mt-1 text-sm text-slate-500
`;