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 (
Get Started
)
}
[!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.
<!--
## Overview
Groot Studio is a library of high-performing, SEO optimised React components designed for modern developers.
- 🎨 Themeable
- 🌸 Beautiful
- ♿ Accessible
## Getting started
You need to have these **Required Environment** listed below:
- Node.js: 18+
- Tailwind CSS: v4
- shadcn/ui: Initialized (`npx shadcn@latest init`)
### Add Component
Groot Studio components are installed via the shadcn CLI using their custom alias (`@grootstudio`).
For example, to add the **Sliding Button**:
```bash
npx shadcn@latest add @grootstudio/sliding-button
```
Once installed, you can import the component in your files:
```bash
import { SlidingButton } from "@/components/grootstudio/sliding-button"
```
and use it like this:
```bash
export default function Page() {
return (
Get Started
)
}
```
**Note:** The import path `@/components/grootstudio/sliding-button` assumes your project has a path alias configured (common in **[Next.js](https://nextjs.org/docs)** and similar frameworks). Adjust the path to match your project's structure if needed.
-->
