Text Highlighter

PreviewCode

The Magic UI Highlighter makes important text stand out effortlessly.

@/demos/HighlighterDemo.tsx

import { Highlighter } from '@/registry/magicui/highlighter'

export function HighlighterDemo() {
  return (
    <div class="text-center">
      <p class="leading-relaxed">
        The
        {' '}
        <Highlighter action="underline" color="#FF9800">
          Magic UI Highlighter
        </Highlighter>
        {' '}
        makes important
        {' '}
        <Highlighter action="highlight" color="#87CEFA">
          text stand out
        </Highlighter>
        {' '}
        effortlessly.
      </p>
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/highlighter

bun

bunx shadcn@latest add @magicui-solid/highlighter

yarn

yarn dlx shadcn@latest add @magicui-solid/highlighter

npm

npx shadcn@latest add @magicui-solid/highlighter

Import

import { Highlighter } from '@/components/magicui/highlighter'

Usage

<p>
  The{' '}
  <Highlighter action="underline" color="#FF9800">
    Magic UI Highlighter
  </Highlighter>{' '}
  makes important{' '}
  <Highlighter action="highlight" color="#87CEFA">
    text stand out
  </Highlighter>{' '}
  effortlessly.
</p>

Props

Prop	Type	Default	Description
children	JSX.Element	Required	The content to be highlighted/annotated.
color	string	"#ffd1dc"	The color of the highlight.
action	"highlight" "circle" "box" "bracket" "crossed-off" "strike-through" "underline"	"highlight"	The type of annotation effect to apply.
strokeWidth	number	1.5px	The width of the annotation stroke.
animationDuration	number	600ms	Duration of the animation in milliseconds.
iterations	number	2	Number of times to draw the annotation (adds a sketchy effect when > 1).
padding	number	2px	Padding between the element and the annotation.
multiline	boolean	true	Whether to annotate across multiple lines or treat content as a single line.
isView	boolean	false	Controls whether the animation starts only when the element enters viewport.

Credits

• Credit to @pratiyank for this component!

Original:

magicui.design/docs/components/highlighter