feat: add a new highlighter component

__registry__/index.tsx

@@ -1506,6 +1506,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:
@@ -4710,6 +4734,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

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

content/docs/components/highlighter.mdx

@@ -0,0 +1,50 @@
+---
+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
+
+| Prop     | Type                    | Default       | Description                |
+| -------- | ----------------------- | ------------- | -------------------------- |
+| `color`  | `String`                | `"pink"`      | The color of the highlight |
+| `action` | "highlight" or "circle" | `"highlight"` | Action of the highlighter  |
+
+## Credits
+
+- Credit to [@pratiyank](https://github.com/Pratiyankkumar) for this component!

package.json

@@ -71,6 +71,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\">\n        This is <Highlighter color=\"#FF9800\"> Magic UI Highlighter</Highlighter>{\" \"}\n        component, designed to make important text stand out effortlessly.\n        Customize colors, actions, and styles to fit your needs.{\" \"}\n        <Highlighter color=\"#FFC107\" action=\"circle\">\n          Try it out now!\n        </Highlighter>\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 { RoughAnnotation } from \"rough-notation/lib/model\";\nimport type React from \"react\";\n\ninterface HighlighterProps {\n  children: React.ReactNode;\n  action?: \"highlight\" | \"circle\";\n  color?: string;\n}\n\nexport default function Highlighter({\n  children,\n  action = \"highlight\",\n  color = \"#ffd1dc\", // Default pink color\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const annotationRef = useRef<RoughAnnotation | null>(null);\n\n  useEffect(() => {\n    if (elementRef.current) {\n      const annotation = annotate(elementRef.current, {\n        type: action === \"circle\" ? \"circle\" : \"highlight\",\n        color: color,\n        multiline: true,\n        padding: action === \"circle\" ? 8 : 2,\n        iterations: 2, // More iterations for a natural effect\n        animationDuration: 500,\n      });\n\n      annotationRef.current = annotation;\n      annotation.show();\n    }\n\n    return () => {\n      annotationRef.current?.remove();\n    };\n  }, [action, color, elementRef.current]); // Added elementRef.current dependency\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 { RoughAnnotation } from \"rough-notation/lib/model\";\nimport type React from \"react\";\n\ninterface HighlighterProps {\n  children: React.ReactNode;\n  action?: \"highlight\" | \"circle\";\n  color?: string;\n}\n\nexport default function Highlighter({\n  children,\n  action = \"highlight\",\n  color = \"#ffd1dc\", // Default pink color\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const annotationRef = useRef<RoughAnnotation | null>(null);\n\n  useEffect(() => {\n    if (elementRef.current) {\n      const annotation = annotate(elementRef.current, {\n        type: action === \"circle\" ? \"circle\" : \"highlight\",\n        color: color,\n        multiline: true,\n        padding: action === \"circle\" ? 8 : 2,\n        iterations: 2, // More iterations for a natural effect\n        animationDuration: 500,\n      });\n\n      annotationRef.current = annotation;\n      annotation.show();\n    }\n\n    return () => {\n      annotationRef.current?.remove();\n    };\n  }, [action, color, elementRef.current]); // Added elementRef.current dependency\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"
+    }
+  ]
+}