Copy.Paste.
Repeat.

Animated React components you own. Add one with a single command, in TypeScript or JavaScript, with Tailwind or plain CSS.

Browse components

$npx @hritik-sharmaa/repeat-ui add

Bubble Creep Fill Layers Letter Pulse Rotation Simple Sketchy Wiggle Echo Magnetic Stamp 3d Card Pricing Card Profile Card Ink Reveal Spotlight Card Peel Seal Loop Deck Modern Carousel Simple Carousel Flipping Text Flow Text Pop Text Split Reveal Text Text Shadow Typing Text Echo Text Loop Text Scramble Text Tally Counter Matchlight 2 Column Bento Grid 3 Column Bento Grid Pinterest Grid Accordion Gallery Marquee Grid Scroll Timeline Dot Trail Ascii Image Dither Image Accordian Document Upload Modal Search Bar Command Palette Copy Field Dock Liquid Toggle Morph Tabs Stack Notifications Thermal Receipt Liquid Tab Bar

Live

Made to be seen moving.

Every tile is the real component, running right here. Click through for the code.

Install

One command. Your code.

01
Pick
Find a component, then choose TypeScript or JavaScript, Tailwind or plain CSS.
02
Add
Run our CLI, or the shadcn CLI. The packages it needs install for you.
03
Own it
The files land in your repo. No runtime package, nothing to update, change anything.

~/my-app

import type { ButtonHTMLAttributes } from "react";

// Shared by every Repeat UI button, so they line up side by side.
const SIZES = {
  sm: { height: 36, paddingInline: 16, fontSize: 14 },
  md: { height: 44, paddingInline: 22, fontSize: 15 },
  lg: { height: 52, paddingInline: 28, fontSize: 17 },
};

export interface SimpleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  size?: keyof typeof SIZES;
  color?: string;
  textColor?: string;
  radius?: number;
}

const Simple = ({
  children,
  size = "md",
  color = "#ffffff",
  textColor = "#0a0a0a",
  radius = 10,
  className = "",
  style,
  ...rest
}: SimpleProps) => {
  return (
    <button
      type="button"
      className={`inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border border-black/10 font-semibold leading-none shadow-sm transition duration-200 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm disabled:pointer-events-none disabled:opacity-50 ${className}`}
      style={{ ...SIZES[size], background: color, color: textColor, borderRadius: radius, ...style }}
      {...rest}>
      {children}
    </button>
  );
};

export default Simple;

Flavors