Highlighter Demo

PreviousNext

Example showing the demo of a Highlighter

Docs
magicuiexample

Preview

Loading preview…
registry/example/highlighter-demo.tsx
import { Highlighter } from "@/registry/magicui/highlighter"

export default function HighlighterDemo() {
  return (
    <div className="text-center">
      <p className="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

npx shadcn@latest add @magicui/highlighter-demo

Usage

import { HighlighterDemo } from "@/components/highlighter-demo"
<HighlighterDemo />