Tally UI

ProductTitle

Displays a product's name using the active connector's traits

Import

import { ProductTitle } from '@tallyui/components';

Usage

<ProductTitle doc={productDocument} className="text-lg font-bold" />

The same component reads doc.name for WooCommerce and doc.title for Medusa — the trait layer handles the mapping.

Props

PropTypeDefaultDescription
docanyrequiredRxDB product document
classNamestringOverride default styles

Plus all TextProps from the UI Text component (includes variant and asChild).

Default classes: font-semibold (inherits text-base text-foreground from the UI Text primitive)

Trait mapping

ConnectorField read
WooCommercedoc.name
Medusadoc.title
Shopifydoc.title
Venduredoc.name

Live demo

On this page