Augur

augur-web

Next.js UI for Augur sites: Radix primitives, ecommerce components, AugurSiteProvider and GTM analytics, one entry point per component.

@simpleapps-com/augur-web

UI components and site plumbing for Augur sites on Next.js: shadcn-style Radix primitives, ecommerce components, the AugurSiteProvider and Google Tag Manager analytics.

pnpm add @simpleapps-com/augur-web

Peer dependencies: react and react-dom 19, tailwindcss 4, class-variance-authority, cmdk, react-icons, @tanstack/react-table (for data-table), and the @radix-ui/react-* primitive behind each component you import. Every export, with its description: API Reference.

One entry point per component

There is no barrel: import each component from its own path, and only what you import is bundled.

import { Button } from "@simpleapps-com/augur-web/button";
import { createPrice } from "@simpleapps-com/augur-web/price";
import { AugurSiteProvider } from "@simpleapps-com/augur-web/provider";
Kind Entry points
Primitives accordion, breadcrumb, button, card, checkbox, command, dialog, dropdown-menu, input, label, navigation-menu, pagination, popover, radio-group, select, separator, skeleton, spinner, table, tabs, textarea
Forms form-field, form-input, form-select, form-textarea
Ecommerce price, price-format, quantity-input, add-to-cart-button, stock-label, payment-modal, financing-widget
Records and lists data-table, detail-panel, resource-tabs, confirm-dialog, list-view, breadcrumbs
Site provider, gtm, session-replay, mdx-components

A component's "use client" directive is kept in the build. Components use cn() from augur-utils for classes, CVA for variants (buttonVariants, navigationMenuTriggerStyle) and react-icons/lu for icons.

If Tailwind doesn't generate augur-web's classes, add its build to your sources:

@source "../node_modules/@simpleapps-com/augur-web/dist";

AugurSiteProvider

Wraps augur-hooks' AugurHooksProvider, passing config as its site, and adds AnalyticsProvider when config.analytics is set (gtmId, consentRequired, strategy, debug):

import { AugurSiteProvider } from "@simpleapps-com/augur-web/provider";

<AugurSiteProvider config={siteConfig} api={api} auth={authContext} cache={cacheConfig}>
  {children}
</AugurSiteProvider>;

config comes from augur-core's defineSite(). auth is any AugurAuthContext, so map it from your auth library (NextAuth's useSession, Clerk, …).

Ecommerce components

Price

createPrice(config) makes a site's Price component and a matching formatPrice, once:

// lib/price.ts
import { createPrice } from "@simpleapps-com/augur-web/price";

export const { Price, formatPrice } = createPrice({ currency: "USD", locale: "en-US", zeroLabel: "Call for Price" });
<Price value={item.unitPrice} uom={item.unitOfMeasure} />
<Price value={item.unitPrice} quantity={line.quantity} />
<Price value={salePrice} originalValue={regularPrice} />
<Price loading />

Config defaults: currency "USD", locale "en-US", precision 2, zeroLabel "Call for Price" (shown for 0), uomSeparator "/". In a server component use createFormatPrice from price-format, which has no React dependency.

QuantityInput

import { QuantityInput } from "@simpleapps-com/augur-web/quantity-input";

<QuantityInput value={qty} onChange={setQty} min={1} max={999} />;

Props: value, onChange (called with the validated, rounded value), min (default 0), max, step (default 1; values round up to it), decimals (default 0) and showStepper (default true).

AddToCartButton

import { AddToCartButton } from "@simpleapps-com/augur-web/add-to-cart-button";

<AddToCartButton loading={isAdding} onClick={handleAdd} disabled={!inStock} />;

Props: loading, label (default "Add to Cart"), showIcon (default true), children, and Button's variant, size, disabled, className and onClick.

StockLabel

import { createStockLabel } from "@simpleapps-com/augur-web/stock-label";

export const { StockLabel } = createStockLabel({ outOfStockLabel: "Out of stock" });

<StockLabel isInStock={stock > 0} isLowStock={stock <= 10} displayQuantity={stock} />;

Labels default to "In stock", "Low stock" and "Out of stock"; displayQuantity shows in parentheses when in stock or low. loading renders a placeholder.

Payments and financing

  • PaymentModal hosts the Element/Unified payment iframe and reports the card BIN it posts back (extractBin). augur-hooks' usePaymentFlow drives it.
  • FinancingWidget loads a financing provider's script ("timepayment") on the pages that need it and renders nothing.

Site components

Export From Does
AnalyticsProvider, useAnalytics, AnalyticsNoscript gtm GTM with consent and a load strategy (default, afterInteractive, lazyOnload); AnalyticsNoscript goes in <body>
SessionReplayScript session-replay Loads Mouseflow or Hotjar with lazyOnload; renders nothing
BreadCrumbs breadcrumbs Breadcrumb navigation with optional JSON-LD
getMDXComponents mdx-components Styled components for MDX content
DataTable data-table TanStack Table with sorting, row selection, column visibility and paging
DetailPanel detail-panel A record's fields, switching between read and edit
ResourceTabs resource-tabs Sub-resource tabs for a detail page
ConfirmDialog confirm-dialog A ready-made confirmation dialog
ListView list-view Maps an array through a render function

What stays in the site

Layout (header, footer, menus), compositions of these components for one site (product cards, cart tables) and anything with the site's brand assets.