@studio-vaai/react-components

Prebuilt, styled React UI for the studio vaai virtual try-on flow — drop it in and get a complete try-on experience.

It builds on @studio-vaai/react-headless and ships vendored CSS (Tailwind with an sv- prefix, no preflight), so you don't need to run a Tailwind pipeline of your own.

Install

npm install @studio-vaai/react-components @studio-vaai/react-headless

Import the stylesheet once (SSR-safe):

import "@studio-vaai/react-components/studio-vaai-components.css";

Quick start

Wrap your tree with StudioVaaiProvider, then render StudioVaaiDefaultFlow:

"use client";

import { StudioVaaiProvider, type StudioVaaiClient } from "@studio-vaai/react-headless";
import { StudioVaaiDefaultFlow } from "@studio-vaai/react-components";

export function TryOn({ client }: { client: StudioVaaiClient }) {
  return (
    <StudioVaaiProvider client={client} input={{ productId, selection }}>
      <StudioVaaiDefaultFlow />
    </StudioVaaiProvider>
  );
}

In the Next.js App Router, put "use client" on the file that uses the hooks/components. Components that call hooks or use browser APIs are marked "use client"; purely presentational primitives are not, so they can render in a Server Component.

Subpath entrypoints

| Import | Contents | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | | @studio-vaai/react-components | The full flow and styled components. | | @studio-vaai/react-components/primitives | Unstyled layout building blocks (ActionsSection, ImageView, VStack, …) — no Base UI, no bundled styles. | | @studio-vaai/react-components/ui | Styled UI elements. |

Types and the client come from @studio-vaai/react-headless — a single import surface for your app code.

Errors

Prefer ApiResult checks at the HTTP layer; flows may throw ApiFailureError. Using a component or hook outside StudioVaaiProvider throws StudioVaaiProviderError.

License

MIT