--- name: "@grootstudio" slug: "grootstudio" description: "A premium, open source component registry for SEO-friendly, high-performance React applications" category: "Animated components" tags: ["3d", "animation", "backgrounds", "buttons", "cards", "forms", "icons", "loaders", "media", "overlays", "pro-available", "theming"] framework: "react" license: "MIT" author: "Subhadipjana95" website: "https://grootstudio.vercel.app" github: "https://github.com/Subhadipjana95/Groot-Studio" registry: "https://grootstudio.vercel.app/r/registry.json" pro: true pro_url: "https://grootstudio.vercel.app/pricing" github_stars: 55 component_count: 26 generated_at: "2026-07-28T08:00:50.948Z" --- # @grootstudio A premium, open source component registry for SEO-friendly, high-performance React applications ## Links - Website: https://grootstudio.vercel.app - GitHub: https://github.com/Subhadipjana95/Groot-Studio - Registry JSON: https://grootstudio.vercel.app/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/grootstudio - This file: https://sh4dcn.vercel.app/md/grootstudio.md - Pro / pricing: https://grootstudio.vercel.app/pricing ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://grootstudio.vercel.app/r/registry.json pnpm dlx shadcn@latest add https://grootstudio.vercel.app/r/registry.json bunx shadcn@latest add https://grootstudio.vercel.app/r/registry.json # clone the source repo git clone https://github.com/Subhadipjana95/Groot-Studio.git # fetch the raw registry index curl -s https://grootstudio.vercel.app/r/registry.json ``` ## Components (26) | name | type | description | install | | --- | --- | --- | --- | | glow-card | registry:block | A card with a glowing hover effect. | `npx shadcn@latest add https://grootstudio.vercel.app/r/glow-card.json` | | github-stars | registry:block | Displays a GitHub repo star count with auto-fetch, daily revalidation, compact formatting, and a tooltip. | `npx shadcn@latest add https://grootstudio.vercel.app/r/github-stars.json` | | github-stars-react | registry:block | GitHub star count for Vite and non-Next.js React projects. Fetches client-side with localStorage caching for 24 hours. | `npx shadcn@latest add https://grootstudio.vercel.app/r/github-stars-react.json` | | gradient-text-fill | registry:block | Animated gradient fills the text itself with 3D depth. Works on any background color. | `npx shadcn@latest add https://grootstudio.vercel.app/r/gradient-text-fill.json` | | gradient-background-text | registry:block | Animated gradient background orb text with 3D engraved effect. Works on any background color. | `npx shadcn@latest add https://grootstudio.vercel.app/r/gradient-background-text.json` | | discord-online | registry:block | Shows live Discord member presence count fetched server-side with 60s revalidation. Label shown on tooltip hover. Requires Next.js App Router. | `npx shadcn@latest add https://grootstudio.vercel.app/r/discord-online.json` | | discord-online-react | registry:block | Shows live Discord member presence count fetched client-side with 60s localStorage cache. Label shown on tooltip hover. | `npx shadcn@latest add https://grootstudio.vercel.app/r/discord-online-react.json` | | logo-marquee | registry:block | Infinite marquee logo slider with mask fade edges and hover speed control. | `npx shadcn@latest add https://grootstudio.vercel.app/r/logo-marquee.json` | | blurred-marquee | registry:block | Infinite marquee logo slider with mask blurred edges and hover speed control. | `npx shadcn@latest add https://grootstudio.vercel.app/r/blurred-marquee.json` | | logo-grid | registry:block | Grid of client logos with plus-sign separators and highlighted rows. | `npx shadcn@latest add https://grootstudio.vercel.app/r/logo-grid.json` | | github-calendar | registry:block | A Next.js/React component to display GitHub contributions in a calendar grid format. | `npx shadcn@latest add https://grootstudio.vercel.app/r/github-calendar.json` | | avatar-tooltips | registry:block | Interactive overlapping avatars that reveal animated, spring-based tooltips on hover. | `npx shadcn@latest add https://grootstudio.vercel.app/r/avatar-tooltips.json` | | 3d-button | registry:block | A premium 3D button component with customizable dual-tone gradients, shimmer effects and depth shadows. | `npx shadcn@latest add https://grootstudio.vercel.app/r/3d-button.json` | | sliding-button | registry:block | A high-performance interactive button that slides an icon into view on hover with spring animations and depth shadows. | `npx shadcn@latest add https://grootstudio.vercel.app/r/sliding-button.json` | | drag-button | registry:block | An interactive draggable button requiring a left-to-right swipe to confirm actions, featuring optional success animations and spring physics. | `npx shadcn@latest add https://grootstudio.vercel.app/r/drag-button.json` | | press-button | registry:block | An industry-grade neobrutalist button with a 3D press effect. | `npx shadcn@latest add https://grootstudio.vercel.app/r/press-button.json` | | cursor-trail | registry:block | A smooth and refined shape trail effect that beautifully interpolates along your mouse cursor path. | `npx shadcn@latest add https://grootstudio.vercel.app/r/cursor-trail.json` | | image-trail | registry:block | A very smooth and interactive trail of images that follows your mouse cursor with discrete step interpolation. | `npx shadcn@latest add https://grootstudio.vercel.app/r/image-trail.json` | | text-outline-glow | registry:block | A very smooth and interactive trail of images that follows your mouse cursor with discrete step interpolation. | `npx shadcn@latest add https://grootstudio.vercel.app/r/text-outline-glow.json` | | animated-bars | registry:block | A dynamic background component with pulsating, gradient bars that create a fluid energy effect. | `npx shadcn@latest add https://grootstudio.vercel.app/r/animated-bars.json` | | animated-layout | registry:block | A modern and dynamic layout component featuring fluid animations, smooth transitions, and a responsive grid system. | `npx shadcn@latest add https://grootstudio.vercel.app/r/animated-layout.json` | | theme-toggler | registry:block | A minimal theme toggle button with a cinematic full-screen curtain wipe animation. Supports vertical and horizontal directions. | `npx shadcn@latest add https://grootstudio.vercel.app/r/theme-toggler.json` | | styled-button | registry:block | An elegant styled button with vibrant radial gradients, shadow glows, and smooth active transitions. | `npx shadcn@latest add https://grootstudio.vercel.app/r/styled-button.json` | | pebble-toast | registry:block | A premium notification stack with beautiful center/corner positioning, micro-animations, and dynamic gradients. | `npx shadcn@latest add https://grootstudio.vercel.app/r/pebble-toast.json` | | text-frame | registry:block | A canvas boundary like frame for texts to wrap around with blur effect and dashed or solid line style. | `npx shadcn@latest add https://grootstudio.vercel.app/r/text-frame.json` | | shimmer-text-flip | registry:block | A sequence of texts cycles through fliping transition with shimmer glow effect. | `npx shadcn@latest add https://grootstudio.vercel.app/r/shimmer-text-flip.json` | ## For AI agents ```text You are adding components from @grootstudio to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/grootstudio.md) for the component list. 2. Fetch the machine-readable index: https://grootstudio.vercel.app/r/registry.json 3. Install a single component with its install command from the table above. 4. Full structured record: https://sh4dcn.vercel.app/json (library slug: grootstudio). ```