Groot Studio

A premium, open-source component registry for high-performance React applications.

Built with 💚 by Subhadip Jana

Website | Documentation | Report Bug

Star History

Installation

1. Requirements

Ensure your project environment meets the following:

• Node.js: 18+
• Tailwind CSS: v4
• shadcn/ui: Initialized (npx shadcn@latest init)

2. Add a Component

Groot Studio components are installed via the shadcn CLI using their registry URLs. For example, to add the Sliding Button :

npx shadcn@latest add https://grootstudio.vercel.app/r/sliding-button.json

Once installed, you can import the component in your files:

import { SlidingButton } from "@/components/sliding-button"

and use it like this:

export default function Page() {
  return (
    <div className="w-full h-screen">
      <SlidingButton variant="default">
        Get Started
      </SlidingButton>
    </div>
  )
}

Note: The import path @/components/ui/sliding-button assumes your project has a path alias configured (common in Next.js and similar frameworks). Adjust the path to match your project's structure if needed.