A/B Test Results

Component 2

About

A results table for A/B test variants that shows lift, a confidence interval, a two-proportion z-test p-value, and a warning when the sample is below the planned target or data is too thin to call.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds A/B Test Results to your project and fits it to your theme.

Code

How A/B Test Results is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { AbTestResults, type Variant } from "@/components/ui/ab-test-results";

// Synthetic experiment data, taken verbatim from astralyx-ui's own
// registry demo (src/registry/analytics-extra.tsx).
const EXPERIMENT: Variant[] = [
  {
    id: "control",
    name: "Control — current copy",
    visitors: 18_420,
    conversions: 1_105,
    control: true,
  },
  {
    id: "b",
    name: "B — shorter headline",
    visitors: 18_390,
    conversions: 1_241,
  },
  {
    id: "c",
    name: "C — pricing above fold",
    visitors: 18_505,
    conversions: 1_138,
  },
];

export default function AbTestResultsDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
      <AbTestResults
        className="w-full max-w-2xl"
        variants={EXPERIMENT}
        title="Landing page headline"
        targetSample={20_000}
      />
    </div>
  );
}