Highlight
Marks a run of text inside a sentence, such as a flagged clause or a low-confidence word, and wraps across lines cleanly.
npx prodular-ui add highlightTones
Status tones say what kind of mark it is. ai is only for text a model picked out.
This invoice is 12 days overdue, the card on file was declined twice, and the customer asked for a new contact. Their last payment cleared on October 3 on the Scale plan. Atlas 2 expects payment within a week.
import { Highlight } from "@/components/ui/highlight"
export default function HighlightTones() { return ( <p className="max-w-lg text-sm leading-7 text-foreground"> This invoice is <Highlight tone="warning">12 days overdue</Highlight>, the card on file <Highlight tone="destructive">was declined twice</Highlight>, and the customer <Highlight tone="info">asked for a new contact</Highlight>. Their last payment <Highlight tone="success">cleared on October 3</Highlight> on the{" "} <Highlight tone="brand">Scale plan</Highlight>. Atlas 2 <Highlight tone="ai">expects payment within a week</Highlight>. </p> )}Evidence in a document
One passage marked in source text, with a label for screen readers.
Master agreement, section 9.2
Each party's total liability is limited to the fees paid in the prior twelve months. Flagged by your reviewer: Data protection claims are not subject to this limit, and either party may recover its reasonable legal costs in any such claim, including claims first brought after this agreement ends.
import { Highlight } from "@/components/ui/highlight"
export default function HighlightEvidence() { return ( <div className="w-full max-w-lg"> <p className="m-0 mb-2 text-[13px] text-muted-foreground">Master agreement, section 9.2</p> <p className="m-0 text-sm leading-7 text-foreground"> Each party's total liability is limited to the fees paid in the prior twelve months.{" "} <Highlight label="Flagged by your reviewer">Data protection claims are not subject to this limit</Highlight>, and either party may recover its reasonable legal costs in any such claim, including claims first brought after this agreement ends. </p> </div> )}Anatomy
<p> The fee is <Highlight label="Flagged">not capped</Highlight> in this section.</p>Guidance
Use it when
- Use it to point at a few words inside running text: the clause a reviewer flagged, the passage a citation quotes, a word transcribed with low confidence.
- Use one tone in a passage, so the mark means one thing.
Avoid
- Status of a whole row or record. Use Badge or Status.
- Marking whole paragraphs. If everything is marked, nothing is.
- Showing what changed. Use DiffText, which has added and removed states.
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.
- Render Highlight inline inside text, never as a block.
- Pass label when the mark carries meaning, such as label="Low confidence". Screen readers do not announce the colour.
- Use tone="ai" only for text a model selected or produced. Use warning for something a person should check.
API
Highlight
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "warning" | "info" | "success" | "destructive" | "brand" | "ai" | "warning" | What kind of mark it is. |
| label | string | Why it is marked, read by screen readers before the text. |
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 highlight# or, with the registry in components.jsonnpx shadcn@latest add @prodular/highlight