Rewamp UI

Overview

Rewamp UI is an open-source React component library and interactive showcase dashboard crafted for builders who want to bring tactile, motion-rich delight into their applications. Built on React 19, Vite, and Tailwind CSS 4, Rewamp UI eliminates the static monotony of traditional design systems by blending physically accurate Framer Motion dynamics with Three.js WebGL canvas shaders. Offering everything from fluid water caustics backgrounds to tactile slide-to-confirm buttons, the entire catalog is distributed through copy-paste transparency and a dedicated CLI tool, ensuring developers maintain 100% source ownership without runtime lock-in.

Key Features

• 🌊 Immersive WebGL & Shader Backgrounds: Ships stunning canvas backgrounds including Water Caustics, Aurora Waves, Pixel Snow, and Hyperspeed Warp driven by Three.js.
• 🕹️ Tactile Micro-Interactions: Features expressive UI controls like Googly Eyes Buttons, Slide to Confirm buttons, cosmic sky toggles, and kinetic reel text reveals.
• ⚡️ Dedicated Zero-Config CLI: Pull components directly into your codebase with npx rewampui add <component> or explore and copy raw source code directly from the live browser.
• 🎨 Tailwind CSS 4 & Design Tokens: Uses modern CSS variables for design tokens with built-in dark and light mode adaptation, making integration into existing projects seamless.

Installation & Quick Start

# Add components directly using the Rewamp UI CLI
npx rewampui add slide-to-confirm-button
# Also works with bunx or pnpm dlx
bunx rewampui add theme-toggle

import React, { useState } from 'react';
import { SlideToConfirmButton } from '@/components/ui/slide-to-confirm-button';

export default function CheckoutAction() {
  const [isConfirmed, setIsConfirmed] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center p-8 bg-surface rounded-2xl border border-border">
      <h3 className="text-xl font-semibold mb-4">Complete Payment</h3>
      <SlideToConfirmButton
        onConfirm={() => setIsConfirmed(true)}
        label={isConfirmed ? "Payment Confirmed!" : "Slide to Confirm"}
        sliderColor="#0066cc"
      />
    </div>
  );
}

Why Choose Rewamp UI?

1. Dynamic Emotional Impact: Replaces generic, robotic controls with playful, physically responsive micro-interactions that make interfaces memorable.
2. Zero NPM Wrapper Lock-in: By downloading source code directly into your repository, you retain full control over animations, dependencies, and styling overrides.