HomeBookmarks
Groot StudioGroot Studio
Groot Studio

Groot Studio

GRby grootstudio
3components99Kviews493bookmarks

Installs all 26 components. Without our CLI, run instead.

Auto-indexed

Groot Studio contents

  • Text FrameText Frame

    Text Frame

  • Cursor Trail

    Cursor Trail

  • Logo Marquee

    Logo Marquee

    • That's all 3 components

    About Groot Studio

    Groot Studio publishes a shadcn registry at grootstudio.vercel.app, with 26 components installable through the shadcn CLI.

    Components
    26
    GitHub stars
    60
    Last commit
    Sep 25, 2026
    Repository
    Subhadipjana95/Groot-Studio

    Also in the Groot Studio registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • 3D Button

      3d-button

      A premium 3D button component with customizable dual-tone gradients, shimmer effects and depth shadows.

      1 file
      Docs ↗

    • Animated Bars

      animated-bars

      A dynamic background component with pulsating, gradient bars that create a fluid energy effect.

      1 file
      Docs ↗

    • Animated Layout

      animated-layout

      A modern and dynamic layout component featuring fluid animations, smooth transitions, and a responsive grid system.

      motion, lucide-react1 file
      Docs ↗

    • Avatar Tooltips

      avatar-tooltips

      Interactive overlapping avatars that reveal animated, spring-based tooltips on hover.

      motion1 file
      Docs ↗

    • Discord Online (Next.js)

      discord-online

      Shows live Discord member presence count fetched server-side with 60s revalidation. Label shown on tooltip hover. Requires Next.js App Router.

      button, tooltip1 file
      Docs ↗

    • Discord Online (React / Vite)

      discord-online-react

      Shows live Discord member presence count fetched client-side with 60s localStorage cache. Label shown on tooltip hover.

      button, tooltip1 file

    • Drag Button

      drag-button

      An interactive draggable button requiring a left-to-right swipe to confirm actions, featuring optional success animations and spring physics.

      motion, lucide-react1 file
      Docs ↗

    • GitHub Calendar

      github-calendar

      A Next.js/React component to display GitHub contributions in a calendar grid format.

      tooltip1 file
      Docs ↗

    • GitHub Stars

      github-stars

      Displays a GitHub repo star count with auto-fetch, daily revalidation, compact formatting, and a tooltip.

      button, tooltip1 file
      Docs ↗

    • GitHub Stars (React / Vite)

      github-stars-react

      GitHub star count for Vite and non-Next.js React projects. Fetches client-side with localStorage caching for 24 hours.

      button, tooltip1 file

    • Glow Card

      glow-card

      A card with a glowing hover effect.

      1 file

    • Gradient Background Text

      gradient-background-text

      Animated gradient background orb text with 3D engraved effect. Works on any background color.

      motion1 file
      Docs ↗

    • Image Trail

      image-trail

      A very smooth and interactive trail of images that follows your mouse cursor with discrete step interpolation.

      motion1 file
      Docs ↗

    • Logo Grid

      logo-grid

      Grid of client logos with plus-sign separators and highlighted rows.

      lucide-react1 file
      Docs ↗

    • Pebble Toast

      pebble-toast

      A premium notification stack with beautiful center/corner positioning, micro-animations, and dynamic gradients.

      sonner, lucide-react, motion1 file

    • Press Button

      press-button

      An industry-grade neobrutalist button with a 3D press effect.

      1 file
      Docs ↗

    • Shimmer Text Flip

      shimmer-text-flip

      A sequence of texts cycles through fliping transition with shimmer glow effect.

      motion, shadcn1 file

    • Sliding Button

      sliding-button

      A high-performance interactive button that slides an icon into view on hover with spring animations and depth shadows.

      motion, lucide-react1 file
      Docs ↗

    • Styled Button

      styled-button

      An elegant styled button with vibrant radial gradients, shadow glows, and smooth active transitions.

      1 file
      Docs ↗

    • Text Outline Glow

      text-outline-glow

      A very smooth and interactive trail of images that follows your mouse cursor with discrete step interpolation.

      gsap, @gsap/react1 file
      Docs ↗

    • Theme Toggler

      theme-toggler

      A minimal theme toggle button with a cinematic full-screen curtain wipe animation. Supports vertical and horizontal directions.

      lucide-react1 file
      Docs ↗

    From the Groot Studio readme

    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 ![chart](https://shieldcn.dev/chart/github/stars/Subhadipjana95/Groot-Studio.svg?theme=rose&title=Groot+Stars) ## 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. -->

    Read the rest on GitHub →

    What Groot Studio builds on

    The packages and primitives its components pull in, counted across the registry.

    button6tooltip5

    Registries like Groot Studio

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Browse every shadcn registry we track →

    Animate UI

    Animate UI

    by Elliot Sutton

    34

    components

    ReUI

    ReUI

    by Sean Hello

    263

    components

    1. Components
    2. /
    3. grootstudio
    4. /
    5. Groot Studio

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    Geist

    Geist

    by tigran tumasov

    72

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Dali Agents

    Dali Agents

    by Liana Pepanyan

    46

    components

    ReUI

    ReUI

    by Sean Hello

    263

    components

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    About Groot Studio

    Groot Studio is a component library on 21st.dev by grootstudio with 3 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 3 Groot Studio components

    • Cursor Trail
    • Logo Marquee
    • Text Frame

    Browse all component libraries →