[bug]: The requested module 'class-variance-authority' does not provide an export named 'VariantProps'

[ronkristoff]

Describe the bug

I am using react-router-v7 and using shadcn canary. When using components that use Variant Props, i get the error.

Affected component/components

Button, SideBar

How to reproduce

1. npx create-react-router@latest my-react-router-app
2. npx shadcn@canary init
3. npx shadcn@canary add button
4. use the Button component in any page.

Codesandbox/StackBlitz link

No response

Logs

System Info

mac, chrome

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[BlankParticle]

You need to import the it as a type in the generated files.

import { type VariantProps } from "..."

I would also suggest enabling verbatimModuleSyntax: true in your tsconfig.json file to make sure all types are properly anotated as type when importing

[janzheng]

It's a bug in the shadcn generated code. For button.tsx and sidebar.tsx etc. that you'll find in components/ui you need to make sure the top of the import says:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

[mikevarela]

import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority"

I'm seeing the same issue, not loading these libraries. I've added import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority"

to the top but the imports aren't loading. specifically the button component won't load variants

[downright-development]

Same issues here on Tanstack router.

[jithinolickal]

Somehow the below steps worked for me.

1. remove VariantProps from the component file - import { cva, type VariantProps } from "class-variance-authority" to import { cva } from "class-variance-authority"
2. This will throw Cannot find name 'VariantProps'. in your IDE. now use IDE's IntelliSense (ctrl+space) to import 'VariantProps'

Not sure why, but this worked.

[craigmadethis]

Had this issue with Tanstack Router when using Sidebar. The fix was to go into components/ui/sidebar.tsx and change the import from:

import { VariantProps, cva } from "class-variance-authority";

to:

import { type VariantProps, cva } from "class-variance-authority";

[Achour]

Had this issue with Tanstack Router when using Sidebar. The fix was to go into components/ui/sidebar.tsx and change the import from:

import { VariantProps, cva } from "class-variance-authority"; to:

import { type VariantProps, cva } from "class-variance-authority";

Thanks this works

[ricphiri]

This code below is a problem:

import { VariantProps, cva } from "class-variance-authority"

This is the fix that people keep pointing to:

import { cva, type VariantProps } from "class-variance-authority"

That "fix" is the code that's in button.tsx, which is proof there is no real reason why sidebar.tsx should be using that first version of the code which is causing error meesages... (I'm not familiar enough with git to attempt to fix it, but this seems like an easy win)

[tkatter]

None of the above fixes worked in my case. I had to do this instead:

import { cva } from 'class-variance-authority'
import type { VariantProps } from 'class-variance-authority'

[DanielZamb]

Also found a method to work around this:

Using

• vite create app
• react 19 + typescript
• shadcn
• mono repo ( not the package, just that both backend and frontend are in the same repo)
• trpc
• zod

1. Erase the import completely from the line, so you have something like

import { cva } from "class-variance-authority"

2. Put the import of the type that's throwing the error alone, so

import type { VariantProps } from "class-variance-authority"

Worked wonders!

[alicercedigital]

Everyone of us have to do this change to use the generated code from shadcn. Why can't we patch this to make the generated code does not need any changes?

[kein-1]

It's a bug in the shadcn generated code. For button.tsx and sidebar.tsx etc. that you'll find in components/ui you need to make sure the top of the import says:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

I encountered this via shadcn sidebar. this solution worked

[jljl1337]

why is this still not fixed after so many months?

[anyuruf]

Looks like there is two different ways to do the types as from CVA website. So if one way don't got. https://cva.style/docs/getting-started/typescript

Extracting Variant Types

cva offers the VariantProps helper to extract variant types // components/button.ts import type { VariantProps } from "class-variance-authority"; import { cva, cx } from "class-variance-authority";

/**

• Button / export type ButtonProps = VariantProps; export const button = cva(/ … */);

Required Variants

To keep the API small and unopinionated, cva doesn't offer a built-in solution for setting required variants. Instead, we recommend using TypeScript's Utility Types

:

// components/button.ts import { cva, type VariantProps } from "class-variance-authority";

export type ButtonVariantProps = VariantProps<typeof buttonVariants>; export const buttonVariants = cva("…", { variants: { optional: { a: "…", b: "…" }, required: { a: "…", b: "…" }, }, });

/**

• Button */ export interface ButtonProps extends Omit<ButtonVariantProps, "required">, Required<Pick<ButtonVariantProps, "required">> {}

export const button = (props: ButtonProps) => buttonVariants(props);

// ❌ TypeScript Error: // Argument of type "{}": is not assignable to parameter of type "ButtonProps". // Property "required" is missing in type "{}" but required in type // "ButtonProps". button({});

// ✅ button({ required: "a" });

[ViableSystemModel]

I came across this issue because shadcn didn't install "class-variance-authority" as a dependency when adding the button component. So if anyone's gotten through this whole thread and hasn't found a fix, double check your package.json to make sure it's installed.