Feature Voting Roadmap

ComingSoon39: Feature Voting Roadmap

A pre-launch feature-voting section built on a single accent color, with a centered square eyebrow and heading, and a list of upcoming feature cards below, each with a title, a description, and an interactive upvote control that updates the visible count.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon39?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon39?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon39.tsx.

Quick start

The installed file exports comingsoon39Demo alongside the block: the exact props behind the preview above. Spread it to get a working voting list in one line.

import { ComingSoon39, comingsoon39Demo } from "@/components/beste/block/comingsoon39";

export default function Page() {
  return <ComingSoon39 {...comingsoon39Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon39 } from "@/components/beste/block/comingsoon39";

export default function Page() {
  return (
    <ComingSoon39
      label="Help Us Prioritize"
      heading="You decide what we build first."
      description="Vote for the features you need most and we'll ship in the order you set."
      features={[
        {
          title: "Offline mode",
          description: "Keep working when the connection drops, sync when it returns.",
          votes: 312,
        },
        {
          title: "Native mobile app",
          description: "A full companion app for iOS and Android, not a shrunken website.",
          votes: 268,
        },
      ]}
    />
  );
}

Props

type FeatureItem = {
  title: string;
  description: string;
  votes: number;
};

Behavior notes

• Each feature card has an interactive upvote button, not a form: clicking it toggles that card's index in local voted state, sets aria-pressed, and restyles the button with the accent color.
• The displayed count is derived, not stored: it renders feature.votes plus one while the card is voted, so toggling adds or removes a single vote against the base votes number and nothing is persisted or sent anywhere.
• The feature list renders only when features is non-empty, mapping each entry into a bordered bg-card row with the vote control on the left and the title and description on the right.
• The centered eyebrow, heading, and description each render only when their prop is present.
• The votes value is a number, and the title and description are plain text with no inline markup parsing, so HTML passed in shows as escaped text.