Usage

Use on nav links and secondary CTAs. Plain strings get a cascading letter swap; other nodes fall back to a whole-line roll. Put group on the wrapping link so sibling icons trigger the roll. Pass interactive when the roll itself is the control. Reduced motion stays static.

tsx

import { LabelRoll } from "@/components/ui/label-roll"

<LabelRoll secondary="Install">Get started</LabelRoll>

Primitive · CLI

Label Roll

Letter-staggered label swap on hover and focus — CSS only, easeOutExpo.

Preview

npx shadcn@latest add @atroui/label-roll

Hover — letters cascade out; the next label rises in.

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/label-roll

Source lands in your repo. Installation · Registry

Usage

tsx

import { LabelRoll } from "@/components/ui/label-roll"

<LabelRoll secondary="Install">Get started</LabelRoll>

import { LabelRoll } from "@/components/ui/label-roll"

<LabelRoll secondary="Install">Get started</LabelRoll>