---
name: "@channel3"
slug: "channel3"
description: "Open-source React components for building shopping experiences on the Channel3 product API: search, filters, product detail, offer comparison, and price history."
category: "Charts/data viz"
tags: ["accessibility", "cards", "charts", "e-commerce", "forms", "hooks", "media"]
framework: "react"
license: "MIT"
author: "channel3-ai"
website: "https://trychannel3.com/developers/ui"
github: "https://github.com/channel3-ai/channel3-ui"
registry: "https://ui.trychannel3.com/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 25
generated_at: "2026-07-28T08:59:05.895Z"
---

# @channel3

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

## Links

- Website: https://trychannel3.com/developers/ui
- GitHub: https://github.com/channel3-ai/channel3-ui
- Registry JSON: https://ui.trychannel3.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/channel3
- This file: https://sh4dcn.vercel.app/md/channel3.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.trychannel3.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.trychannel3.com/r/registry.json
bunx shadcn@latest add https://ui.trychannel3.com/r/registry.json
# clone the source repo
git clone https://github.com/channel3-ai/channel3-ui.git
# fetch the raw registry index
curl -s https://ui.trychannel3.com/r/registry.json
```

## Components (25)

| name | type | description | install |
| --- | --- | --- | --- |
| format | registry:lib | Price, currency, discount, domain, availability, and image helpers for Channel3 product data. | `npx shadcn@latest add https://ui.trychannel3.com/r/format.json` |
| variants | registry:lib | Classifies variant option values into display tiers from `exists` and `available`. | `npx shadcn@latest add https://ui.trychannel3.com/r/variants.json` |
| use-latest-request | registry: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` |
| use-in-viewport | registry: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` |
| use-variant-selection | registry: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 | registry: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` |
| use-product-recommendations | registry: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` |
| use-async-options | registry: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` |
| use-infinite-scroll | registry: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` |
| use-product-search | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | Product image carousel with a synced thumbnail strip. | `npx shadcn@latest add https://ui.trychannel3.com/r/image-gallery.json` |
| variant-selector | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| all | registry: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` |

## For AI agents

```text
You are adding components from @channel3 to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/channel3.md) for the component list.
2. Fetch the machine-readable index: https://ui.trychannel3.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: channel3).
```