ComponentsText effects
Word Chip
A phrase whose last word sits in a chip and keeps changing, while the text around it slides to make room.
"use client";
import { WordChip } from "@/components/miyuki-ui/word-chip";
export default function WordChipDemo() {
return (
<h2 className="text-center font-display text-[34px] leading-[1.3] font-semibold tracking-[-0.015em] text-foreground sm:text-5xl sm:leading-[1.25]">
<WordChip text="Forecasts for" words={["skiers", "anglers", "farmers", "bus drivers"]} />
</h2>
);
}Install
npx shadcn@latest add @miyuki-ui/word-chipThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
WordChip
Prop
Type