NPM Version Types Included Minizipped Size NPM Downloads Follow @NFS__21 on Twitter
this is a helper library for cva which this uses internally, for creating react components. for more information view cva docs.
npm i react-cva
with tailwind css
import { styled } from "react-cva"; const Button = styled("button")("button", { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600", ], secondary: [ "bg-white", "text-gray-800", "border-gray-400", "hover:bg-gray-100", ], }, size: { small: ["text-sm", "py-1", "px-2"], medium: ["text-base", "py-2", "px-4"], }, }, compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }], defaultVariants: { intent: "primary", size: "medium", }, }); const Render = () => { return ( <div> <Button intent="primary">test</Button> </div> ); };
with css modules
import { styled } from "react-cva"; import style from "./button.module.css"; const Button = styled("button")(style.base, { variants: { intent: { primary: style.primary, secondary: style.secondary, }, size: { small: style.small, medium: style.medium, }, }, compoundVariants: [ { intent: "primary", size: "medium", class: style.primaryMedium }, ], defaultVariants: { intent: "primary", size: "medium", }, }); const Render = () => { return ( <div> <Button>test</Button> </div> ); };
Builds a styled component
const Component = styled("div")("base", options);
div: tag type (HtmlElement)base: the base class name (string,string[]ornull)options(optional)variants: your variants schemacompoundVariants: variants based on a combination of previously defined variantsdefaultVariants: set default values for previously defined variants
A JSX Element