Text Modifier

text highlighter with solid background and decorative markers for emphasis.

You can ask an AI assistant to "Build a landing page using components from the ScrollX UI registry" or "Find me a login form from the ScrollX UI registry".

Installation

npx shadcn@latest add https://scrollxui.dev/registry/text-modifier.json

Usage

import TextModifier from "@/components/ui/text-modifier";

<TextModifier
  variant="solid"
  highlightColorClass="bg-yellow-200"
  markerColorClass="bg-yellow-500"
  className="text-black dark:text-black"
>
  You can ask an AI assistant.
</TextModifier>

API Reference

Text Modifier

text highlighter with solid background and decorative markers for emphasis.

Props

Property	Type	Default	Description
`highlightColorClass`	string	`"bg-yellow-200"`	Background color class for the solid highlight of the text.
`markerColorClass`	string	`"bg-yellow-500"`	Color class for decorative top and bottom markers around the text.
`opacity`	number	`0.6`	Opacity level of the highlight background.
`animationDuration`	number	`0.6`	Duration of the highlight and marker animation in seconds.
`animationDelay`	number	`0`	Delay before starting the highlight animation in seconds.
`animate`	boolean		Enable or disable animation for highlight and markers.
`triggerOnView`	boolean		Animate only when the component comes into viewport.
`repeat`	boolean		Allow animation to repeat when the component leaves and re-enters viewport.
`padding`	string	`"0.125rem 0.375rem"`	Padding around the text inside the highlight.
`className`	string	`"optional"`	Custom className to style the text content.
`children`	ReactNode	`required`	Text or JSX content to be highlighted.