A beautiful implementation of the shadcn/ui logo that features a smooth path-drawing animation when it mounts, and an interactive "erase and redraw" effect on hover.

Preview

shadcn/ui Logo

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/shadcn

Usage

[]txt
import ShadcnLogo from "@/components/evil-buttons/logo/shadcn";

export function LogoDemo() {
  return (
    <ShadcnLogo />
  );
}

Props

The base component doesn't take props by default, but you can easily extend it to accept className and size properties.

Registry

The registry item includes components/evil-buttons/logo/shadcn.tsx.