ProductSlideOut

When to use

Drill into a style-color from tables or search results. Opened via SlideOutProvider or DataTable product column.

When NOT to use

Full product PDP — build a page. Without inventory data — panel will show skeletons/errors.

Podium primitives composed

• Podium Text
• Podium Button
• Podium Skeleton

Required providers

• SlideOutProvider (app-level)

Props

Auto-generated from src/types/ProductSlideOut.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

ProductSlideOutProps

Prop	Type	Required	Description
accessToken	null | string	Yes	Current access token string
bffUrl	string	No	Explicit BFF base URL (e.g. http://localhost:4000). When provided it overrides prod/test resolution — use this for local dev or custom deploy overrides. Replaces the previous isLocal flag.
isProd	boolean	No	Whether the app is running in production mode. Controls which BFF base URL is used. Ignored when bffUrl is set. Default: false
offsiteEnabled	boolean	No	Whether to show Offsite stock in the stock summary Default: true
onClose	() => void	Yes	Callback fired when the slide-out should close
open	boolean	Yes	Whether the slide-out panel is open
rfidEnabled	boolean	No	Whether to show RFID count in the Insights card Default: true
side	'left' | 'right'	No	Side of the screen where the slide-out panel appears Default: 'right'
sohToShow	SohDisplayMode	No	Which SOH value(s) to display in the Insights card - ‘both’: Show fiscal SOH and physical SOH - ‘physical’: Show physical SOH only - ‘fiscal’: Show fiscal SOH only Default: 'both'
storeId	string	Yes	Store ID (UUID) for the itemInquiry API call
styleColor	string	Yes	Style-color code to fetch product data
width	number	No	Width of the slide-out panel in pixels Default: 480

Examples

Open from slide-out hook

import { useSlideOut, ProductSlideOut } from '@nike/whisker-component-library';

const { openSlideOut } = useSlideOut();

openSlideOut({
  label: 'Product inquiry',
  content: (
    <ProductSlideOut
      styleColor="DX1234-100"
      storeId={storeId}
      accessToken={accessToken}
      isProd={isProd}
    />
  ),
});

Live playground