EntityChip

Renders one linked row as a chip, an inline link or bare text, with a type glyph or thumbnail, its name, an optional remove control and an optional hover card.

Install

Installing this pulls EntityCard with it, for the hover card.

pnpm dlx shadcn@latest add https://sg-widgets.vercel.app/r/react/entity-chip.json

pnpm dlx shadcn-svelte@latest add https://sg-widgets.vercel.app/r/svelte/entity-chip.json

EntityChip: variants, links, hover card, sizes, thumbnails, removal

React

Loading the React demo…

Svelte

Loading the Svelte demo…

Props

prop	type	default	meaning
`entity`	`EntityRef`	required	Type, id and optional name, as an entity field returns it.
`thumbnail`	`string \| null`	`null`	Replaces the type glyph.
`variant`	`'chip' \| 'link' \| 'text'`	`'chip'`	Boxed chip, inline link, or the bare name.
`href`	`string \| ((ref) => string \| null)`	the row's page on the site	Where the chip points.
`siteUrl`	`string`	the context's	The site the row's own page lives on.
`preview`	`string[]`	—	Field paths shown in a hover card. Needs a context.
`context`	`SgContext`	—	The widget context, for the site url and for the hover card's read.
`client`	`SgClient`	—	A client, for an app with no context. One context is built per client and shared.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Heights 5, 6, 8 and 10 for the chip; the type scale for the others.
`removable`	`boolean`	`false`	Shows the remove control.
`removeLabel`	`string`	derived from the name	Accessible name for the remove control.
`class` / `className`	`string`	—	Merged after the widget's own classes.

With no href and a site to work from, the chip addresses the row’s own page, <site>/detail/<Type>/<id>, and opens it in a new tab. A url you pass yourself belongs to your own app and opens in the same tab. The text variant never links.

A preview list turns the chip into a hover card holding an EntityCard at its small size. The card is read when the card opens, through the context’s cache, so hovering the same row twice costs one read.

A chip with no name shows the type and id instead, in the mono treatment ids get elsewhere.

Nine entity types have their own glyph: Shot, Asset, Sequence, Version, Task, HumanUser, Project, Note and PublishedFile. Every other type, including a site’s custom entities, gets a tag.

The root carries the entity type, id and variant as data attributes.

Events

event	payload	when
`onClick`	`MouseEvent`	The content was pressed. It renders as a button. Ignored when a link is set. Svelte spells it `onclick`, as it does every DOM event.
`onRemove`	`EntityRef`	The remove control was pressed.

Slots

None.

Keyboard

key	does
`Tab`	Moves to the link or button, then to the remove control.
`Enter`	Follows the link, or activates the button.
`Space`	Activates the button or the remove control.

An inert chip takes no focus.

API behaviour

The name in an entity hash is the target’s cached display name, and it is filled on every entity type measured, single links and multi links alike, so a chip needs no second call (060_entity_dict_name).

A thumbnail URL is presigned and re-minted on every read, so pass a fresh one rather than a stored string (field_types/image).

The web app addresses a row at /detail/<Type>/<id>. The API hands that path out for one type only, as Project.landing_page_url, site-relative and with the site url left to the caller (entity_types/Project). Every other type takes the same shape by a convention the API does not document. On the test site it answers for every type: the route resolves before authentication decides, redirecting an anonymous visitor to the login page with itself as the return path.

Reference

The hover card is shadcn’s own, installed unmodified: Base UI’s Preview Card (@base-ui/react 1.8.0) in React, Bits UI’s Link Preview (bits-ui 2.19.1) in Svelte.

EntityGlyphs

The glyph a chip shows for a type with no thumbnail. A stock site has 114 entity types and any number of custom ones, so the map covers the types a widget meets constantly — Shot, Asset, Sequence, Version, Task, HumanUser, Project, Note, PublishedFile — and everything else falls back to a tag. It is a plain map from type name to icon: a caller with a custom type adds an entry.