@channel3

Open-source React components for building shopping experiences on the Channel3 product API: search, filters, product detail, offer comparison, and price history.

25 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.trychannel3.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.trychannel3.com/r/registry.json

bun bunx shadcn@latest add https://ui.trychannel3.com/r/registry.json

fetch registry curl -s https://ui.trychannel3.com/r/registry.json

Components

25 total

Format helpers lib

Price, currency, discount, domain, availability, and image helpers for Channel3 product data.

npx shadcn@latest add https://ui.trychannel3.com/r/format.json

Variant helpers lib

Classifies variant option values into display tiers from `exists` and `available`.

npx shadcn@latest add https://ui.trychannel3.com/r/variants.json

useLatestRequest hook

Latest-wins guard for overlapping async work: tracks the most recent request and drops stale responses from superseded ones.

npx shadcn@latest add https://ui.trychannel3.com/r/use-latest-request.json

useInViewport hook

Fires a callback when an element enters the viewport via IntersectionObserver, with one-shot and repeating modes for lazy sections and infinite-scroll sentinel…

npx shadcn@latest add https://ui.trychannel3.com/r/use-in-viewport.json

useVariantSelection hook

Manages variant selection and server-side re-resolution via an injected resolver, keeping the API key on your server.

npx shadcn@latest add https://ui.trychannel3.com/r/use-variant-selection.json

Search filter helpers lib

UI-friendly search filter state, conversion to the SDK SearchFilters payload, option lists, color presets, and hex helpers.

npx shadcn@latest add https://ui.trychannel3.com/r/search.json

useProductRecommendations hook

Lazily fetches similar products when the section scrolls into view, via an injected fetcher, so it never blocks the PDP.

npx shadcn@latest add https://ui.trychannel3.com/r/use-product-recommendations.json

useAsyncOptions hook

Debounced typeahead loader for brand/category suggestions, delegating to an injected server-side fetcher.

npx shadcn@latest add https://ui.trychannel3.com/r/use-async-options.json

useInfiniteScroll hook

Headless infinite-scroll pagination over a token-paged list: seeds an initial page, appends subsequent pages via an injected fetcher, and exposes a sentinel re…

npx shadcn@latest add https://ui.trychannel3.com/r/use-infinite-scroll.json

useProductSearch hook

Query + filter state, debounced auto-search, and infinite-scroll pagination via an injected search fetcher.

npx shadcn@latest add https://ui.trychannel3.com/r/use-product-search.json

Price Range Gauge component

Plots the current price against its historical range as low/typical/high zones with a tick at the current price.

npx shadcn@latest add https://ui.trychannel3.com/r/price-range-gauge.json

Price History Chart component

Area chart of a product's price over time, built on the shadcn chart wrapper.

npx shadcn@latest add https://ui.trychannel3.com/r/price-history-chart.json

Product Card component

Borderless, image-forward product tile with hover image-swap and color swatches, for grids and carousels. Includes a loading skeleton.

npx shadcn@latest add https://ui.trychannel3.com/r/product-card.json

Offers List component

Compares merchant offers for a product, cheapest first, with affiliate-tracked buy links.

npx shadcn@latest add https://ui.trychannel3.com/r/offers-list.json

Image Gallery component

Product image carousel with a synced thumbnail strip.

npx shadcn@latest add https://ui.trychannel3.com/r/image-gallery.json

Variant Selector component

Renders every variant dimension as pills or swatches with three tiers of emphasis (purchasable, out-of-stock, not-offered).

npx shadcn@latest add https://ui.trychannel3.com/r/variant-selector.json

Product Attributes component

Renders a product's extracted attributes (structured_attributes plus materials, gender, and age) as a two-column definition list.

npx shadcn@latest add https://ui.trychannel3.com/r/product-attributes.json

Product Grid component

Responsive grid of product cards with loading skeletons and an empty state.

npx shadcn@latest add https://ui.trychannel3.com/r/product-grid.json

Product Carousel component

Horizontally scrollable row of product cards with nav controls (e.g. "More like this").

npx shadcn@latest add https://ui.trychannel3.com/r/product-carousel.json

Product Details (PDP) block

Compound product detail page: gallery, header (all brands), variant selection, offers, price history, description, attributes, and an optional 'you might also …

npx shadcn@latest add https://ui.trychannel3.com/r/product-details.json

Product Recommendations component

Lazy "you might also like" carousel for a PDP: defers the findSimilar fetch until it scrolls into view and hides itself when empty.

npx shadcn@latest add https://ui.trychannel3.com/r/product-recommendations.json

Search Bar component

Controlled search input with submit-on-Enter, a clear button, and an optional image-search trigger.

npx shadcn@latest add https://ui.trychannel3.com/r/search-bar.json

Product Filters component

Compound, configurable filter panel (stacked sidebar or horizontal popover bar): price, gender, age, condition, availability, hex color palette with opt-in per…

npx shadcn@latest add https://ui.trychannel3.com/r/product-filters.json

Product Search block

Batteries-included search experience: search bar, configurable filters, and an infinite-scroll results grid wired to useProductSearch.

npx shadcn@latest add https://ui.trychannel3.com/r/product-search.json

Channel3 — everything block

Installs the full Channel3 UI kit: every component, hook, and lib in the registry.

npx shadcn@latest add https://ui.trychannel3.com/r/all.json