Skip to content

Fancy Components

Fancy Components supplies React effects such as animated labels. Add the visual effect to a control that already works and keep the original action easy to use.

Visit Fancy Components

Which part of a button can Fancy Components change?

Letter Swap changes how the letters move. Keep the button’s meaning and action in a real button and let Letter Swap handle the label’s appearance.

The inspected example uses a span, a piece of text inside a page, with hover and optional click handlers. Its animated letters are hidden from screen readers and it supplies a separate readable label. Put the effect inside a native button with one accessible name. Let that button handle activation.

How can you tell whether the effect helps?

Use the same short label on a plain button and on the animated version. Check whether the word stays easy to recognize while the effect runs or when someone never moves a mouse over it.

  1. Pick an action with no side effects
    Use a disposable screen with a button labelled Show details. Have it reveal a sample paragraph.
  2. Keep the button in charge
    Add the visual effect only inside the label. In the working copy, Tab to the button and use Enter or Space to reveal the same paragraph. Check the label announces once.
  3. Try it without hover
    Try touch and your device’s reduced-motion setting. Keep a plain label if the words are hard to read or the effect cannot be reduced without changing the action.

What does the example need in your app?

Start with the project setup in the item’s instructions. The collection uses React, TypeScript and Tailwind styles. The Letter Swap registry item also needs Motion.

You can copy source by hand or use the documented shadcn-compatible registry, a collection an add command can fetch from. Compare the files and packages the selected effect needs with what your app already has. Keep the change local to the screen where you need it.

Can you keep your changes to the effect?

Yes. You can edit a copied source file in your project. The Fancy Components repository uses MIT. Include the copyright and license notices when you copy the covered code.

When you want an upstream fix, compare the new source with your changed version. Review any package update separately and recheck that the button is still usable with plain text.