Rewamp UI: 70+ Copy-Paste Animated React Components

Rewamp UI is a React component library that provides 70+ UI components for animated backgrounds, navbars, controls, text effects, card interactions, cursors, and AI-themed UI.

All UI components can be copied manually or installed as editable source through the rewampui CLI.

GitHub Repo

Browse All Components

Features

70+ React components across 10 UI categories.
Editable component source installed by slug or copied manually.
Configurable component directory through components.json.
Per-item npm and registry dependency metadata.
Tailwind CSS 4 styling and CSS-variable theme tokens.
Framer Motion animation and Three.js WebGL components.
Node CLI with npm, pnpm, Yarn, and Bun runners.

Available UI Components

Category	Components Included
Animated Backgrounds	Liquid Cursor Gradient, Hyperspeed Warp, Water Caustics Background
Buttons	Googly Eyes Button, Slide To Confirm Button, Chrome Border Button
Text Animations	Kinetic Reel Text, Character Scramble Text, Typewriter Text
Toggles	Day Night Sky Toggle, Landscape Orb Toggle, Glass Orb Toggle
Cursors	Pill Trail Cursor, Halftone Dot Cursor
Navbars	Hero Morph Navbar, Fluid Wave Navbar, Circular Radial Navbar
Search Bars	Morph Search Capsule, Animated Search Demo
Sidebars	Kinetic Lens Sidebar, Sidebar, Flower Sidebar
Cards	Diagonal Card Stack, Editorial 3D Orbit Carousel, Arch Card Carousel
UI for AI	Marbled Fluid Orb, Fluid Morph Orb, Wireframe Ring Orb

How To Use Rewamp UI

Initialize the CLI

The initializer creates components.json and sets the default component directory to src/components/ui:

npx rewampui init

Install Individual Components

Install one component by its registry slug:

npx rewampui add arch-card-carousel

Pass multiple slugs in one command:

npx rewampui add arch-card-carousel theme-toggle

Use pnpm, Yarn, or Bun

pnpm dlx rewampui add arch-card-carousel
yarn dlx rewampui add arch-card-carousel
bunx rewampui add arch-card-carousel

Copy Source Manually

The official component page also exposes source for manual copying.

Basic Usage: Arch Card Carousel

Install the arch-card-carousel component:

npx rewampui add arch-card-carousel

Use your own image list and adjust the circular track through the component props:

import ArchCardCarousel from "./components/ui/ArchCardCarousel";
const projectImages = [
  "/projects/dashboard.jpg",
  "/projects/mobile-app.jpg",
  "/projects/storefront.jpg",
  "/projects/analytics.jpg",
  "/projects/editor.jpg",
];
export default function ProjectGallery() {
  return (
    <ArchCardCarousel
      images={projectImages}
      radius={760}
      stepAngleDeg={12}
      cardWidth={168}
      cardHeight={232}
      className="py-8"
    />
  );
}

Configure the component using the following props

Prop	Type	Default	Description
`images`	`string[]`	Built-in image list	Card image sources
`radius`	`number`	`800`	Circular track radius
`stepAngleDeg`	`number`	`13.5`	Angular spacing between cards
`cardWidth`	`number`	`156`	Desktop card width
`cardHeight`	`number`	`218`	Desktop card height
`className`	`string`	`""`	Local CSS classes