Mark

Typography

Highlighted text marker with color variants.

Preview

Search results for "component": Build beautiful component libraries with our component toolkit.

Usage

example.jsx

import { Mark } from "@/components/ui/mark";

export default function Example() {
  return <Mark />;
}

Source Code

Copy this file into components/ui/mark.jsx in your project.

mark.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Mark = forwardRef(({ className, variant = "yellow", ...props }, ref) => (
  <mark ref={ref}
    className={cn("rounded-sm px-1 py-0.5",
      variant === "yellow" && "bg-yellow-200 dark:bg-yellow-800",
      variant === "green" && "bg-green-200 dark:bg-green-800",
      variant === "blue" && "bg-blue-200 dark:bg-blue-800",
      variant === "red" && "bg-red-200 dark:bg-red-800",
      variant === "purple" && "bg-purple-200 dark:bg-purple-800",
      className
    )}
    {...props}
  />
));
Mark.displayName = "Mark";

export { Mark };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge