Channel3 UI

Overview

Channel3 UI is an MIT-licensed set of React components for building shopping experiences on the Channel3 product API. It ships as a shadcn registry, so the source is copied into the project and every component is typed directly against @channel3/sdk, letting a Product from search or a product fetch drop in without adapters.

The kit centers on two blocks. product-search combines a search bar, faceted filters and an infinite-scroll grid, while product-details is a full product page with gallery, variant selection, merchant offer comparison and price history. Each piece is also available on its own, and Channel3 publishes an agent skill for prompting a coding agent to assemble a shopping app from these parts.

Features

• Product search block: Search bar, filters for price, gender, age, condition, availability, color, brand and category, plus an infinite-scroll results grid.
• Product detail block: Image gallery, variant selector with server-side re-resolution, offers list, attributes and a lazy recommendations carousel.
• Price intelligence: A price-range gauge and price history chart show where today's price sits against its history.
• Product cards: Image-forward tiles with hover image swap, colorway swatches, real links and hover preloading.
• Headless hooks: use-product-search, use-infinite-scroll, use-variant-selection, use-product-recommendations and use-async-options handle data and state without markup.
• One-command install: npx shadcn@latest add https://ui.trychannel3.com/r/all.json adds the full kit and resolves its dependencies.

Tech stack

• React, shadcn/ui, Tailwind CSS v4
• @channel3/sdk
• lucide-react, Recharts

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @channel3/component-name