Likert Scale

Forms

About

An accessible survey matrix component for rating multiple statements against the same agreement scale, with per-row required validation, a progress indicator, and a layout that collapses from a grid into stacked cards on narrow containers.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Likert Scale to your project and fits it to your theme.

Code

How Likert Scale is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import LikertScale, {
  type LikertScaleStatement,
  type LikertScaleOption,
} from "@/components/ui/likert-scale";

const options: LikertScaleOption[] = [
  { value: "never", label: "Never" },
  { value: "sometimes", label: "Sometimes" },
  { value: "daily", label: "Daily" },
];

const statements: LikertScaleStatement[] = [
  { id: "search", label: "Global search" },
  { id: "shortcuts", label: "Keyboard shortcuts" },
];

export default function LikertScaleCustomScaleDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
      <div className="w-full max-w-xl">
        <LikertScale
          label="How often do you use these?"
          statements={statements}
          options={options}
          showProgress={false}
        />
      </div>
    </div>
  );
}