@grootstudio

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

24 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://grootstudio.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://grootstudio.vercel.app/r/registry.json

bun bunx shadcn@latest add https://grootstudio.vercel.app/r/registry.json

fetch registry curl -s https://grootstudio.vercel.app/r/registry.json

Components

24 total

Glow Card block

A card with a glowing hover effect.

npx shadcn@latest add https://grootstudio.vercel.app/r/glow-card.json

GitHub Stars 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 / Vite) 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 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 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 (Next.js) 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 / Vite) 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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