Extending components with tailwind-variants

[dvzrd]

I'm trying to add custom variants to existing components and I was somewhat able to do this using tailwind-variants but there's some issues with it. I was wondering what the recommended approach to extending or customizing components is?

Here's an example of what seems to work using the Card component:

import { Card as UICard, type CardProps as UICardProps } from "@nextui-org/card"
import { tv, type VariantProps } from "tailwind-variants"

const cardStyles = tv({
  extend: UICard,
  variants: {
    color: {
      default: "bg-default text-default-foreground",
      primary: "bg-primary text-primary-foreground",
      secondary: "bg-secondary text-secondary-foreground",
      content: "bg-content1 text-foreground",
      inherit: "bg-inherit text-inherit",
    },
    radius: {
      none: "rounded-none",
      sm: "rounded-sm md:rounded xl:rounded-md",
      md: "rounded-md md:rounded-lg xl:rounded-xl",
      lg: "rounded-lg md:rounded-xl xl:rounded-2xl",
      xl: "rounded-xl md:rounded-2xl xl:rounded-3xl",
    },
    size: {
      none: "p-0",
      xs: "p-2 xs:p-3 sm:p-4 md:p-5 lg:p-6 xl:p-7 gap-4 md:gap-5 xl:gap-6",
      sm: "p-3 xs:p-4 sm:p-5 md:p-6 lg:p-7 xl:p-8 gap-5 md:gap-6 xl:gap-7",
      md: "p-3 xs:p-5 sm:p-6 md:p-7 lg:p-8 xl:p-9 gap-6 md:gap-7 xl:gap-8",
      lg: "p-4 xs:p-6 sm:p-8 md:p-10 lg:p-14 xl:p-18 gap-5 md:gap-7 xl:gap-9",
      xl: "p-4 xs:p-7 sm:p-10 md:p-14 lg:p-18 xl:p-24 gap-6 md:gap-8 xl:gap-10",
    },
  },
  defaultVariants: {
    color: "content",
    radius: "md",
    size: "md",
  },
})

export interface CardProps extends Omit<UICardProps, "radius">, VariantProps<typeof cardStyles> {}

const Card = ({ className, color, radius, size, ...props }: CardProps) => {
  return <UICard className={cardStyles({ color, radius, size, className })} {...props} />
}

Card.displayName = "Card"

export default Card

Although this works, it's still a bit hacky because extending with the Card component instead of card tailwind-variants object I end up losing context for the rest of the props available to the Card component.

When I try extending the card style object from theme, I get problems trying to pass the new cardStyles object to base, probably because it expects a string, not a function. Same issue trying to use className.

import { Card as UICard, type CardProps as UICardProps } from "@nextui-org/card"
import { card } from "@nextui-org/theme"
import { tv, type VariantProps } from "tailwind-variants"

const cardStyles = tv({
  extend: card,
  variants: {
    color: {
      default: "bg-default text-default-foreground",
      primary: "bg-primary text-primary-foreground",
      secondary: "bg-secondary text-secondary-foreground",
      content: "bg-content1 text-foreground",
      inherit: "bg-inherit text-inherit",
    },
    radius: {
      none: "rounded-none",
      sm: "rounded-sm md:rounded xl:rounded-md",
      md: "rounded-md md:rounded-lg xl:rounded-xl",
      lg: "rounded-lg md:rounded-xl xl:rounded-2xl",
      xl: "rounded-xl md:rounded-2xl xl:rounded-3xl",
    },
    size: {
      none: "p-0",
      xs: "p-2 xs:p-3 sm:p-4 md:p-5 lg:p-6 xl:p-7 gap-4 md:gap-5 xl:gap-6",
      sm: "p-3 xs:p-4 sm:p-5 md:p-6 lg:p-7 xl:p-8 gap-5 md:gap-6 xl:gap-7",
      md: "p-3 xs:p-5 sm:p-6 md:p-7 lg:p-8 xl:p-9 gap-6 md:gap-7 xl:gap-8",
      lg: "p-4 xs:p-6 sm:p-8 md:p-10 lg:p-14 xl:p-18 gap-5 md:gap-7 xl:gap-9",
      xl: "p-4 xs:p-7 sm:p-10 md:p-14 lg:p-18 xl:p-24 gap-6 md:gap-8 xl:gap-10",
    },
  },
  defaultVariants: {
    color: "content",
    radius: "md",
    size: "md",
  },
})

export interface CardProps extends Omit<UICardProps, "radius">, VariantProps<typeof cardStyles> {
  className?: string
}

const Card = ({ className, color, radius, size, ...props }: CardProps) => {
  return <UICard classNames={{ base: cardStyles({ color, radius, size, className }) }} {...props} />
}

Card.displayName = "Card"

export default Card

I tried looking for something in the docs that could help, found this page: https://nextui.org/docs/customization/custom-variants#creating-new-variants-for-slots-components

But it seems you're only able to modify existing variants (i.e. adding a new color inside colors) but it's not possible to create new variants like (size or color for Card for example) using extendVariants.

So I'm wondering what is the recommended approach to customizing existing components. Is using the useCard hook the only option at this point? Would really appreciate some direction here, hopefully this can start a productive discussion at least if not a direct answer. Thanks for your time!

[dvzrd]

I figured it out - the issue was that Card is a slot component and there's a different pattern to passing extended styles to slot components. Here's how it should be done:

const Card = ({
  className,
  color,
  radius,
  shadow,
  size,
  fullWidth,
  isHoverable,
  isPressable,
  isBlurred,
  isDisabled,
  disableAnimation,
  ...props
}: CardProps) => {
  const { base } = cardStyles({
    color,
    radius,
    shadow,
    size,
    fullWidth,
    isHoverable,
    isPressable,
    isBlurred,
    isDisabled,
    disableAnimation,
  })

  return <UICard className={base({ className })} {...props} />
}

You can read this for more info: https://www.tailwind-variants.org/docs/composing-components#extending-components-with-slots

Closing this since the issue is solved.