An inline marker that sweeps behind a key phrase once it scrolls into view.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/text-highlight
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { TextHighlight } from "@/components/nextui/text-highlight";23export function Headline() {4return (5<h2 className="text-3xl font-semibold">6Design the small moments 💫 that make people <TextHighlight>come back again</TextHighlight>7</h2>8);9}
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | The phrase to mark |
| delay | number | 300 | Wait before the sweep starts, in ms |
| duration | number | 1400 | Time the sweep takes, in ms |
| className | string | – | Extra class on the marker (override the colour here) |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.