---
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: 50345
component_count: 250
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.netlify.app/registry/react-bits
- This file: https://sh4dcn.netlify.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 reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-CSS.json` |
| AnimatedContent-JS-TW | registry:component | Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-JS-TW.json` |
| AnimatedContent-TS-CSS | registry:component | Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-CSS.json` |
| AnimatedContent-TS-TW | registry:component | Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children. | `npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-TW.json` |
| BlobCursor-JS-CSS | registry:component | Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-CSS.json` |
| BlobCursor-JS-TW | registry:component | Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-JS-TW.json` |
| BlobCursor-TS-CSS | registry:component | Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-CSS.json` |
| BlobCursor-TS-TW | registry:component | Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink. | `npx shadcn@latest add https://reactbits.dev/r/BlobCursor-TS-TW.json` |
| ClickSpark-JS-CSS | registry:component | Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-CSS.json` |
| ClickSpark-JS-TW | registry:component | Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-JS-TW.json` |
| ClickSpark-TS-CSS | registry:component | Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-CSS.json` |
| ClickSpark-TS-TW | registry:component | Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons. | `npx shadcn@latest add https://reactbits.dev/r/ClickSpark-TS-TW.json` |
| Crosshair-JS-CSS | registry:component | Crosshair cursor with live coordinates that locks onto links and buttons and measures them. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-CSS.json` |
| Crosshair-JS-TW | registry:component | Crosshair cursor with live coordinates that locks onto links and buttons and measures them. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-JS-TW.json` |
| Crosshair-TS-CSS | registry:component | Crosshair cursor with live coordinates that locks onto links and buttons and measures them. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-CSS.json` |
| Crosshair-TS-TW | registry:component | Crosshair cursor with live coordinates that locks onto links and buttons and measures them. | `npx shadcn@latest add https://reactbits.dev/r/Crosshair-TS-TW.json` |
| Cubes-JS-CSS | registry:component | A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-CSS.json` |
| Cubes-JS-TW | registry:component | A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-JS-TW.json` |
| Cubes-TS-CSS | registry:component | A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-CSS.json` |
| Cubes-TS-TW | registry:component | A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click. | `npx shadcn@latest add https://reactbits.dev/r/Cubes-TS-TW.json` |
| ElectricBorder-JS-CSS | registry:component | Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-CSS.json` |
| ElectricBorder-JS-TW | registry:component | Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-JS-TW.json` |
| ElectricBorder-TS-CSS | registry:component | Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-CSS.json` |
| ElectricBorder-TS-TW | registry:component | Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks. | `npx shadcn@latest add https://reactbits.dev/r/ElectricBorder-TS-TW.json` |
| FadeContent-JS-CSS | registry:component | Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-CSS.json` |
| FadeContent-JS-TW | registry:component | Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-JS-TW.json` |
| FadeContent-TS-CSS | registry:component | Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-CSS.json` |
| FadeContent-TS-TW | registry:component | Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks. | `npx shadcn@latest add https://reactbits.dev/r/FadeContent-TS-TW.json` |
| GlareHover-JS-CSS | registry:component | A glossy light streak that sweeps across any element in the direction the cursor moves. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-CSS.json` |
| GlareHover-JS-TW | registry:component | A glossy light streak that sweeps across any element in the direction the cursor moves. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-JS-TW.json` |
| GlareHover-TS-CSS | registry:component | A glossy light streak that sweeps across any element in the direction the cursor moves. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-CSS.json` |
| GlareHover-TS-TW | registry:component | A glossy light streak that sweeps across any element in the direction the cursor moves. | `npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-TW.json` |
| GradualBlur-JS-CSS | registry:component | Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-CSS.json` |
| GradualBlur-JS-TW | registry:component | Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-JS-TW.json` |
| GradualBlur-TS-CSS | registry:component | Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-CSS.json` |
| GradualBlur-TS-TW | registry:component | Progressive edge blur for headers, footers, captions and carousels, with an optional fade to color that hides at the ends of a scroll. | `npx shadcn@latest add https://reactbits.dev/r/GradualBlur-TS-TW.json` |
| CrystalizedBall-JS-CSS | registry:component | A glass ball with a crackling electric rim and glowing dust that swirls with the cursor. | `npx shadcn@latest add https://reactbits.dev/r/CrystalizedBall-JS-CSS.json` |
| CrystalizedBall-JS-TW | registry:component | A glass ball with a crackling electric rim and glowing dust that swirls with the cursor. | `npx shadcn@latest add https://reactbits.dev/r/CrystalizedBall-JS-TW.json` |
| CrystalizedBall-TS-CSS | registry:component | A glass ball with a crackling electric rim and glowing dust that swirls with the cursor. | `npx shadcn@latest add https://reactbits.dev/r/CrystalizedBall-TS-CSS.json` |
| CrystalizedBall-TS-TW | registry:component | A glass ball with a crackling electric rim and glowing dust that swirls with the cursor. | `npx shadcn@latest add https://reactbits.dev/r/CrystalizedBall-TS-TW.json` |
| ElectricLogo-JS-CSS | registry:component | Turns any logo into a living lightning outline, with arcs that leap off its edges. | `npx shadcn@latest add https://reactbits.dev/r/ElectricLogo-JS-CSS.json` |
| ElectricLogo-JS-TW | registry:component | Turns any logo into a living lightning outline, with arcs that leap off its edges. | `npx shadcn@latest add https://reactbits.dev/r/ElectricLogo-JS-TW.json` |
| ElectricLogo-TS-CSS | registry:component | Turns any logo into a living lightning outline, with arcs that leap off its edges. | `npx shadcn@latest add https://reactbits.dev/r/ElectricLogo-TS-CSS.json` |
| ElectricLogo-TS-TW | registry:component | Turns any logo into a living lightning outline, with arcs that leap off its edges. | `npx shadcn@latest add https://reactbits.dev/r/ElectricLogo-TS-TW.json` |
| DitherVeil-JS-CSS | registry:component | A 1-bit dithered photo the cursor burns through to full colour, knitting back cell by cell. | `npx shadcn@latest add https://reactbits.dev/r/DitherVeil-JS-CSS.json` |
| DitherVeil-JS-TW | registry:component | A 1-bit dithered photo the cursor burns through to full colour, knitting back cell by cell. | `npx shadcn@latest add https://reactbits.dev/r/DitherVeil-JS-TW.json` |
| DitherVeil-TS-CSS | registry:component | A 1-bit dithered photo the cursor burns through to full colour, knitting back cell by cell. | `npx shadcn@latest add https://reactbits.dev/r/DitherVeil-TS-CSS.json` |
| DitherVeil-TS-TW | registry:component | A 1-bit dithered photo the cursor burns through to full colour, knitting back cell by cell. | `npx shadcn@latest add https://reactbits.dev/r/DitherVeil-TS-TW.json` |
| GlowCursor-JS-CSS | registry:component | Light that pours from the cursor, drifts softly through the air and cools as it fades. | `npx shadcn@latest add https://reactbits.dev/r/GlowCursor-JS-CSS.json` |
| GlowCursor-JS-TW | registry:component | Light that pours from the cursor, drifts softly through the air and cools as it fades. | `npx shadcn@latest add https://reactbits.dev/r/GlowCursor-JS-TW.json` |
| GlowCursor-TS-CSS | registry:component | Light that pours from the cursor, drifts softly through the air and cools as it fades. | `npx shadcn@latest add https://reactbits.dev/r/GlowCursor-TS-CSS.json` |
| GlowCursor-TS-TW | registry:component | Light that pours from the cursor, drifts softly through the air and cools as it fades. | `npx shadcn@latest add https://reactbits.dev/r/GlowCursor-TS-TW.json` |
| GhostCursor-JS-CSS | registry:component | A ghost of glowing smoke that floats after the cursor and curls away as it rises. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-CSS.json` |
| GhostCursor-JS-TW | registry:component | A ghost of glowing smoke that floats after the cursor and curls away as it rises. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-JS-TW.json` |
| GhostCursor-TS-CSS | registry:component | A ghost of glowing smoke that floats after the cursor and curls away as it rises. | `npx shadcn@latest add https://reactbits.dev/r/GhostCursor-TS-CSS.json` |
| GhostCursor-TS-TW | registry:component | A ghost of glowing smoke that floats after the cursor and curls away as it rises. | `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` |
| MetaBalls-JS-CSS | registry:component | Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-CSS.json` |
| MetaBalls-JS-TW | registry:component | Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-JS-TW.json` |
| MetaBalls-TS-CSS | registry:component | Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-CSS.json` |
| MetaBalls-TS-TW | registry:component | Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them. | `npx shadcn@latest add https://reactbits.dev/r/MetaBalls-TS-TW.json` |
| Strands-JS-CSS | registry:component | Spectral strands that twist inside a frosted glass orb and swell into a smooth bulge where they come together, like the new Siri. | `npx shadcn@latest add https://reactbits.dev/r/Strands-JS-CSS.json` |
| Strands-JS-TW | registry:component | Spectral strands that twist inside a frosted glass orb and swell into a smooth bulge where they come together, like the new Siri. | `npx shadcn@latest add https://reactbits.dev/r/Strands-JS-TW.json` |
| Strands-TS-CSS | registry:component | Spectral strands that twist inside a frosted glass orb and swell into a smooth bulge where they come together, like the new Siri. | `npx shadcn@latest add https://reactbits.dev/r/Strands-TS-CSS.json` |
| Strands-TS-TW | registry:component | Spectral strands that twist inside a frosted glass orb and swell into a smooth bulge where they come together, like the new Siri. | `npx shadcn@latest add https://reactbits.dev/r/Strands-TS-TW.json` |
| MetallicPaint-JS-CSS | registry:component | Liquid chrome that flows over your logo or text, adapted from Paper's Liquid Metal shader. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-JS-CSS.json` |
| MetallicPaint-JS-TW | registry:component | Liquid chrome that flows over your logo or text, adapted from Paper's Liquid Metal shader. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-JS-TW.json` |
| MetallicPaint-TS-CSS | registry:component | Liquid chrome that flows over your logo or text, adapted from Paper's Liquid Metal shader. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-TS-CSS.json` |
| MetallicPaint-TS-TW | registry:component | Liquid chrome that flows over your logo or text, adapted from Paper's Liquid Metal shader. | `npx shadcn@latest add https://reactbits.dev/r/MetallicPaint-TS-TW.json` |
| Noise-JS-CSS | registry:component | Film grain overlay for photos and pages, from fine 35mm grain to dust, paper and TV static. | `npx shadcn@latest add https://reactbits.dev/r/Noise-JS-CSS.json` |
| Noise-JS-TW | registry:component | Film grain overlay for photos and pages, from fine 35mm grain to dust, paper and TV static. | `npx shadcn@latest add https://reactbits.dev/r/Noise-JS-TW.json` |
| Noise-TS-CSS | registry:component | Film grain overlay for photos and pages, from fine 35mm grain to dust, paper and TV static. | `npx shadcn@latest add https://reactbits.dev/r/Noise-TS-CSS.json` |
| Noise-TS-TW | registry:component | Film grain overlay for photos and pages, from fine 35mm grain to dust, paper and TV static. | `npx shadcn@latest add https://reactbits.dev/r/Noise-TS-TW.json` |
| PixelTrail-JS-CSS | registry:component | Glossy pixels melt into a fluid goo trail behind the cursor, with color shifts and drips. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-JS-CSS.json` |
| PixelTrail-JS-TW | registry:component | Glossy pixels melt into a fluid goo trail behind the cursor, with color shifts and drips. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-JS-TW.json` |
| PixelTrail-TS-CSS | registry:component | Glossy pixels melt into a fluid goo trail behind the cursor, with color shifts and drips. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-TS-CSS.json` |
| PixelTrail-TS-TW | registry:component | Glossy pixels melt into a fluid goo trail behind the cursor, with color shifts and drips. | `npx shadcn@latest add https://reactbits.dev/r/PixelTrail-TS-TW.json` |
| PixelTransition-JS-CSS | registry:component | Retro pixel dissolve that covers a card in solid pixels, swaps the content underneath and clears again. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-JS-CSS.json` |
| PixelTransition-JS-TW | registry:component | Retro pixel dissolve that covers a card in solid pixels, swaps the content underneath and clears again. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-JS-TW.json` |
| PixelTransition-TS-CSS | registry:component | Retro pixel dissolve that covers a card in solid pixels, swaps the content underneath and clears again. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-TS-CSS.json` |
| PixelTransition-TS-TW | registry:component | Retro pixel dissolve that covers a card in solid pixels, swaps the content underneath and clears again. | `npx shadcn@latest add https://reactbits.dev/r/PixelTransition-TS-TW.json` |
| PixelSwap-JS-CSS | registry:component | New content builds in pixel by pixel in a springy wave that starts wherever the cursor enters. | `npx shadcn@latest add https://reactbits.dev/r/PixelSwap-JS-CSS.json` |
| PixelSwap-JS-TW | registry:component | New content builds in pixel by pixel in a springy wave that starts wherever the cursor enters. | `npx shadcn@latest add https://reactbits.dev/r/PixelSwap-JS-TW.json` |
| PixelSwap-TS-CSS | registry:component | New content builds in pixel by pixel in a springy wave that starts wherever the cursor enters. | `npx shadcn@latest add https://reactbits.dev/r/PixelSwap-TS-CSS.json` |
| PixelSwap-TS-TW | registry:component | New content builds in pixel by pixel in a springy wave that starts wherever the cursor enters. | `npx shadcn@latest add https://reactbits.dev/r/PixelSwap-TS-TW.json` |
| Ribbons-JS-CSS | registry:component | Springy ribbons that trail the cursor, in lens, comet or even shapes with an optional wave. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-JS-CSS.json` |
| Ribbons-JS-TW | registry:component | Springy ribbons that trail the cursor, in lens, comet or even shapes with an optional wave. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-JS-TW.json` |
| Ribbons-TS-CSS | registry:component | Springy ribbons that trail the cursor, in lens, comet or even shapes with an optional wave. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-TS-CSS.json` |
| Ribbons-TS-TW | registry:component | Springy ribbons that trail the cursor, in lens, comet or even shapes with an optional wave. | `npx shadcn@latest add https://reactbits.dev/r/Ribbons-TS-TW.json` |
| ShapeBlur-JS-CSS | registry:component | A crisp logo or shape that drifts out of focus under the pointer like a camera lens. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-JS-CSS.json` |
| ShapeBlur-JS-TW | registry:component | A crisp logo or shape that drifts out of focus under the pointer like a camera lens. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-JS-TW.json` |
| ShapeBlur-TS-CSS | registry:component | A crisp logo or shape that drifts out of focus under the pointer like a camera lens. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-TS-CSS.json` |
| ShapeBlur-TS-TW | registry:component | A crisp logo or shape that drifts out of focus under the pointer like a camera lens. | `npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-TS-TW.json` |
| SplashCursor-JS-CSS | registry:component | A fluid simulation that trails the cursor in swirling ink and bursts into a splash on click. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-JS-CSS.json` |
| SplashCursor-JS-TW | registry:component | A fluid simulation that trails the cursor in swirling ink and bursts into a splash on click. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-JS-TW.json` |
| SplashCursor-TS-CSS | registry:component | A fluid simulation that trails the cursor in swirling ink and bursts into a splash on click. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-TS-CSS.json` |
| SplashCursor-TS-TW | registry:component | A fluid simulation that trails the cursor in swirling ink and bursts into a splash on click. | `npx shadcn@latest add https://reactbits.dev/r/SplashCursor-TS-TW.json` |
| StarBorder-JS-CSS | registry:component | A twinkling star that travels the exact outline of any button, pill or card, trailing light and stardust. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-JS-CSS.json` |
| StarBorder-JS-TW | registry:component | A twinkling star that travels the exact outline of any button, pill or card, trailing light and stardust. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-JS-TW.json` |
| StarBorder-TS-CSS | registry:component | A twinkling star that travels the exact outline of any button, pill or card, trailing light and stardust. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-TS-CSS.json` |
| StarBorder-TS-TW | registry:component | A twinkling star that travels the exact outline of any button, pill or card, trailing light and stardust. | `npx shadcn@latest add https://reactbits.dev/r/StarBorder-TS-TW.json` |
| StickerPeel-JS-CSS | registry:component | A die-cut sticker you can peel at any edge, drag, throw and swing, in gloss, matte or holographic finishes. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-JS-CSS.json` |
| StickerPeel-JS-TW | registry:component | A die-cut sticker you can peel at any edge, drag, throw and swing, in gloss, matte or holographic finishes. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-JS-TW.json` |
| StickerPeel-TS-CSS | registry:component | A die-cut sticker you can peel at any edge, drag, throw and swing, in gloss, matte or holographic finishes. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-TS-CSS.json` |
| StickerPeel-TS-TW | registry:component | A die-cut sticker you can peel at any edge, drag, throw and swing, in gloss, matte or holographic finishes. | `npx shadcn@latest add https://reactbits.dev/r/StickerPeel-TS-TW.json` |
| TargetCursor-JS-CSS | registry:component | A reticle cursor whose corner brackets snap around targets, matching their shape. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-JS-CSS.json` |
| TargetCursor-JS-TW | registry:component | A reticle cursor whose corner brackets snap around targets, matching their shape. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-JS-TW.json` |
| TargetCursor-TS-CSS | registry:component | A reticle cursor whose corner brackets snap around targets, matching their shape. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-TS-CSS.json` |
| TargetCursor-TS-TW | registry:component | A reticle cursor whose corner brackets snap around targets, matching their shape. | `npx shadcn@latest add https://reactbits.dev/r/TargetCursor-TS-TW.json` |
| LaserFlow-JS-CSS | registry:component | A beam of light that splashes onto your content and pours over its corners. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-JS-CSS.json` |
| LaserFlow-JS-TW | registry:component | A beam of light that splashes onto your content and pours over its corners. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-JS-TW.json` |
| LaserFlow-TS-CSS | registry:component | A beam of light that splashes onto your content and pours over its corners. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-TS-CSS.json` |
| LaserFlow-TS-TW | registry:component | A beam of light that splashes onto your content and pours over its corners. | `npx shadcn@latest add https://reactbits.dev/r/LaserFlow-TS-TW.json` |
| Antigravity-JS-CSS | registry:component | A field of particles that lifts into a glowing ring around the cursor and bursts outward on click. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-JS-CSS.json` |
| Antigravity-JS-TW | registry:component | A field of particles that lifts into a glowing ring around the cursor and bursts outward on click. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-JS-TW.json` |
| Antigravity-TS-CSS | registry:component | A field of particles that lifts into a glowing ring around the cursor and bursts outward on click. | `npx shadcn@latest add https://reactbits.dev/r/Antigravity-TS-CSS.json` |
| Antigravity-TS-TW | registry:component | A field of particles that lifts into a glowing ring around the cursor and bursts outward on click. | `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` |
| ASCIIText-JS-CSS | registry:component | Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-JS-CSS.json` |
| ASCIIText-JS-TW | registry:component | Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-JS-TW.json` |
| ASCIIText-TS-CSS | registry:component | Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click. | `npx shadcn@latest add https://reactbits.dev/r/ASCIIText-TS-CSS.json` |
| ASCIIText-TS-TW | registry:component | Waving ASCII text that tilts toward the pointer, scrambles on hover and ripples on click. | `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 | Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-JS-CSS.json` |
| FallingText-JS-TW | registry:component | Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-JS-TW.json` |
| FallingText-TS-CSS | registry:component | Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place. | `npx shadcn@latest add https://reactbits.dev/r/FallingText-TS-CSS.json` |
| FallingText-TS-TW | registry:component | Text that breaks apart and tumbles into a pile you can drag, throw and swipe, then flies back into place. | `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 | Living gradients inside your text: a sliding sweep, a drifting mesh or a swinging conic fan. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-JS-CSS.json` |
| GradientText-JS-TW | registry:component | Living gradients inside your text: a sliding sweep, a drifting mesh or a swinging conic fan. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-JS-TW.json` |
| GradientText-TS-CSS | registry:component | Living gradients inside your text: a sliding sweep, a drifting mesh or a swinging conic fan. | `npx shadcn@latest add https://reactbits.dev/r/GradientText-TS-CSS.json` |
| GradientText-TS-TW | registry:component | Living gradients inside your text: a sliding sweep, a drifting mesh or a swinging conic fan. | `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 | A sheen of light that sweeps across text, from soft bands to chrome-like reflections. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-JS-CSS.json` |
| ShinyText-JS-TW | registry:component | A sheen of light that sweeps across text, from soft bands to chrome-like reflections. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-JS-TW.json` |
| ShinyText-TS-CSS | registry:component | A sheen of light that sweeps across text, from soft bands to chrome-like reflections. | `npx shadcn@latest add https://reactbits.dev/r/ShinyText-TS-CSS.json` |
| ShinyText-TS-TW | registry:component | A sheen of light that sweeps across text, from soft bands to chrome-like reflections. | `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 | Text or emoji that trails your cursor as stamped copies, a following chain or a ribbon of letters. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-JS-CSS.json` |
| TextCursor-JS-TW | registry:component | Text or emoji that trails your cursor as stamped copies, a following chain or a ribbon of letters. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-JS-TW.json` |
| TextCursor-TS-CSS | registry:component | Text or emoji that trails your cursor as stamped copies, a following chain or a ribbon of letters. | `npx shadcn@latest add https://reactbits.dev/r/TextCursor-TS-CSS.json` |
| TextCursor-TS-TW | registry:component | Text or emoji that trails your cursor as stamped copies, a following chain or a ribbon of letters. | `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` |
| ParticleText-JS-CSS | registry:component | Text assembles from drifting particles that scatter and reform on demand. | `npx shadcn@latest add https://reactbits.dev/r/ParticleText-JS-CSS.json` |
| ParticleText-JS-TW | registry:component | Text assembles from drifting particles that scatter and reform on demand. | `npx shadcn@latest add https://reactbits.dev/r/ParticleText-JS-TW.json` |
| ParticleText-TS-CSS | registry:component | Text assembles from drifting particles that scatter and reform on demand. | `npx shadcn@latest add https://reactbits.dev/r/ParticleText-TS-CSS.json` |
| ParticleText-TS-TW | registry:component | Text assembles from drifting particles that scatter and reform on demand. | `npx shadcn@latest add https://reactbits.dev/r/ParticleText-TS-TW.json` |
| SplitFlapText-JS-CSS | registry:component | Mechanical split-flap departure board that clacks through to each new phrase. | `npx shadcn@latest add https://reactbits.dev/r/SplitFlapText-JS-CSS.json` |
| SplitFlapText-JS-TW | registry:component | Mechanical split-flap departure board that clacks through to each new phrase. | `npx shadcn@latest add https://reactbits.dev/r/SplitFlapText-JS-TW.json` |
| SplitFlapText-TS-CSS | registry:component | Mechanical split-flap departure board that clacks through to each new phrase. | `npx shadcn@latest add https://reactbits.dev/r/SplitFlapText-TS-CSS.json` |
| SplitFlapText-TS-TW | registry:component | Mechanical split-flap departure board that clacks through to each new phrase. | `npx shadcn@latest add https://reactbits.dev/r/SplitFlapText-TS-TW.json` |
| WarpText-JS-CSS | registry:component | WebGL warp that bends and refracts the text around the pointer. | `npx shadcn@latest add https://reactbits.dev/r/WarpText-JS-CSS.json` |
| WarpText-JS-TW | registry:component | WebGL warp that bends and refracts the text around the pointer. | `npx shadcn@latest add https://reactbits.dev/r/WarpText-JS-TW.json` |
| WarpText-TS-CSS | registry:component | WebGL warp that bends and refracts the text around the pointer. | `npx shadcn@latest add https://reactbits.dev/r/WarpText-TS-CSS.json` |
| WarpText-TS-TW | registry:component | WebGL warp that bends and refracts the text around the pointer. | `npx shadcn@latest add https://reactbits.dev/r/WarpText-TS-TW.json` |
| TechText-JS-CSS | registry:component | A wordmark whose letters turn into dashed vector paths under the cursor. | `npx shadcn@latest add https://reactbits.dev/r/TechText-JS-CSS.json` |
| TechText-JS-TW | registry:component | A wordmark whose letters turn into dashed vector paths under the cursor. | `npx shadcn@latest add https://reactbits.dev/r/TechText-JS-TW.json` |
| TechText-TS-CSS | registry:component | A wordmark whose letters turn into dashed vector paths under the cursor. | `npx shadcn@latest add https://reactbits.dev/r/TechText-TS-CSS.json` |
| TechText-TS-TW | registry:component | A wordmark whose letters turn into dashed vector paths under the cursor. | `npx shadcn@latest add https://reactbits.dev/r/TechText-TS-TW.json` |
| StrokeText-JS-CSS | registry:component | Outlined letterforms draw themselves on, then flood with fill. | `npx shadcn@latest add https://reactbits.dev/r/StrokeText-JS-CSS.json` |
| StrokeText-JS-TW | registry:component | Outlined letterforms draw themselves on, then flood with fill. | `npx shadcn@latest add https://reactbits.dev/r/StrokeText-JS-TW.json` |
| StrokeText-TS-CSS | registry:component | Outlined letterforms draw themselves on, then flood with fill. | `npx shadcn@latest add https://reactbits.dev/r/StrokeText-TS-CSS.json` |
| StrokeText-TS-TW | registry:component | Outlined letterforms draw themselves on, then flood with fill. | `npx shadcn@latest add https://reactbits.dev/r/StrokeText-TS-TW.json` |
| DepthText-JS-CSS | registry:component | Layered extruded type with parallax that shifts against the pointer. | `npx shadcn@latest add https://reactbits.dev/r/DepthText-JS-CSS.json` |
| DepthText-JS-TW | registry:component | Layered extruded type with parallax that shifts against the pointer. | `npx shadcn@latest add https://reactbits.dev/r/DepthText-JS-TW.json` |
| DepthText-TS-CSS | registry:component | Layered extruded type with parallax that shifts against the pointer. | `npx shadcn@latest add https://reactbits.dev/r/DepthText-TS-CSS.json` |
| DepthText-TS-TW | registry:component | Layered extruded type with parallax that shifts against the pointer. | `npx shadcn@latest add https://reactbits.dev/r/DepthText-TS-TW.json` |
| FoldText-JS-CSS | registry:component | Lines unfold into place like creased paper opening flat. | `npx shadcn@latest add https://reactbits.dev/r/FoldText-JS-CSS.json` |
| FoldText-JS-TW | registry:component | Lines unfold into place like creased paper opening flat. | `npx shadcn@latest add https://reactbits.dev/r/FoldText-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.netlify.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.netlify.app/json (library slug: react-bits).
```