Fancy Components

Fancy Components is Daniel Petho's open source collection of expressive React, Tailwind CSS, Motion, SVG, pointer, and physics effects. This catalog follows the 44 distinct components from the 45 registry:ui entries at commit f9f62c61207b2dd3210476dd98af3c9a5be24094. Every listing installs from its canonical https://fancycomponents.dev/r/{name}.json reference. Catalogs does not copy the upstream implementation.

The source registry also publishes 99 registry:block demonstration payloads, 11 hooks, and three library utilities. They support or demonstrate the public components and are intentionally not additional listings. Intentional component families remain separate where upstream exposes separate installable items: forward and ping-pong letter swaps, forward and ping-pong randomized swaps, and the three underline directions.

The legacy simple-carousel payload also exports SimpleMarquee with the same public props. Its only substantive difference is an internal scroll-container reference, and it has no separate source/demo contract. It is excluded as a redundant listing; use Simple Marquee.

Before installing

Use React, TypeScript, Tailwind CSS, and an initialized shadcn-style project.
Provide @/lib/utils with a cn helper. Thirty-one components import it, but Fancy does not publish the helper as a registry item.
Install the dependencies declared by the selected item. The collection uses Motion broadly; individual entries can also require uuid, lodash, matter-js, svg-path-commander, poly-decomp, @types/matter-js, and clsx.
Keep interactive components behind a client boundary in a React Server Components application. No collection-wide provider is required.

Animated Gradient with SVG and Circling Elements carry their required CSS variables in the registry payload. Other components rely on local Tailwind classes rather than a global collection stylesheet. Variable-font components need a consumer-supplied variable font with axes that match the configured animation. Image, video, SVG-path, and carousel examples also need consumer-owned assets.

Pixel Trail and Gooey SVG Filter have limited Safari behavior. Pixelate SVG Filter is explicitly unsupported in Safari at the recorded revision. Gravity and Cursor Attractor and Gravity need a sized container and should be tested for CPU cost, resizing, pointer behavior, and cleanup.

Element Along SVG Path remains available through its public registry payload, although upstream omits it from the documentation navigation. Supply a valid SVG path and sized children when using it. The excluded legacy Simple Carousel payload is represented by Simple Marquee, as described above.