AI mark

The sparkle that marks content a model produced, as an icon, a small badge or inline with text, with the model name on hover.

npx prodular-ui add ai-mark

Variants

Icon next to an author name, badge on a row or card, inline at the start of generated text.

icon

AIbadge

AI summaryinline

INV-20931 · Northbeam LogisticsAuto coded

SummaryFreight charges are 12% above the contract rate for the Rotterdam lane. Two line items are billed twice.

import { AiMark } from "@/components/ui/ai-mark"
export default function AiMarkVariants() {  return (    <div className="flex w-full max-w-md flex-col gap-5">      <div className="flex items-center gap-6">        <div className="flex flex-col items-center gap-2">          <AiMark />          <span className="text-xs text-muted-foreground">icon</span>        </div>        <div className="flex flex-col items-center gap-2">          <AiMark variant="badge" />          <span className="text-xs text-muted-foreground">badge</span>        </div>        <div className="flex flex-col items-center gap-2">          <AiMark variant="inline" label="AI summary" />          <span className="text-xs text-muted-foreground">inline</span>        </div>      </div>      <div className="flex flex-col divide-y rounded-xl border bg-card shadow-xs">        <div className="flex items-center gap-3 px-4 py-3">          <span className="min-w-0 flex-1 truncate text-sm font-medium">INV-20931 · Northbeam Logistics</span>          <AiMark variant="badge" label="Auto coded" model="Coded by Claude Haiku 5" />        </div>        <p className="px-4 py-3 text-sm leading-relaxed text-muted-foreground">          <AiMark variant="inline" label="Summary" className="me-1.5" />          Freight charges are 12% above the contract rate for the Rotterdam lane. Two line items          are billed twice.        </p>      </div>    </div>  )}

Animated and with model

Animate only while the model is producing. Pass model so people can see what wrote it.

Drafting the variance commentary

Hover or focus the mark to see the model.

"use client"
import * as React from "react"
import { AiMark } from "@/components/ui/ai-mark"import { Button } from "@/components/ui/button"
export default function AiMarkAnimated() {  const [working, setWorking] = React.useState(true)  return (    <div className="flex flex-col items-center gap-5">      <div className="flex items-center gap-2.5 text-sm">        <AiMark animated={working} model="Generated by Claude Opus 5.5" />        <span className={working ? "shimmer motion-reduce:shimmer-none" : undefined}>          {working ? "Drafting the variance commentary" : "Variance commentary ready"}        </span>      </div>      <Button variant="outline" size="sm" onClick={() => setWorking((w) => !w)}>        {working ? "Finish" : "Run again"}      </Button>      <p className="text-[13px] text-muted-foreground">Hover or focus the mark to see the model.</p>    </div>  )}

Anatomy

<AiMark variant="badge" label="Auto coded" model="Coded by Claude Haiku 5" />

Guidance

Use it when

Wherever generated content sits next to human content: summaries, auto coded fields, drafted replies, suggested values.
Icon in a message header or avatar, badge on table rows and cards, inline at the start of a generated paragraph.

Avoid

Marking buttons that only start a model. Use the ai Button variant for actions.
Several marks on the same block of content. One mark per generated unit.
Decorating marketing copy or empty states with it. It means a model produced this.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Import it as import { AiMark } from "@/components/ui/ai-mark". Do not draw your own sparkle icon or use SparklesIcon to mark generated content.
Mark every piece of model output that is not already inside a Message with from="assistant".
Pass model when the model is known, written as "Generated by <model name>".
Set animated only while the model is still producing, and turn it off when it finishes.
Pick the variant by context: icon next to a name, badge on rows and cards, inline inside text. Keep label short (AI, Summary, Auto coded).

API

AiMark

Prop	Type	Default	Description
variant	"icon" \| "badge" \| "inline"	"icon"	Glyph alone, a small pill with the label, or glyph and label inside text.
label	string	"AI"	Visible in badge and inline. Always the accessible name.
model	string		Tooltip text, for example "Generated by Claude Opus 5.5". Makes the mark focusable.
animated	boolean	false	Moves the gradient while the model is working. Respects reduced motion.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add ai-mark# or, with the registry in components.jsonnpx shadcn@latest add @prodular/ai-mark