These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.
Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.
For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.
Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.
Direct imports in this wrapper:
./avatar.stylex
@radix-ui/react-avatar
@stylexjs/stylex
react
A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.
Adoption contract
Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
Use Thorbis color, type, space, radius, shadow, and motion tokens only.
Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.
Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.
Keep operational text steady and unambiguous
Changing digits, shifting labels, and brittle wrapping make money and status harder to inspect.
Evaluate numeric alignment where amounts are compared, stable action labels during requests, and wrapping with real content. Treat optical adjustments as controlled system decisions. Keep the existing font families and semantic type roles.
Thorbis example. An invoice comparison aligns changing amounts without hiding their currency or precision. A long property name wraps without displacing the next action. Save remains the action; the adjacent status explains what happened.
Verify. Try zero, negative and large amounts, long names, missing values, fallback fonts, text expansion, and browser zoom. Compare readability at actual size rather than approving a magnified specimen alone.
Do not import. No blanket balanced wrapping on data rows, copied display face, custom page-local type scale, or status copy that claims more than the system knows.
A borrowed visual trick can weaken contrast or make a state readable only by its color.
Keep semantic roles and Thorbis tokens in charge. Inspect state words, marks, and control edges together in both themes. External suggestions for shadows, smoothing, and image outlines are evidence to evaluate, not a new palette.
Thorbis example. A failed invoice action has an understandable error and a recovery action; it is not merely a red icon. A rounded input retains the real rim required by D-017 rather than losing its boundary on a similar-toned surface.
Verify. Review focus, selected, disabled, pending, and error states in light, dark, and forced-colors conditions. Check contrast and meaning separately from whether the screenshot feels subtle.
Do not import. No second accent, literal source colors, missing control rim, or ornamental gradient and blur imported from a reference.
