feat: add a new highlighter component

__registry__/index.tsx

@@ -1530,6 +1530,30 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  highlighter: {
+    name: "highlighter",
+    description:
+      "A text highlighter that mimics the effect of a human-drawn marker stroke.",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [
+      {
+        path: "registry/magicui/highlighter.tsx",
+        type: "registry:ui",
+        target: "components/magicui/highlighter.tsx",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/magicui/highlighter.tsx");
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object",
+        ) || item.name;
+      return { default: mod.default || mod[exportName] };
+    }),
+    meta: undefined,
+  },
   "magic-card-demo": {
     name: "magic-card-demo",
     description:
@@ -4325,6 +4349,34 @@ export const Index: Record<string, any> = {
     }),
     meta: undefined,
   },
+  "highlighter-demo": {
+    name: "highlighter-demo",
+    description: "Example showing the demo of a Highlighter",
+    type: "registry:example",
+    registryDependencies: ["https://magicui.design/r/highlighter"],
+    files: [
+      {
+        path: "registry/example/highlighter-demo.tsx",
+        type: "registry:example",
+        target: "components/highlighter-demo.tsx",
+      },
+      {
+        path: "registry/magicui/highlighter.tsx",
+        type: "registry:ui",
+        target: "components/magicui/highlighter.tsx",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/example/highlighter-demo.tsx");
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object",
+        ) || item.name;
+      return { default: mod.default || mod[exportName] };
+    }),
+    meta: undefined,
+  },
   utils: {
     name: "utils",
     description: "",

config/docs.ts

@@ -315,6 +315,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Highlighter",
+          href: "/docs/components/highlighter",
+          items: [],
+          label: "New",
+        },
       ],
     },
     {

content/docs/components/highlighter.mdx

@@ -0,0 +1,58 @@
+---
+title: Highlighter
+date: 2025-02-11
+description: A text highlighter that mimics the effect of a human-drawn marker stroke.
+author: pratiyank
+published: true
+---
+
+<ComponentPreview name="highlighter-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/highlighter"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="highlighter" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+Here's the updated props table with units specified for the numerical values:
+
+| Prop                | Type                                                                                                | Default       | Description                                                                  |
+| ------------------- | --------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------- |
+| `children`          | `React.ReactNode`                                                                                   | 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`                                                                                            | `500ms`       | 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. |
+
+## Credits
+
+- Credit to [@pratiyank](https://github.com/Pratiyankkumar) for this component!

package.json

@@ -73,6 +73,7 @@
     "react-dom": "18.3.1",
     "react-hook-form": "^7.50.1",
     "react-tweet": "^3.2.1",
+    "rough-notation": "^0.5.1",
     "schema-dts": "^1.1.2",
     "shadcn": "2.3.0",
     "sonner": "^1.5.0",

public/r/highlighter-demo.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "highlighter-demo",
+  "type": "registry:example",
+  "title": "Highlighter Demo",
+  "description": "Example showing the demo of a Highlighter",
+  "dependencies": [
+    "rough-notation"
+  ],
+  "registryDependencies": [
+    "https://magicui.design/r/highlighter"
+  ],
+  "files": [
+    {
+      "path": "registry/example/highlighter-demo.tsx",
+      "content": "import Highlighter from \"@/components/magicui/highlighter\";\n\nexport default function HighlighterDemo() {\n  return (\n    <div className=\"relative justify-center\">\n      <p className=\"w-full text-center leading-loose\">\n        The{\" \"}\n        <Highlighter color=\"#FF9800\" action=\"underline\">\n          Magic UI Highlighter\n        </Highlighter>{\" \"}\n        makes important{\" \"}\n        <Highlighter color=\"#87CEFA\" action=\"highlight\">\n          text stand out\n        </Highlighter>{\" \"}\n        effortlessly.{\" \"}\n        <Highlighter color=\"#E91E63\" action=\"box\">\n          Customize colors\n        </Highlighter>{\" \"}\n        and styles to fit your needs. It offers flexible highlighting for better\n        readability. Try it now and enhance{\" \"}\n        <Highlighter color=\"#9C27B0\" action=\"circle\">\n          {\" \"}\n          your content\n        </Highlighter>{\" \"}\n        with ease!\n      </p>\n    </div>\n  );\n}\n",
+      "type": "registry:example",
+      "target": "components/highlighter-demo.tsx"
+    },
+    {
+      "path": "registry/magicui/highlighter.tsx",
+      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { annotate } from \"rough-notation\";\nimport type React from \"react\";\n\n// Define available annotation actions\ntype AnnotationAction =\n  | \"highlight\"\n  | \"underline\"\n  | \"box\"\n  | \"circle\"\n  | \"strike-through\"\n  | \"crossed-off\"\n  | \"bracket\";\n\n// Custom TypeScript interface for supported props\ninterface HighlighterProps {\n  children: React.ReactNode;\n  action?: AnnotationAction;\n  color?: string;\n  strokeWidth?: number;\n  animationDuration?: number;\n  iterations?: number;\n  padding?: number;\n  multiline?: boolean;\n}\n\nexport default function Highlighter({\n  children,\n  action = \"highlight\",\n  color = \"#ffd1dc\", // Default pink color\n  strokeWidth = 1.5,\n  animationDuration = 600,\n  iterations = 2,\n  padding = 2,\n  multiline = true,\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (element) {\n      const annotation = annotate(element, {\n        type: action,\n        color,\n        strokeWidth,\n        animationDuration,\n        iterations,\n        padding,\n        multiline,\n      });\n\n      annotation.show();\n\n      // Store the current element in closure for cleanup\n      return () => {\n        if (element) {\n          annotate(element, { type: action }).remove();\n        }\n      };\n    }\n  }, [\n    action,\n    color,\n    strokeWidth,\n    animationDuration,\n    iterations,\n    padding,\n    multiline,\n  ]);\n\n  return (\n    <span ref={elementRef} className=\"relative inline-block bg-transparent\">\n      {children}\n    </span>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/magicui/highlighter.tsx"
+    }
+  ]
+}

public/r/highlighter.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "highlighter",
+  "type": "registry:ui",
+  "title": "Highlighter",
+  "description": "A text highlighter that mimics the effect of a human-drawn marker stroke.",
+  "dependencies": [
+    "rough-notation"
+  ],
+  "files": [
+    {
+      "path": "registry/magicui/highlighter.tsx",
+      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { annotate } from \"rough-notation\";\nimport type React from \"react\";\n\n// Define available annotation actions\ntype AnnotationAction =\n  | \"highlight\"\n  | \"underline\"\n  | \"box\"\n  | \"circle\"\n  | \"strike-through\"\n  | \"crossed-off\"\n  | \"bracket\";\n\n// Custom TypeScript interface for supported props\ninterface HighlighterProps {\n  children: React.ReactNode;\n  action?: AnnotationAction;\n  color?: string;\n  strokeWidth?: number;\n  animationDuration?: number;\n  iterations?: number;\n  padding?: number;\n  multiline?: boolean;\n}\n\nexport default function Highlighter({\n  children,\n  action = \"highlight\",\n  color = \"#ffd1dc\", // Default pink color\n  strokeWidth = 1.5,\n  animationDuration = 600,\n  iterations = 2,\n  padding = 2,\n  multiline = true,\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (element) {\n      const annotation = annotate(element, {\n        type: action,\n        color,\n        strokeWidth,\n        animationDuration,\n        iterations,\n        padding,\n        multiline,\n      });\n\n      annotation.show();\n\n      // Store the current element in closure for cleanup\n      return () => {\n        if (element) {\n          annotate(element, { type: action }).remove();\n        }\n      };\n    }\n  }, [\n    action,\n    color,\n    strokeWidth,\n    animationDuration,\n    iterations,\n    padding,\n    multiline,\n  ]);\n\n  return (\n    <span ref={elementRef} className=\"relative inline-block bg-transparent\">\n      {children}\n    </span>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/magicui/highlighter.tsx"
+    }
+  ]
+}

registry.json

@@ -89,6 +89,9 @@
       "type": "registry:ui",
       "title": "Aurora Text",
       "description": "A beautiful aurora text effect",
+      "dependencies": [
+        "motion"
+      ],
       "files": [
         {
           "path": "registry/magicui/aurora-text.tsx",
@@ -1289,6 +1292,22 @@
         }
       ]
     },
+    {
+      "name": "highlighter",
+      "type": "registry:ui",
+      "title": "Highlighter",
+      "description": "A text highlighter that mimics the effect of a human-drawn marker stroke.",
+      "dependencies": [
+        "rough-notation"
+      ],
+      "files": [
+        {
+          "path": "registry/magicui/highlighter.tsx",
+          "type": "registry:ui",
+          "target": "components/magicui/highlighter.tsx"
+        }
+      ]
+    },
     {
       "name": "magic-card-demo",
       "type": "registry:example",
@@ -3225,6 +3244,30 @@
         }
       ]
     },
+    {
+      "name": "highlighter-demo",
+      "type": "registry:example",
+      "title": "Highlighter Demo",
+      "description": "Example showing the demo of a Highlighter",
+      "dependencies": [
+        "rough-notation"
+      ],
+      "registryDependencies": [
+        "https://magicui.design/r/highlighter"
+      ],
+      "files": [
+        {
+          "path": "registry/example/highlighter-demo.tsx",
+          "type": "registry:example",
+          "target": "components/highlighter-demo.tsx"
+        },
+        {
+          "path": "registry/magicui/highlighter.tsx",
+          "type": "registry:ui",
+          "target": "components/magicui/highlighter.tsx"
+        }
+      ]
+    },
     {
       "name": "utils",
       "type": "registry:lib",

registry/example/highlighter-demo.tsx

@@ -0,0 +1,29 @@
+import Highlighter from "@/registry/magicui/highlighter";
+
+export default function HighlighterDemo() {
+  return (
+    <div className="relative justify-center">
+      <p className="w-full text-center leading-loose">
+        The{" "}
+        <Highlighter color="#FF9800" action="underline">
+          Magic UI Highlighter
+        </Highlighter>{" "}
+        makes important{" "}
+        <Highlighter color="#87CEFA" action="highlight">
+          text stand out
+        </Highlighter>{" "}
+        effortlessly.{" "}
+        <Highlighter color="#E91E63" action="box">
+          Customize colors
+        </Highlighter>{" "}
+        and styles to fit your needs. It offers flexible highlighting for better
+        readability. Try it now and enhance{" "}
+        <Highlighter color="#9C27B0" action="circle">
+          {" "}
+          your content
+        </Highlighter>{" "}
+        with ease!
+      </p>
+    </div>
+  );
+}

registry/magicui/highlighter.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { annotate } from "rough-notation";
+import type React from "react";
+
+// Define available annotation actions
+type AnnotationAction =
+  | "highlight"
+  | "underline"
+  | "box"
+  | "circle"
+  | "strike-through"
+  | "crossed-off"
+  | "bracket";
+
+// Custom TypeScript interface for supported props
+interface HighlighterProps {
+  children: React.ReactNode;
+  action?: AnnotationAction;
+  color?: string;
+  strokeWidth?: number;
+  animationDuration?: number;
+  iterations?: number;
+  padding?: number;
+  multiline?: boolean;
+}
+
+export default function Highlighter({
+  children,
+  action = "highlight",
+  color = "#ffd1dc", // Default pink color
+  strokeWidth = 1.5,
+  animationDuration = 600,
+  iterations = 2,
+  padding = 2,
+  multiline = true,
+}: HighlighterProps) {
+  const elementRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (element) {
+      const annotation = annotate(element, {
+        type: action,
+        color,
+        strokeWidth,
+        animationDuration,
+        iterations,
+        padding,
+        multiline,
+      });
+
+      annotation.show();
+
+      // Store the current element in closure for cleanup
+      return () => {
+        if (element) {
+          annotate(element, { type: action }).remove();
+        }
+      };
+    }
+  }, [
+    action,
+    color,
+    strokeWidth,
+    animationDuration,
+    iterations,
+    padding,
+    multiline,
+  ]);
+
+  return (
+    <span ref={elementRef} className="relative inline-block bg-transparent">
+      {children}
+    </span>
+  );
+}