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 alias(@grootstudio). For example, to add the Sliding Button :

npx shadcn@latest add @grootstudio/sliding-button

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.