Installation

1. Set up your project

Start with React 19, TypeScript, and Tailwind CSS 4. Initialize shadcn once, or skip this step if your project already uses it.

pnpm dlx shadcn@latest init

2. Add a component

pnpm dlx shadcn@latest add https://react-toolbox.io/r/button.json

The CLI copies the component and its dependencies into your project. Replace button with another component name, or all for the full collection.

3. Use it

import { Button } from '@/components/ui/material/button';

export default function Example() {
  return <Button primary raised label="Hello, Material" />;
}

Use your configured UI alias if it differs from @/components/ui. Component entries load their styles automatically. Add 'use client' to examples that use state or event handlers in Next.js.

Use your router for navigation

In Next.js, use Link from next/link. In other React apps, use your router’s link or a native anchor. React Toolbox supplies Material surfaces and controls; routing stays with your application.

import Link from 'next/link';

export default function ProjectNavigation() {
  return (
    <nav aria-label="Projects">
      <Link href="/projects"
        className="inline-flex min-h-12 items-center px-4 text-sm font-medium text-toolbox-primary focus-visible:outline-2 focus-visible:outline-toolbox-primary">
        Projects
      </Link>
    </nav>
  );
}

For a drawer or sidebar, place your router link in ListItem’s itemContent and enable ripple on List. Keep the whole row interactive and use aria-current="page" for the selected destination. Link and Navigation wrappers are no longer part of the public collection.

Use the @react-toolbox shortcut

Add this registry to your existing components.json, keeping the rest of its configuration:

{
  "registries": {
    "@react-toolbox": "https://react-toolbox.io/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @react-toolbox/button

The shortcut requires this configuration until React Toolbox is listed in shadcn’s public registry directory. The full URL requires no namespace configuration.

Make changes. Keep them.

Public entries live in material/, alongside existing shadcn components. Shared implementation files live in react-toolbox/ in the same UI directory. Edit them to fit your project.

Already using the earlier toolbox-prefixed entries? Add the components again and update imports to material/button, material/theme, or the corresponding family. The CLI leaves old entry files in place; remove them after migrating your imports.

To update, run the add command again and review the overwrite prompts. Commit your edits first and check the diff before replacing customized files.