2 variants

Metal

Brushed metal for the one call to action that sells, and a matching badge for Pro or New.

Button

A brushed metal button with a light that sweeps across once on hover and a small press on tap. It never loops.

usage.tsx

import { MetalButton } from "@/components/registry/metal-button";

export function Upgrade() {
  return <MetalButton size="lg">Get Pro</MetalButton>;
}

"use client";

import { type HTMLMotionProps, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface MetalButtonProps extends Omit<HTMLMotionProps<"button">, "children"> {
  children: ReactNode;
  size?: "md" | "lg";
}

/** The brushed metal surface, shared with the badge so both read as one material. */

42 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/metal-button

Badge

A small still pill in the same metal, for marking Pro or New beside a label.

Agent console Pro
Border beam New

usage.tsx

import { MetalBadge } from "@/components/registry/metal-badge";

export function Label() {
  return (
    <span className="flex items-center gap-2">
      Agent console <MetalBadge>Pro</MetalBadge>
    </span>
  );
}

"use client";

import type { ReactNode } from "react";
import { METAL_SURFACE } from "@/components/registry/metal-button";
import { cn } from "@/lib/utils";

export interface MetalBadgeProps {
  children: ReactNode;
  className?: string;
}

/** A small "Pro" or "New" pill in the same brushed metal as the button. Still, no animation. */

14 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/metal-badge