Inline Chip

Install

pnpm dlx shadcn@latest add @vegastack/inline-chip

Usage

import { InlineChip, InlineChipProvider } from "@/components/ui/inline-chip";

<InlineChipProvider
  value={{
    href: (kind, id) => routes[kind]?.(id) ?? null,
    person: (id) => members.get(id),
    onOpen: (target) =>
      target.kind === "file" ? openViewer(target.href) : false,
  }}
>
  <InlineChip kind="task" targetId="T-42" label="Ship the checklist" />
</InlineChipProvider>;

Every @ mention and file link in the system renders as this chip — in TextEdit's editor, in MarkdownView and in Comments — so one InlineChipProvider near the app root tells all of them where a chip links, who a person is, what a hover card previews and what a click opens. A chip's own props win over the provider.

Scope

• Owns: the chip's look (icon, tint and baseline alignment), its link or button semantics, ⌘-click, and the hover card (a person's avatar, name and email, or the host's preview).
• Does not own: resolving ids, routing, or the file viewer — the host passes href, person, preview and onOpen, directly or through InlineChipProvider.
• Compose with: MarkdownView and TextEdit (both render mentions and file links as this chip), FileViewer (open a file chip in it from onOpen).

Anatomy

Examples

Headings, lists and wrapping

The chip is an inline box, not an inline-flex one: its label is ordinary text on the line's baseline, its icon a 1em glyph, so it takes the size of a heading or a list item and wraps with its line, the tint continuing on each line.

Photo and restricted

A person with a known photo shows it in place of the person icon. An id starting with restricted: (or restricted) is a target the reader may not open: muted, never a link.

In Markdown

[@label](mention://kind/id) and a link under fileLinkPrefix both render as this chip.

Kinds

API Reference

Accessibility

• A chip with an href is a link; one that only opens (onOpen) is a button (role="button", Enter / Space). A person chip is a tab stop so its hover card opens on focus as well as hover. The icon is hidden from assistive technology — the label names the chip.
• ⌘/Ctrl-click (and middle-click) on a linked chip opens it in a new tab. Inside an editor (openOn="modifier") a plain click places the caret and only ⌘/Ctrl-click opens.
• The hit area reaches 24px tall without changing the line's height.

Do / Don't