npm package Open source
@tryonit/react: Virtual Try-On Components for React
React components and hooks that add a "Try it on" button to any product page, with full theming and a headless API for Next.js, Remix and Vite.
Overview
@tryonit/react is the package most stores use from TryOnIt, the open-source virtual try-on SDK I built. One line, <TryOnButton asset="/tryon/aviator.json" />, adds a button that opens an accessible try-on dialog with the live camera, a product switcher, shade swatches, an intensity slider, a before and after comparison and a capture preview with download and share. It wraps the @tryonit/web engine and needs no provider for the simple case.
I designed it so a store never has to fight the UI. Theme tokens become CSS custom properties with no CSS-in-JS runtime. Every slot accepts a class name, and the stylesheet uses low-specificity selectors so yours win without !important. An unstyled mode removes the visuals but keeps layout and accessibility, slots replace whole sub-components, and headless hooks such as useTryOn and useTryOnState let a team build the interface from scratch. Every string, icon and image is replaceable, including right-to-left layouts.
Per-frame tracking data never passes through React state, so re-renders stay rare, and useTryOnState only re-renders when the slice you select changes. Components are SSR safe and ship with "use client", so Next.js App Router pages import them directly. The package is about 8 KB min+gzip, and its dialog has a focus trap, Escape to close, focus return and screen reader announcements.
Key features
- Drop-in <TryOnButton> that preloads models on hover or when visible
- Accessible dialog: focus trap, Escape, focus return and live status
- Theme tokens, class names per slot, unstyled mode and replaceable slots
- Headless hooks: useTryOn, useTryOnState, useCamera, useAsset, useCapture
- SSR safe for the Next.js App Router, Pages Router and Remix
- Replaceable labels and icons, dark mode and right-to-left layouts
Articles about this project
-
7 min read
How to Create Virtual Try-On Products with JSON Manifests
A practical guide to TryOnIt asset manifests: lipstick shades, makeup looks, face stickers, variants, CORS hosting, CMS or Shopify loading and CI validation.
-
8 min read
Inside TryOnIt: The Architecture of a Client-Side Virtual Try-On SDK
How I structured an open-source virtual try-on SDK as layered TypeScript packages: a DOM-free core, a per-frame fast path, a state machine and renderers.
-
6 min read
Keeping Web AR Fast: Bundle Budgets, Lazy Loading and Adaptive Tracking
The performance techniques behind TryOnIt: size budgets that fail the build, loading only the trackers a product needs, intent preloading, adaptive detection.
-
4 min read
Privacy by Design for Camera Features: On-Device Virtual Try-On
How TryOnIt keeps camera frames on the device, which network requests it makes, how to self-host for zero third-party requests, and the CSP it needs.