Poll Results

Component 29

About

An interactive poll where clicking an option reveals animated result bars, vote percentages, and the winning choice.

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

Code

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

Usage.tsx

"use client";

import { PollResults, type PollOption } from "@/components/ui/poll-results";
import { useState } from "react";

const SEED: PollOption[] = [
  { id: "oak", label: "Oak, oiled", votes: 54 },
  { id: "travertine", label: "Travertine", votes: 41 },
  { id: "brick", label: "Painted brick", votes: 17 },
  { id: "concrete", label: "Concrete, sealed", votes: 9 },
];

export function PollResultsDemo() {
  const [options, setOptions] = useState(SEED);

  return (
    <div className="mx-auto w-full max-w-[340px]">
      <PollResults
        label="Floor for the front room?"
        options={options}
        onVote={(id) =>
          setOptions((prev) =>
            prev.map((o) => (o.id === id ? { ...o, votes: o.votes + 1 } : o)),
          )
        }
      />
    </div>
  );
}

export default PollResultsDemo;