Installation

Install

npm install @simplersuite/react

pnpm add @simplersuite/react

yarn add @simplersuite/react

Requirements

• React 18+ (React 19 also supported)
• A SimplerSuite Reviews API key (from your dashboard under Settings)

Quick Start

Wrap your app (or product page) in <SimplerSuiteReviewsProvider>, then drop in any components you need. All components automatically adapt to your shop’s rating type (stars or thumbs).

Optionally import the default stylesheet for polished out-of-the-box styles (uses :where() for zero specificity — your CSS always wins):

import '@simplersuite/react/styles.css';

import {
  SimplerSuiteReviewsProvider,
  ReviewBadge,
  ReviewSummary,
  ReviewList,
  ReviewCarousel,
  ReviewForm,
} from '@simplersuite/react';

function ProductPage({ product }) {
  return (
    <SimplerSuiteReviewsProvider
      apiKey="sr_your_api_key"
      shopDomain="your-store.myshopify.com"
    >
      {/* Compact badge for product listings */}
      <ReviewBadge productId={product.id} />

      <h1>{product.title}</h1>

      {/* Aggregate rating + distribution bars */}
      <ReviewSummary productId={product.id} />

      {/* Carousel or full list — pick one */}
      <ReviewCarousel productId={product.id} visibleCount={3} />
      <ReviewList productId={product.id} perPage={10} />

      {/* Submission form */}
      <ReviewForm productId={product.id} />
    </SimplerSuiteReviewsProvider>
  );
}

Keeping API Keys Server-Side

Your API key should never be exposed in client-side bundles. In Remix or Hydrogen, load it from an environment variable in your server loader and pass it to the component:

// app/routes/products.$handle.tsx (Remix / Hydrogen)
import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
import { useLoaderData } from '@remix-run/react';
import {
  SimplerSuiteReviewsProvider,
  ReviewSummary,
  ReviewList,
} from '@simplersuite/react';

export async function loader({ context }: LoaderFunctionArgs) {
  return json({
    apiKey: context.env.SIMPLER_REVIEWS_API_KEY,
    shopDomain: context.env.PUBLIC_STORE_DOMAIN,
  });
}

export default function Product() {
  const { apiKey, shopDomain } = useLoaderData<typeof loader>();

  return (
    <SimplerSuiteReviewsProvider apiKey={apiKey} shopDomain={shopDomain}>
      <ReviewSummary productId="7654321098" />
      <ReviewList productId="7654321098" />
    </SimplerSuiteReviewsProvider>
  );
}

What’s Included

Component	Description
ReviewSummary	Aggregate rating with distribution bars
ReviewList	Paginated review list with “Load More”
ReviewCarousel	Horizontal carousel with arrows, dots, swipe, keyboard nav
ReviewBadge	Compact inline rating badge for product listings
ReviewForm	Review submission form (stars or thumbs)
ReviewFilters	Sort and rating filter controls
ReviewPhotos	Photo grid with lightbox
ReviewStars	Pure star display (no data fetching)
ReviewThumbs	Pure thumbs up/down display with full customization
ReviewRating	Auto-selects stars or thumbs based on rating type

See Components for full prop tables and styling guides, and Hooks for building fully custom UIs.