# Marker

- Page: <https://kznlabs.github.io/labsUI/components/marker>

## Marker (`marker`, component)

Highlighter-pen <mark> in four tints that wraps cleanly across lines and can draw itself on, left to right, when it scrolls into view. Highlight marks every match of a search in a string, for transcripts and search results.

- Install: `npx @kznlabs/labsui add marker`
- Docs: <https://kznlabs.github.io/labsUI/components/marker>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Marker>`: Highlighter-pen <mark>. Wraps across lines cleanly; `draw` sweeps it on in view (instant
with reduced motion, fully shown without JS).
  - `color?: "primary" | "yellow" | "green" | "red"` = `"yellow"`: Highlighter color.
  - `delay?: number` = `0`: Seconds before drawing; stagger several markers in one paragraph.
  - `draw?: boolean` = `false`: Draws the highlight on, left to right, the first time it scrolls into view.
- `<Highlight>`: Marks every case-insensitive match of `query` (one term or several) inside `text`.
  - `query: string | string[]`: Term or terms to mark.
  - `text: string`: Full text to search in.
  - `color?: "primary" | "yellow" | "green" | "red"`: Highlighter color.

### Usage

```tsx
<p>Ship it <Marker draw color="green">today</Marker>.</p> · <Highlight text={line.text} query={search} />
```

### Example: transcript-line.tsx

```tsx
import { Highlight, Marker } from "@/components/ui/marker";

export function Pitch() {
  return (
    <p>
      Clips that are <Marker draw>short</Marker> get shared{" "}
      <Marker draw delay={0.3} color="green">
        three times more
      </Marker>
      .
    </p>
  );
}

// Search hits in a transcript line; query can be one term or several.
export function TranscriptLine({ text, query }: { text: string; query: string }) {
  return <Highlight text={text} query={query} />;
}
```