---
name: "@react-bits"
slug: "react-bits"
description: "React Bits is an open-source collection of 130+ highly customizable animated React components organized into four groups: Text Animations (blur text, typewriter, rotating text, etc.), Animations (star border, magnet, elastic, etc.), Components (glass, card, dock, etc.), and Backgrounds (aurora, particles, beams, noise, etc.). Each component ships in four code variants (JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind). Also includes creative tools: Background Studio, Shape Magic, and Texture Lab. Available via shadcn CLI or jsrepo. MIT + Commons Clause license (free for most use). Use for: adding attention-grabbing animated backgrounds, text effects, and interactive hero components to marketing sites or landing pages."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "backgrounds", "blocks", "cards", "glassmorphism", "icons", "marketing", "media", "navigation", "retro", "saas", "text-effects"]
framework: "react"
license: null
author: "DavidHDev"
website: "https://reactbits.dev"
github: "https://github.com/DavidHDev/react-bits"
registry: "https://reactbits.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 42980
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @react-bits

React Bits is an open-source collection of 130+ highly customizable animated React components organized into four groups: Text Animations (blur text, typewriter, rotating text, etc.), Animations (star border, magnet, elastic, etc.), Components (glass, card, dock, etc.), and Backgrounds (aurora, particles, beams, noise, etc.). Each component ships in four code variants (JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind). Also includes creative tools: Background Studio, Shape Magic, and Texture Lab. Available via shadcn CLI or jsrepo. MIT + Commons Clause license (free for most use). Use for: adding attention-grabbing animated backgrounds, text effects, and interactive hero components to marketing sites or landing pages.

## Links

- Website: https://reactbits.dev
- GitHub: https://github.com/DavidHDev/react-bits
- Registry JSON: https://reactbits.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/react-bits
- This file: https://sh4dcn.vercel.app/md/react-bits.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://reactbits.dev/r/registry.json
pnpm dlx shadcn@latest add https://reactbits.dev/r/registry.json
bunx shadcn@latest add https://reactbits.dev/r/registry.json
# clone the source repo
git clone https://github.com/DavidHDev/react-bits.git
# fetch the raw registry index
curl -s https://reactbits.dev/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| AnimatedContent-JS-CSS | registry:component | Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-CSS.json` |
| AnimatedContent-JS-TW | registry:component | Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-TW.json` |
| AnimatedContent-TS-CSS | registry:component | Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-CSS.json` |
| AnimatedContent-TS-TW | registry:component | Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-TW.json` |
| BlobCursor-JS-CSS | registry:component | Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-CSS.json` |
| BlobCursor-JS-TW | registry:component | Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-TW.json` |
| BlobCursor-TS-CSS | registry:component | Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-CSS.json` |
| BlobCursor-TS-TW | registry:component | Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-TW.json` |
| ClickSpark-JS-CSS | registry:component | Creates particle spark bursts at click position. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-CSS.json` |
| ClickSpark-JS-TW | registry:component | Creates particle spark bursts at click position. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-TW.json` |
| ClickSpark-TS-CSS | registry:component | Creates particle spark bursts at click position. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-CSS.json` |
| ClickSpark-TS-TW | registry:component | Creates particle spark bursts at click position. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-TW.json` |
| Crosshair-JS-CSS | registry:component | Custom crosshair cursor with tracking, and link hover effects. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-CSS.json` |
| Crosshair-JS-TW | registry:component | Custom crosshair cursor with tracking, and link hover effects. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-TW.json` |
| Crosshair-TS-CSS | registry:component | Custom crosshair cursor with tracking, and link hover effects. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-CSS.json` |
| Crosshair-TS-TW | registry:component | Custom crosshair cursor with tracking, and link hover effects. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-TW.json` |
| Cubes-JS-CSS | registry:component | 3D rotating cube cluster. Supports auto-rotation or hover interaction. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-CSS.json` |
| Cubes-JS-TW | registry:component | 3D rotating cube cluster. Supports auto-rotation or hover interaction. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-TW.json` |
| Cubes-TS-CSS | registry:component | 3D rotating cube cluster. Supports auto-rotation or hover interaction. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-CSS.json` |
| Cubes-TS-TW | registry:component | 3D rotating cube cluster. Supports auto-rotation or hover interaction. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-TW.json` |
| ElectricBorder-JS-CSS | registry:component | Jittery electric energy border with animated arcs, glow and adjustable intensity. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-CSS.json` |
| ElectricBorder-JS-TW | registry:component | Jittery electric energy border with animated arcs, glow and adjustable intensity. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-TW.json` |
| ElectricBorder-TS-CSS | registry:component | Jittery electric energy border with animated arcs, glow and adjustable intensity. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-CSS.json` |
| ElectricBorder-TS-TW | registry:component | Jittery electric energy border with animated arcs, glow and adjustable intensity. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-TW.json` |
| FadeContent-JS-CSS | registry:component | Simple directional fade / slide entrance / exit wrapper with threshold-based activation. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-CSS.json` |
| FadeContent-JS-TW | registry:component | Simple directional fade / slide entrance / exit wrapper with threshold-based activation. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-TW.json` |
| FadeContent-TS-CSS | registry:component | Simple directional fade / slide entrance / exit wrapper with threshold-based activation. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-CSS.json` |
| FadeContent-TS-TW | registry:component | Simple directional fade / slide entrance / exit wrapper with threshold-based activation. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-TW.json` |
| GlareHover-JS-CSS | registry:component | Adds a realistic moving glare highlight on hover over any element. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-CSS.json` |
| GlareHover-JS-TW | registry:component | Adds a realistic moving glare highlight on hover over any element. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-TW.json` |
| GlareHover-TS-CSS | registry:component | Adds a realistic moving glare highlight on hover over any element. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-CSS.json` |
| GlareHover-TS-TW | registry:component | Adds a realistic moving glare highlight on hover over any element. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-TW.json` |
| GradualBlur-JS-CSS | registry:component | Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-CSS.json` |
| GradualBlur-JS-TW | registry:component | Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-TW.json` |
| GradualBlur-TS-CSS | registry:component | Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-CSS.json` |
| GradualBlur-TS-TW | registry:component | Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-TW.json` |
| GhostCursor-JS-CSS | registry:component | Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-CSS.json` |
| GhostCursor-JS-TW | registry:component | Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-TW.json` |
| GhostCursor-TS-CSS | registry:component | Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-TS-CSS.json` |
| GhostCursor-TS-TW | registry:component | Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-TS-TW.json` |
| ImageTrail-JS-CSS | registry:component | Cursor-based image trail with several built-in variants. | `npx shadcn@latest add https://reactbits.dev/r/ImageTrail-JS-CSS.json` |
| ImageTrail-JS-TW | registry:component | Cursor-based image trail with several built-in variants. | `npx shadcn@latest add https://reactbits.dev/r/ImageTrail-JS-TW.json` |
| ImageTrail-TS-CSS | registry:component | Cursor-based image trail with several built-in variants. | `npx shadcn@latest add https://reactbits.dev/r/ImageTrail-TS-CSS.json` |
| ImageTrail-TS-TW | registry:component | Cursor-based image trail with several built-in variants. | `npx shadcn@latest add https://reactbits.dev/r/ImageTrail-TS-TW.json` |
| LogoLoop-JS-CSS | registry:component | Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. | `npx shadcn@latest add https://reactbits.dev/r/LogoLoop-JS-CSS.json` |
| LogoLoop-JS-TW | registry:component | Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. | `npx shadcn@latest add https://reactbits.dev/r/LogoLoop-JS-TW.json` |
| LogoLoop-TS-CSS | registry:component | Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. | `npx shadcn@latest add https://reactbits.dev/r/LogoLoop-TS-CSS.json` |
| LogoLoop-TS-TW | registry:component | Continuously looping marquee of brand or tech logos with seamless repeat and hover pause. | `npx shadcn@latest add https://reactbits.dev/r/LogoLoop-TS-TW.json` |
| Magnet-JS-CSS | registry:component | Elements magnetically ease toward the cursor then settle back with spring physics. | `npx shadcn@latest add https://reactbits.dev/r/Magnet-JS-CSS.json` |
| Magnet-JS-TW | registry:component | Elements magnetically ease toward the cursor then settle back with spring physics. | `npx shadcn@latest add https://reactbits.dev/r/Magnet-JS-TW.json` |
| Magnet-TS-CSS | registry:component | Elements magnetically ease toward the cursor then settle back with spring physics. | `npx shadcn@latest add https://reactbits.dev/r/Magnet-TS-CSS.json` |
| Magnet-TS-TW | registry:component | Elements magnetically ease toward the cursor then settle back with spring physics. | `npx shadcn@latest add https://reactbits.dev/r/Magnet-TS-TW.json` |
| MagnetLines-JS-CSS | registry:component | Animated field lines bend toward the cursor. | `npx shadcn@latest add https://reactbits.dev/r/MagnetLines-JS-CSS.json` |
| MagnetLines-JS-TW | registry:component | Animated field lines bend toward the cursor. | `npx shadcn@latest add https://reactbits.dev/r/MagnetLines-JS-TW.json` |
| MagnetLines-TS-CSS | registry:component | Animated field lines bend toward the cursor. | `npx shadcn@latest add https://reactbits.dev/r/MagnetLines-TS-CSS.json` |
| MagnetLines-TS-TW | registry:component | Animated field lines bend toward the cursor. | `npx shadcn@latest add https://reactbits.dev/r/MagnetLines-TS-TW.json` |
| MetaBalls-JS-CSS | registry:component | Liquid metaball blobs that merge and separate with smooth implicit surface animation. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-CSS.json` |
| MetaBalls-JS-TW | registry:component | Liquid metaball blobs that merge and separate with smooth implicit surface animation. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-TW.json` |
| MetaBalls-TS-CSS | registry:component | Liquid metaball blobs that merge and separate with smooth implicit surface animation. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-CSS.json` |
| MetaBalls-TS-TW | registry:component | Liquid metaball blobs that merge and separate with smooth implicit surface animation. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-TW.json` |
| Strands-JS-CSS | registry:component | Glowing ribbon-like strands that ripple and weave across a transparent canvas. | `npx shadcn@latest add https://reactbits.dev/r/Strands-JS-CSS.json` |
| Strands-JS-TW | registry:component | Glowing ribbon-like strands that ripple and weave across a transparent canvas. | `npx shadcn@latest add https://reactbits.dev/r/Strands-JS-TW.json` |
| Strands-TS-CSS | registry:component | Glowing ribbon-like strands that ripple and weave across a transparent canvas. | `npx shadcn@latest add https://reactbits.dev/r/Strands-TS-CSS.json` |
| Strands-TS-TW | registry:component | Glowing ribbon-like strands that ripple and weave across a transparent canvas. | `npx shadcn@latest add https://reactbits.dev/r/Strands-TS-TW.json` |
| MetallicPaint-JS-CSS | registry:component | Liquid metallic paint shader which can be applied to SVG elements. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-JS-CSS.json` |
| MetallicPaint-JS-TW | registry:component | Liquid metallic paint shader which can be applied to SVG elements. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-JS-TW.json` |
| MetallicPaint-TS-CSS | registry:component | Liquid metallic paint shader which can be applied to SVG elements. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-TS-CSS.json` |
| MetallicPaint-TS-TW | registry:component | Liquid metallic paint shader which can be applied to SVG elements. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-TS-TW.json` |
| Noise-JS-CSS | registry:component | Animated film grain / noise overlay adding subtle texture and motion. | `npx shadcn@latest add https://reactbits.dev/r/Noise-JS-CSS.json` |
| Noise-JS-TW | registry:component | Animated film grain / noise overlay adding subtle texture and motion. | `npx shadcn@latest add https://reactbits.dev/r/Noise-JS-TW.json` |
| Noise-TS-CSS | registry:component | Animated film grain / noise overlay adding subtle texture and motion. | `npx shadcn@latest add https://reactbits.dev/r/Noise-TS-CSS.json` |
| Noise-TS-TW | registry:component | Animated film grain / noise overlay adding subtle texture and motion. | `npx shadcn@latest add https://reactbits.dev/r/Noise-TS-TW.json` |
| PixelTrail-JS-CSS | registry:component | Pixelated cursor trail emitting fading squares with retro digital feel. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-JS-CSS.json` |
| PixelTrail-JS-TW | registry:component | Pixelated cursor trail emitting fading squares with retro digital feel. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-JS-TW.json` |
| PixelTrail-TS-CSS | registry:component | Pixelated cursor trail emitting fading squares with retro digital feel. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-TS-CSS.json` |
| PixelTrail-TS-TW | registry:component | Pixelated cursor trail emitting fading squares with retro digital feel. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-TS-TW.json` |
| PixelTransition-JS-CSS | registry:component | Pixel dissolve transition for content reveal on hover. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-JS-CSS.json` |
| PixelTransition-JS-TW | registry:component | Pixel dissolve transition for content reveal on hover. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-JS-TW.json` |
| PixelTransition-TS-CSS | registry:component | Pixel dissolve transition for content reveal on hover. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-TS-CSS.json` |
| PixelTransition-TS-TW | registry:component | Pixel dissolve transition for content reveal on hover. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-TS-TW.json` |
| Ribbons-JS-CSS | registry:component | Flowing responsive ribbons/cursor trail driven by physics and pointer motion. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-JS-CSS.json` |
| Ribbons-JS-TW | registry:component | Flowing responsive ribbons/cursor trail driven by physics and pointer motion. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-JS-TW.json` |
| Ribbons-TS-CSS | registry:component | Flowing responsive ribbons/cursor trail driven by physics and pointer motion. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-TS-CSS.json` |
| Ribbons-TS-TW | registry:component | Flowing responsive ribbons/cursor trail driven by physics and pointer motion. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-TS-TW.json` |
| ShapeBlur-JS-CSS | registry:component | Morphing blurred geometric shape. The effect occurs on hover. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-JS-CSS.json` |
| ShapeBlur-JS-TW | registry:component | Morphing blurred geometric shape. The effect occurs on hover. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-JS-TW.json` |
| ShapeBlur-TS-CSS | registry:component | Morphing blurred geometric shape. The effect occurs on hover. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-TS-CSS.json` |
| ShapeBlur-TS-TW | registry:component | Morphing blurred geometric shape. The effect occurs on hover. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-TS-TW.json` |
| SplashCursor-JS-CSS | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-JS-CSS.json` |
| SplashCursor-JS-TW | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-JS-TW.json` |
| SplashCursor-TS-CSS | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-TS-CSS.json` |
| SplashCursor-TS-TW | registry:component | Liquid splash burst at cursor with curling ripples and waves. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-TS-TW.json` |
| StarBorder-JS-CSS | registry:component | Animated star / sparkle border orbiting content with twinkle pulses. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-JS-CSS.json` |
| StarBorder-JS-TW | registry:component | Animated star / sparkle border orbiting content with twinkle pulses. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-JS-TW.json` |
| StarBorder-TS-CSS | registry:component | Animated star / sparkle border orbiting content with twinkle pulses. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-TS-CSS.json` |
| StarBorder-TS-TW | registry:component | Animated star / sparkle border orbiting content with twinkle pulses. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-TS-TW.json` |
| StickerPeel-JS-CSS | registry:component | Sticker corner lift + peel interaction using 3D transform and shadow depth. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-JS-CSS.json` |
| StickerPeel-JS-TW | registry:component | Sticker corner lift + peel interaction using 3D transform and shadow depth. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-JS-TW.json` |
| StickerPeel-TS-CSS | registry:component | Sticker corner lift + peel interaction using 3D transform and shadow depth. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-TS-CSS.json` |
| StickerPeel-TS-TW | registry:component | Sticker corner lift + peel interaction using 3D transform and shadow depth. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-TS-TW.json` |
| TargetCursor-JS-CSS | registry:component | A cursor follow animation with 4 corners that lock onto targets. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-JS-CSS.json` |
| TargetCursor-JS-TW | registry:component | A cursor follow animation with 4 corners that lock onto targets. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-JS-TW.json` |
| TargetCursor-TS-CSS | registry:component | A cursor follow animation with 4 corners that lock onto targets. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-TS-CSS.json` |
| TargetCursor-TS-TW | registry:component | A cursor follow animation with 4 corners that lock onto targets. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-TS-TW.json` |
| LaserFlow-JS-CSS | registry:component | Dynamic laser light that flows onto a surface, customizable effect. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-JS-CSS.json` |
| LaserFlow-JS-TW | registry:component | Dynamic laser light that flows onto a surface, customizable effect. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-JS-TW.json` |
| LaserFlow-TS-CSS | registry:component | Dynamic laser light that flows onto a surface, customizable effect. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-TS-CSS.json` |
| LaserFlow-TS-TW | registry:component | Dynamic laser light that flows onto a surface, customizable effect. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-TS-TW.json` |
| Antigravity-JS-CSS | registry:component | 3D antigravity particle field that repels from the cursor with smooth motion. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-JS-CSS.json` |
| Antigravity-JS-TW | registry:component | 3D antigravity particle field that repels from the cursor with smooth motion. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-JS-TW.json` |
| Antigravity-TS-CSS | registry:component | 3D antigravity particle field that repels from the cursor with smooth motion. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-TS-CSS.json` |
| Antigravity-TS-TW | registry:component | 3D antigravity particle field that repels from the cursor with smooth motion. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-TS-TW.json` |
| OrbitImages-JS-CSS | registry:component | SVG Path customizable orbiting images effect | `npx shadcn@latest add https://reactbits.dev/r/OrbitImages-JS-CSS.json` |
| OrbitImages-JS-TW | registry:component | SVG Path customizable orbiting images effect | `npx shadcn@latest add https://reactbits.dev/r/OrbitImages-JS-TW.json` |
| OrbitImages-TS-CSS | registry:component | SVG Path customizable orbiting images effect | `npx shadcn@latest add https://reactbits.dev/r/OrbitImages-TS-CSS.json` |
| OrbitImages-TS-TW | registry:component | SVG Path customizable orbiting images effect | `npx shadcn@latest add https://reactbits.dev/r/OrbitImages-TS-TW.json` |
| MagicRings-JS-CSS | registry:component | Interactive magic rings effect with customizable parameters. | `npx shadcn@latest add https://reactbits.dev/r/MagicRings-JS-CSS.json` |
| MagicRings-JS-TW | registry:component | Interactive magic rings effect with customizable parameters. | `npx shadcn@latest add https://reactbits.dev/r/MagicRings-JS-TW.json` |
| MagicRings-TS-CSS | registry:component | Interactive magic rings effect with customizable parameters. | `npx shadcn@latest add https://reactbits.dev/r/MagicRings-TS-CSS.json` |
| MagicRings-TS-TW | registry:component | Interactive magic rings effect with customizable parameters. | `npx shadcn@latest add https://reactbits.dev/r/MagicRings-TS-TW.json` |
| ASCIIText-JS-CSS | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-JS-CSS.json` |
| ASCIIText-JS-TW | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-JS-TW.json` |
| ASCIIText-TS-CSS | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-TS-CSS.json` |
| ASCIIText-TS-TW | registry:component | Renders text with an animated ASCII background for a retro feel. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-TS-TW.json` |
| BlurText-JS-CSS | registry:component | Text starts blurred then crisply resolves for a soft-focus reveal effect. | `npx shadcn@latest add https://reactbits.dev/r/BlurText-JS-CSS.json` |
| BlurText-JS-TW | registry:component | Text starts blurred then crisply resolves for a soft-focus reveal effect. | `npx shadcn@latest add https://reactbits.dev/r/BlurText-JS-TW.json` |
| BlurText-TS-CSS | registry:component | Text starts blurred then crisply resolves for a soft-focus reveal effect. | `npx shadcn@latest add https://reactbits.dev/r/BlurText-TS-CSS.json` |
| BlurText-TS-TW | registry:component | Text starts blurred then crisply resolves for a soft-focus reveal effect. | `npx shadcn@latest add https://reactbits.dev/r/BlurText-TS-TW.json` |
| CircularText-JS-CSS | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://reactbits.dev/r/CircularText-JS-CSS.json` |
| CircularText-JS-TW | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://reactbits.dev/r/CircularText-JS-TW.json` |
| CircularText-TS-CSS | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://reactbits.dev/r/CircularText-TS-CSS.json` |
| CircularText-TS-TW | registry:component | Layouts characters around a circle with optional rotation animation. | `npx shadcn@latest add https://reactbits.dev/r/CircularText-TS-TW.json` |
| CountUp-JS-CSS | registry:component | Animated number counter supporting formatting and decimals. | `npx shadcn@latest add https://reactbits.dev/r/CountUp-JS-CSS.json` |
| CountUp-JS-TW | registry:component | Animated number counter supporting formatting and decimals. | `npx shadcn@latest add https://reactbits.dev/r/CountUp-JS-TW.json` |
| CountUp-TS-CSS | registry:component | Animated number counter supporting formatting and decimals. | `npx shadcn@latest add https://reactbits.dev/r/CountUp-TS-CSS.json` |
| CountUp-TS-TW | registry:component | Animated number counter supporting formatting and decimals. | `npx shadcn@latest add https://reactbits.dev/r/CountUp-TS-TW.json` |
| CurvedLoop-JS-CSS | registry:component | Flowing looping text path along a customizable curve with drag interaction. | `npx shadcn@latest add https://reactbits.dev/r/CurvedLoop-JS-CSS.json` |
| CurvedLoop-JS-TW | registry:component | Flowing looping text path along a customizable curve with drag interaction. | `npx shadcn@latest add https://reactbits.dev/r/CurvedLoop-JS-TW.json` |
| CurvedLoop-TS-CSS | registry:component | Flowing looping text path along a customizable curve with drag interaction. | `npx shadcn@latest add https://reactbits.dev/r/CurvedLoop-TS-CSS.json` |
| CurvedLoop-TS-TW | registry:component | Flowing looping text path along a customizable curve with drag interaction. | `npx shadcn@latest add https://reactbits.dev/r/CurvedLoop-TS-TW.json` |
| DecryptedText-JS-CSS | registry:component | Hacker-style decryption cycling random glyphs until resolving to real text. | `npx shadcn@latest add https://reactbits.dev/r/DecryptedText-JS-CSS.json` |
| DecryptedText-JS-TW | registry:component | Hacker-style decryption cycling random glyphs until resolving to real text. | `npx shadcn@latest add https://reactbits.dev/r/DecryptedText-JS-TW.json` |
| DecryptedText-TS-CSS | registry:component | Hacker-style decryption cycling random glyphs until resolving to real text. | `npx shadcn@latest add https://reactbits.dev/r/DecryptedText-TS-CSS.json` |
| DecryptedText-TS-TW | registry:component | Hacker-style decryption cycling random glyphs until resolving to real text. | `npx shadcn@latest add https://reactbits.dev/r/DecryptedText-TS-TW.json` |
| FallingText-JS-CSS | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-JS-CSS.json` |
| FallingText-JS-TW | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-JS-TW.json` |
| FallingText-TS-CSS | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-TS-CSS.json` |
| FallingText-TS-TW | registry:component | Characters fall with gravity + bounce creating a playful entrance. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-TS-TW.json` |
| FuzzyText-JS-CSS | registry:component | Vibrating fuzzy text with controllable hover intensity. | `npx shadcn@latest add https://reactbits.dev/r/FuzzyText-JS-CSS.json` |
| FuzzyText-JS-TW | registry:component | Vibrating fuzzy text with controllable hover intensity. | `npx shadcn@latest add https://reactbits.dev/r/FuzzyText-JS-TW.json` |
| FuzzyText-TS-CSS | registry:component | Vibrating fuzzy text with controllable hover intensity. | `npx shadcn@latest add https://reactbits.dev/r/FuzzyText-TS-CSS.json` |
| FuzzyText-TS-TW | registry:component | Vibrating fuzzy text with controllable hover intensity. | `npx shadcn@latest add https://reactbits.dev/r/FuzzyText-TS-TW.json` |
| GlitchText-JS-CSS | registry:component | RGB split and distortion glitch effect with jitter effects. | `npx shadcn@latest add https://reactbits.dev/r/GlitchText-JS-CSS.json` |
| GlitchText-JS-TW | registry:component | RGB split and distortion glitch effect with jitter effects. | `npx shadcn@latest add https://reactbits.dev/r/GlitchText-JS-TW.json` |
| GlitchText-TS-CSS | registry:component | RGB split and distortion glitch effect with jitter effects. | `npx shadcn@latest add https://reactbits.dev/r/GlitchText-TS-CSS.json` |
| GlitchText-TS-TW | registry:component | RGB split and distortion glitch effect with jitter effects. | `npx shadcn@latest add https://reactbits.dev/r/GlitchText-TS-TW.json` |
| GradientText-JS-CSS | registry:component | Animated gradient sweep across live text with speed and color control. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-JS-CSS.json` |
| GradientText-JS-TW | registry:component | Animated gradient sweep across live text with speed and color control. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-JS-TW.json` |
| GradientText-TS-CSS | registry:component | Animated gradient sweep across live text with speed and color control. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-TS-CSS.json` |
| GradientText-TS-TW | registry:component | Animated gradient sweep across live text with speed and color control. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-TS-TW.json` |
| RotatingText-JS-CSS | registry:component | Cycles through multiple phrases with 3D rotate / flip transitions. | `npx shadcn@latest add https://reactbits.dev/r/RotatingText-JS-CSS.json` |
| RotatingText-JS-TW | registry:component | Cycles through multiple phrases with 3D rotate / flip transitions. | `npx shadcn@latest add https://reactbits.dev/r/RotatingText-JS-TW.json` |
| RotatingText-TS-CSS | registry:component | Cycles through multiple phrases with 3D rotate / flip transitions. | `npx shadcn@latest add https://reactbits.dev/r/RotatingText-TS-CSS.json` |
| RotatingText-TS-TW | registry:component | Cycles through multiple phrases with 3D rotate / flip transitions. | `npx shadcn@latest add https://reactbits.dev/r/RotatingText-TS-TW.json` |
| ScrambledText-JS-CSS | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://reactbits.dev/r/ScrambledText-JS-CSS.json` |
| ScrambledText-JS-TW | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://reactbits.dev/r/ScrambledText-JS-TW.json` |
| ScrambledText-TS-CSS | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://reactbits.dev/r/ScrambledText-TS-CSS.json` |
| ScrambledText-TS-TW | registry:component | Detects cursor position and applies a distortion effect to text. | `npx shadcn@latest add https://reactbits.dev/r/ScrambledText-TS-TW.json` |
| ScrollFloat-JS-CSS | registry:component | Text gently floats / parallax shifts on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollFloat-JS-CSS.json` |
| ScrollFloat-JS-TW | registry:component | Text gently floats / parallax shifts on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollFloat-JS-TW.json` |
| ScrollFloat-TS-CSS | registry:component | Text gently floats / parallax shifts on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollFloat-TS-CSS.json` |
| ScrollFloat-TS-TW | registry:component | Text gently floats / parallax shifts on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollFloat-TS-TW.json` |
| ScrollReveal-JS-CSS | registry:component | Text gently unblurs and reveals on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollReveal-JS-CSS.json` |
| ScrollReveal-JS-TW | registry:component | Text gently unblurs and reveals on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollReveal-JS-TW.json` |
| ScrollReveal-TS-CSS | registry:component | Text gently unblurs and reveals on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollReveal-TS-CSS.json` |
| ScrollReveal-TS-TW | registry:component | Text gently unblurs and reveals on scroll. | `npx shadcn@latest add https://reactbits.dev/r/ScrollReveal-TS-TW.json` |
| ScrollVelocity-JS-CSS | registry:component | Text marquee animatio - speed and distortion scale with user's scroll velocity. | `npx shadcn@latest add https://reactbits.dev/r/ScrollVelocity-JS-CSS.json` |
| ScrollVelocity-JS-TW | registry:component | Text marquee animatio - speed and distortion scale with user's scroll velocity. | `npx shadcn@latest add https://reactbits.dev/r/ScrollVelocity-JS-TW.json` |
| ScrollVelocity-TS-CSS | registry:component | Text marquee animatio - speed and distortion scale with user's scroll velocity. | `npx shadcn@latest add https://reactbits.dev/r/ScrollVelocity-TS-CSS.json` |
| ScrollVelocity-TS-TW | registry:component | Text marquee animatio - speed and distortion scale with user's scroll velocity. | `npx shadcn@latest add https://reactbits.dev/r/ScrollVelocity-TS-TW.json` |
| ShinyText-JS-CSS | registry:component | Metallic sheen sweeps across text producing a reflective highlight. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-JS-CSS.json` |
| ShinyText-JS-TW | registry:component | Metallic sheen sweeps across text producing a reflective highlight. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-JS-TW.json` |
| ShinyText-TS-CSS | registry:component | Metallic sheen sweeps across text producing a reflective highlight. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-TS-CSS.json` |
| ShinyText-TS-TW | registry:component | Metallic sheen sweeps across text producing a reflective highlight. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-TS-TW.json` |
| SplitText-JS-CSS | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://reactbits.dev/r/SplitText-JS-CSS.json` |
| SplitText-JS-TW | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://reactbits.dev/r/SplitText-JS-TW.json` |
| SplitText-TS-CSS | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://reactbits.dev/r/SplitText-TS-CSS.json` |
| SplitText-TS-TW | registry:component | Splits text into characters / words for staggered entrance animation. | `npx shadcn@latest add https://reactbits.dev/r/SplitText-TS-TW.json` |
| TextCursor-JS-CSS | registry:component | Make any text element follow your cursor, leaving a trail of copies behind it. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-JS-CSS.json` |
| TextCursor-JS-TW | registry:component | Make any text element follow your cursor, leaving a trail of copies behind it. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-JS-TW.json` |
| TextCursor-TS-CSS | registry:component | Make any text element follow your cursor, leaving a trail of copies behind it. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-TS-CSS.json` |
| TextCursor-TS-TW | registry:component | Make any text element follow your cursor, leaving a trail of copies behind it. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-TS-TW.json` |
| TextPressure-JS-CSS | registry:component | Characters scale / warp interactively based on pointer pressure zone. | `npx shadcn@latest add https://reactbits.dev/r/TextPressure-JS-CSS.json` |
| TextPressure-JS-TW | registry:component | Characters scale / warp interactively based on pointer pressure zone. | `npx shadcn@latest add https://reactbits.dev/r/TextPressure-JS-TW.json` |
| TextPressure-TS-CSS | registry:component | Characters scale / warp interactively based on pointer pressure zone. | `npx shadcn@latest add https://reactbits.dev/r/TextPressure-TS-CSS.json` |
| TextPressure-TS-TW | registry:component | Characters scale / warp interactively based on pointer pressure zone. | `npx shadcn@latest add https://reactbits.dev/r/TextPressure-TS-TW.json` |
| TextType-JS-CSS | registry:component | Typewriter effect with blinking cursor and adjustable typing cadence. | `npx shadcn@latest add https://reactbits.dev/r/TextType-JS-CSS.json` |
| TextType-JS-TW | registry:component | Typewriter effect with blinking cursor and adjustable typing cadence. | `npx shadcn@latest add https://reactbits.dev/r/TextType-JS-TW.json` |
| TextType-TS-CSS | registry:component | Typewriter effect with blinking cursor and adjustable typing cadence. | `npx shadcn@latest add https://reactbits.dev/r/TextType-TS-CSS.json` |
| TextType-TS-TW | registry:component | Typewriter effect with blinking cursor and adjustable typing cadence. | `npx shadcn@latest add https://reactbits.dev/r/TextType-TS-TW.json` |
| TrueFocus-JS-CSS | registry:component | Applies dynamic blur / clarity based over a series of words in order. | `npx shadcn@latest add https://reactbits.dev/r/TrueFocus-JS-CSS.json` |
| TrueFocus-JS-TW | registry:component | Applies dynamic blur / clarity based over a series of words in order. | `npx shadcn@latest add https://reactbits.dev/r/TrueFocus-JS-TW.json` |
| TrueFocus-TS-CSS | registry:component | Applies dynamic blur / clarity based over a series of words in order. | `npx shadcn@latest add https://reactbits.dev/r/TrueFocus-TS-CSS.json` |
| TrueFocus-TS-TW | registry:component | Applies dynamic blur / clarity based over a series of words in order. | `npx shadcn@latest add https://reactbits.dev/r/TrueFocus-TS-TW.json` |
| VariableProximity-JS-CSS | registry:component | Letter styling changes continuously with pointer distance mapping. | `npx shadcn@latest add https://reactbits.dev/r/VariableProximity-JS-CSS.json` |
| VariableProximity-JS-TW | registry:component | Letter styling changes continuously with pointer distance mapping. | `npx shadcn@latest add https://reactbits.dev/r/VariableProximity-JS-TW.json` |
| VariableProximity-TS-CSS | registry:component | Letter styling changes continuously with pointer distance mapping. | `npx shadcn@latest add https://reactbits.dev/r/VariableProximity-TS-CSS.json` |
| VariableProximity-TS-TW | registry:component | Letter styling changes continuously with pointer distance mapping. | `npx shadcn@latest add https://reactbits.dev/r/VariableProximity-TS-TW.json` |
| Shuffle-JS-CSS | registry:component | Animated text reveal where characters shuffle before settling. | `npx shadcn@latest add https://reactbits.dev/r/Shuffle-JS-CSS.json` |
| Shuffle-JS-TW | registry:component | Animated text reveal where characters shuffle before settling. | `npx shadcn@latest add https://reactbits.dev/r/Shuffle-JS-TW.json` |
| Shuffle-TS-CSS | registry:component | Animated text reveal where characters shuffle before settling. | `npx shadcn@latest add https://reactbits.dev/r/Shuffle-TS-CSS.json` |
| Shuffle-TS-TW | registry:component | Animated text reveal where characters shuffle before settling. | `npx shadcn@latest add https://reactbits.dev/r/Shuffle-TS-TW.json` |
| AnimatedList-JS-CSS | registry:component | List items enter with staggered motion variants for polished reveals. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedList-JS-CSS.json` |
| AnimatedList-JS-TW | registry:component | List items enter with staggered motion variants for polished reveals. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedList-JS-TW.json` |
| AnimatedList-TS-CSS | registry:component | List items enter with staggered motion variants for polished reveals. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedList-TS-CSS.json` |
| AnimatedList-TS-TW | registry:component | List items enter with staggered motion variants for polished reveals. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedList-TS-TW.json` |
| BounceCards-JS-CSS | registry:component | Cards bounce that bounce in on mount. | `npx shadcn@latest add https://reactbits.dev/r/BounceCards-JS-CSS.json` |
| BounceCards-JS-TW | registry:component | Cards bounce that bounce in on mount. | `npx shadcn@latest add https://reactbits.dev/r/BounceCards-JS-TW.json` |
| BounceCards-TS-CSS | registry:component | Cards bounce that bounce in on mount. | `npx shadcn@latest add https://reactbits.dev/r/BounceCards-TS-CSS.json` |
| BounceCards-TS-TW | registry:component | Cards bounce that bounce in on mount. | `npx shadcn@latest add https://reactbits.dev/r/BounceCards-TS-TW.json` |
| BubbleMenu-JS-CSS | registry:component | Floating circular expanding menu with staggered item reveal. | `npx shadcn@latest add https://reactbits.dev/r/BubbleMenu-JS-CSS.json` |
| BubbleMenu-JS-TW | registry:component | Floating circular expanding menu with staggered item reveal. | `npx shadcn@latest add https://reactbits.dev/r/BubbleMenu-JS-TW.json` |
| BubbleMenu-TS-CSS | registry:component | Floating circular expanding menu with staggered item reveal. | `npx shadcn@latest add https://reactbits.dev/r/BubbleMenu-TS-CSS.json` |
| BubbleMenu-TS-TW | registry:component | Floating circular expanding menu with staggered item reveal. | `npx shadcn@latest add https://reactbits.dev/r/BubbleMenu-TS-TW.json` |
| CardNav-JS-CSS | registry:component | Expandable navigation bar with card panels revealing nested links. | `npx shadcn@latest add https://reactbits.dev/r/CardNav-JS-CSS.json` |
| CardNav-JS-TW | registry:component | Expandable navigation bar with card panels revealing nested links. | `npx shadcn@latest add https://reactbits.dev/r/CardNav-JS-TW.json` |
| CardNav-TS-CSS | registry:component | Expandable navigation bar with card panels revealing nested links. | `npx shadcn@latest add https://reactbits.dev/r/CardNav-TS-CSS.json` |
| CardNav-TS-TW | registry:component | Expandable navigation bar with card panels revealing nested links. | `npx shadcn@latest add https://reactbits.dev/r/CardNav-TS-TW.json` |
| CardSwap-JS-CSS | registry:component | Cards animate position swapping with smooth layout transitions. | `npx shadcn@latest add https://reactbits.dev/r/CardSwap-JS-CSS.json` |
| CardSwap-JS-TW | registry:component | Cards animate position swapping with smooth layout transitions. | `npx shadcn@latest add https://reactbits.dev/r/CardSwap-JS-TW.json` |
| CardSwap-TS-CSS | registry:component | Cards animate position swapping with smooth layout transitions. | `npx shadcn@latest add https://reactbits.dev/r/CardSwap-TS-CSS.json` |
| CardSwap-TS-TW | registry:component | Cards animate position swapping with smooth layout transitions. | `npx shadcn@latest add https://reactbits.dev/r/CardSwap-TS-TW.json` |
| Carousel-JS-CSS | registry:component | Responsive carousel with touch gestures, looping and transitions. | `npx shadcn@latest add https://reactbits.dev/r/Carousel-JS-CSS.json` |
| Carousel-JS-TW | registry:component | Responsive carousel with touch gestures, looping and transitions. | `npx shadcn@latest add https://reactbits.dev/r/Carousel-JS-TW.json` |
| Carousel-TS-CSS | registry:component | Responsive carousel with touch gestures, looping and transitions. | `npx shadcn@latest add https://reactbits.dev/r/Carousel-TS-CSS.json` |
| Carousel-TS-TW | registry:component | Responsive carousel with touch gestures, looping and transitions. | `npx shadcn@latest add https://reactbits.dev/r/Carousel-TS-TW.json` |
| ChromaGrid-JS-CSS | registry:component | A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. | `npx shadcn@latest add https://reactbits.dev/r/ChromaGrid-JS-CSS.json` |
| ChromaGrid-JS-TW | registry:component | A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. | `npx shadcn@latest add https://reactbits.dev/r/ChromaGrid-JS-TW.json` |
| ChromaGrid-TS-CSS | registry:component | A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. | `npx shadcn@latest add https://reactbits.dev/r/ChromaGrid-TS-CSS.json` |
| ChromaGrid-TS-TW | registry:component | A responsive grid of grayscale tiles. Hovering the grid reaveals their colors. | `npx shadcn@latest add https://reactbits.dev/r/ChromaGrid-TS-TW.json` |
| CircularGallery-JS-CSS | registry:component | Circular orbit gallery rotating images. | `npx shadcn@latest add https://reactbits.dev/r/CircularGallery-JS-CSS.json` |
| CircularGallery-JS-TW | registry:component | Circular orbit gallery rotating images. | `npx shadcn@latest add https://reactbits.dev/r/CircularGallery-JS-TW.json` |
| CircularGallery-TS-CSS | registry:component | Circular orbit gallery rotating images. | `npx shadcn@latest add https://reactbits.dev/r/CircularGallery-TS-CSS.json` |
| CircularGallery-TS-TW | registry:component | Circular orbit gallery rotating images. | `npx shadcn@latest add https://reactbits.dev/r/CircularGallery-TS-TW.json` |
| Counter-JS-CSS | registry:component | Flexible animated counter supporting increments + easing. | `npx shadcn@latest add https://reactbits.dev/r/Counter-JS-CSS.json` |
| Counter-JS-TW | registry:component | Flexible animated counter supporting increments + easing. | `npx shadcn@latest add https://reactbits.dev/r/Counter-JS-TW.json` |
| Counter-TS-CSS | registry:component | Flexible animated counter supporting increments + easing. | `npx shadcn@latest add https://reactbits.dev/r/Counter-TS-CSS.json` |
| Counter-TS-TW | registry:component | Flexible animated counter supporting increments + easing. | `npx shadcn@latest add https://reactbits.dev/r/Counter-TS-TW.json` |
| DecayCard-JS-CSS | registry:component | Hover parallax effect that disintegrates the content of a card. | `npx shadcn@latest add https://reactbits.dev/r/DecayCard-JS-CSS.json` |
| DecayCard-JS-TW | registry:component | Hover parallax effect that disintegrates the content of a card. | `npx shadcn@latest add https://reactbits.dev/r/DecayCard-JS-TW.json` |

## For AI agents

```text
You are adding components from @react-bits to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/react-bits.md) for the component list.
2. Fetch the machine-readable index: https://reactbits.dev/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: react-bits).
```