Vote Tally
Upvote/downvote tally component with sortable groups and toggle support
Feature Requests
Upvote the features you want to see next.
- Mobile AppNative iOS and Android apps
- Dark Mode SupportAdd dark mode toggle to the dashboard
- Keyboard ShortcutsQuick actions via keyboard
- API v2New REST API with better pagination
"use client"
import { useState } from "react"
import { VoteTally } from "@/components/inputs/vote-tally/component"
const items = [
{ id: "dark-mode", title: "Dark Mode Support", description: "Add dark mode toggle to the dashboard" },
{ id: "keyboard-shortcuts", title: "Keyboard Shortcuts", description: "Quick actions via keyboard" },
{ id: "api-v2", title: "API v2", description: "New REST API with better pagination" },
{ id: "mobile-app", title: "Mobile App", description: "Native iOS and Android apps" },
]
export function VoteTallyExample() {
const [votes, setVotes] = useState<Record<string, number>>({
"dark-mode": 24,
"keyboard-shortcuts": 18,
"api-v2": 12,
"mobile-app": 31,
})
return (
<div className="mx-auto w-full max-w-md">
<h3 className="mb-1 text-lg font-semibold text-foreground">Feature Requests</h3>
<p className="mb-4 text-sm text-muted-foreground">
Upvote the features you want to see next.
</p>
<VoteTally.Root
defaultValue={votes}
onValueChange={setVotes}
className="gap-3"
>
<VoteTally.Group sortBy="votes-desc">
{items.map((item) => (
<VoteTally.Item
key={item.id}
value={item.id}
className="flex items-center gap-3 rounded-lg border border-border bg-background p-3 transition-colors hover:bg-muted/50"
>
<VoteTally.Trigger className="flex flex-col items-center gap-0.5 rounded-md border border-border px-2 py-1.5 text-muted-foreground transition-colors hover:border-primary hover:text-primary data-[state=voted]:border-primary data-[state=voted]:bg-primary/10 data-[state=voted]:text-primary">
<svg
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
</svg>
<VoteTally.Count className="text-xs font-semibold tabular-nums" />
</VoteTally.Trigger>
<div className="min-w-0 flex-1">
<VoteTally.Title className="block text-sm font-medium text-foreground">
{item.title}
</VoteTally.Title>
<VoteTally.Description className="block text-xs text-muted-foreground">
{item.description}
</VoteTally.Description>
</div>
</VoteTally.Item>
))}
</VoteTally.Group>
</VoteTally.Root>
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/vote-tally"
Dependencies
pnpm add @radix-ui/react-use-controllable-state