Error while using with Nextjs 15, "Property 'Root' does not exist on type 'ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLButtonElement>>' radix ui react-toggle"

[shatadal-das]

package.json

{
  "name": "hobbyproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-toggle": "^1.1.2",
    "next": "15.1.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwind-merge": "^2.6.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

src/app/page.tsx

"use client";

import { Toggle } from "@radix-ui/react-toggle";

function Home() {
  return (
    <>
      <div>
      <Toggle.Root />  { /* Error here! */ }
      </div>
    </>
  );
}
export default Home;

Property 'Root' does not exist on type 'ForwardRefExoticComponent<ToggleProps & RefAttributes>'

I am using:
node@v22.11.0
pnpm@v9.12.3

I tried several times but the error persists for all the radix primitives.

[rezathematic]

@shatadal-das That's because they are exported separately in that file https://github.com/radix-ui/primitives/blob/main/packages/react/toggle/src/index.ts

You can either import them separately or import everything as "primitive" like this:
import * as Toggle from '@radix-ui/react-toggle';

Fixed version of your code:

"use client";

import * as Toggle from "@radix-ui/react-toggle";

function Home() {
  return (
    <>
      <div>
      <Toggle.Root />  { /* No Error */ }
      </div>
    </>
  );
}
export default Home;

In the Radix demo you can see the following, and if you take a look at this radix-ui you can see the same logic applied there

import * as React from "react";
import { Toggle } from "radix-ui";
import { FontItalicIcon } from "@radix-ui/react-icons";

const ToggleDemo = () => (
	<Toggle.Root
		aria-label="Toggle italic"
		className="flex size-[35px] items-center justify-center rounded bg-white leading-4 text-mauve11 shadow-[0_2px_10px] shadow-blackA4 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=on]:bg-violet6 data-[state=on]:text-violet12"
	>
		<FontItalicIcon />
	</Toggle.Root>
);

export default ToggleDemo;