LDRS Ring

A minimal SVG ring loader with a dashed arc sweep — the kind of spinner LDRS popularised, without pulling in the full library.

loaderspinnersvgcss

Loading…

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { LdrsRing } from "@/registry/components/ldrs-ring";

export function Example() {
  return <LdrsRing />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Avatar Stack

Overlapping avatars with an overflow counter and a lift on hover. Falls back to initials when no image is supplied.

Glow Button

A pill button with a sweeping specular highlight and a soft brand-coloured bloom behind it. Both effects are hidden under reduced motion.

Copy Button

One-click clipboard copy with a checkmark confirmation. Uses the Clipboard API and resets after 1.6 seconds.