Theo's Typesafe Cult•9mo ago

shadcn/ui variant typescript error

does anyone know why this is giving me a typescript error (code compiles fine)? i'm using custom variants of shadcn/ui's badge component like so:

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
        research: "border-transparent bg-green-500/20 text-green-500",
        design: "border-transparent bg-red-500/20 text-red-500",
        development: "border-transparent bg-yellow-500/20 text-yellow-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
        research: "border-transparent bg-green-500/20 text-green-500",
        design: "border-transparent bg-red-500/20 text-red-500",
        development: "border-transparent bg-yellow-500/20 text-yellow-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

but for some reason it wont accept the dynamic prop as a variant (both when interpolating like this, or when using {category} which is a string.

  <Badge key={i} variant={`${category}`} className="capitalize">
        {category}
  </Badge>

  <Badge key={i} variant={`${category}`} className="capitalize">
        {category}
  </Badge>

Type 'string' is not assignable to type '"default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined'.ts(2322)

Type 'string' is not assignable to type '"default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined'.ts(2322)

code works fine whether i interpolate category or not, the typescript intellisense also shows my custom variants as possible options here:

(property) variant?: "default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined

(property) variant?: "default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined

2 Replies

unreal•9mo ago

This is the exported ts interface:

const badgeVariants: (props?: (ConfigVariants<{
    variant: {
        default: string;
        secondary: string;
        destructive: string;
        outline: string;
        research: string;
        design: string;
        development: string;
    };
}> & ClassProp) | undefined) => string`

const badgeVariants: (props?: (ConfigVariants<{
    variant: {
        default: string;
        secondary: string;
        destructive: string;
        outline: string;
        research: string;
        design: string;
        development: string;
    };
}> & ClassProp) | undefined) => string`

Ilko Kacharov•5mo ago

You can leverage the exported ButtonProps to use the variant types:

import { ButtonProps } from '@/components/ui/button'

type VariantTypes = ButtonProps['variant']

import { ButtonProps } from '@/components/ui/button'

type VariantTypes = ButtonProps['variant']

Gaming

Programming

shadcn/ui variant typescript error