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

PropertyTypeDefaultDescription
highlightColorClassstring"bg-yellow-200"
Background color class for the solid highlight of the text.
markerColorClassstring"bg-yellow-500"
Color class for decorative top and bottom markers around the text.
opacitynumber0.6
Opacity level of the highlight background.
animationDurationnumber0.6
Duration of the highlight and marker animation in seconds.
animationDelaynumber0
Delay before starting the highlight animation in seconds.
animateboolean
Enable or disable animation for highlight and markers.
triggerOnViewboolean
Animate only when the component comes into viewport.
repeatboolean
Allow animation to repeat when the component leaves and re-enters viewport.
paddingstring"0.125rem 0.375rem"
Padding around the text inside the highlight.
classNamestring"optional"
Custom className to style the text content.
childrenReactNoderequired
Text or JSX content to be highlighted.

Built withby Ahdeetai.