Experience System
Components

Object Content

Registry

Key-value pair grid with inverted typography — label de-emphasized, value emphasized.

The Object Content recipe is a responsive key-value grid built on Item from @by/experience-system. Each entry uses inverted typography (label de-emphasized, value emphasized) so the data scans first.

Status
On time
Owner
Logistics team
ETA
May 12, 2026
Carrier
Blue Yonder Freight
Departure
Shanghai
Arrival
Los Angeles

Installation

Run the shadcn CLI with your package manager. It vendors the recipe into components/ui/object-content.tsx and installs the runtime dependencies (@by/experience-system) automatically:

pnpm dlx shadcn@latest add @by-es/object-content

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system. Configure the Registry in your app before adding recipes.

Navigation Menu

A collection of links for site-wide navigation, with optional mega-menu panels per section.

Object Metrics

Inline metric display with a semantic colored dot, emphasized number, and optional unit.

On this page

Installation