# Marker: Activity

> Render markers as list items for an activity log. Links inside are underlined until hovered.

Example: https://hextaui.com/docs/marker/examples/events
Component docs: https://hextaui.com/docs/marker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/marker-events.json
```

This adds `components/examples/marker/events.tsx` with the Marker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/marker/events.tsx"
import {
  IconGitMerge,
  IconLock,
  IconPencil,
  IconTag,
} from "@tabler/icons-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

export function MarkerEvents() {
  return (
    <ol className="flex w-full max-w-md flex-col gap-3">
      <Marker render={<li />}>
        <MarkerIcon>
          <IconTag />
        </MarkerIcon>
        <MarkerContent>
          Jun added the <a href="#">design</a> label
        </MarkerContent>
      </Marker>
      <Marker render={<li />}>
        <MarkerIcon>
          <IconPencil />
        </MarkerIcon>
        <MarkerContent>Mira renamed the pull request</MarkerContent>
      </Marker>
      <Marker render={<li />}>
        <MarkerIcon>
          <IconGitMerge className="text-success" />
        </MarkerIcon>
        <MarkerContent>Sol merged into main</MarkerContent>
      </Marker>
      <Marker render={<li />}>
        <MarkerIcon>
          <IconLock />
        </MarkerIcon>
        <MarkerContent>Conversation locked</MarkerContent>
      </Marker>
    </ol>
  )
}
```

## Props in this example

### Marker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Marker examples

- [Variants](https://hextaui.com/docs/marker/examples/variants.md)
- [Sticky dates](https://hextaui.com/docs/marker/examples/sticky.md)
- [Relative dates](https://hextaui.com/docs/marker/examples/time.md)
- [Long content](https://hextaui.com/docs/marker/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/marker/examples/rtl.md)