shadcn.io is not affiliated with official shadcn/ui
Bounty Board Web3 Block for React
A bounty board with Open, In progress, In review and Paid tabs with counts, a skill filter, twelve tasks with difficulty, reward and due date, a limit of two active claims, and a link field that sends finished work for review.
Installation
Overview
Let contributors pick up paid tasks without taking on more than they can finish, with this bounty board for React with Base UI. It's the board of Bountyyard. A hairline frame with a plus mark on each corner starts with a multiple Toggle Group of skills (Frontend, Contracts, Docs, Design, Data) and then Tabs for Open, In progress, In review and Paid, each with the number of tasks that match. Twelve typed bounties sit in a scroll region that keeps its height: the title, a difficulty Badge, the reward in YARD, a due date with "in 5 days" counted from a fixed day, and skill chips. The rule is the feature: you can hold two claims, and Claim says "You hold 2 bounties. Submit or release one to claim another" until you do. Submit work opens a Field for a link, checks that it starts with https:// and moves the task to In review. A filter with no match shows an Empty state that clears it. For protocols, DAOs and open-source teams that pay for small pieces of work.
FAQ
How does the limit of two claims work?
The count is the tasks that are yours and In progress. At two, Claim on an open task refuses, says why in the row and in the status line, and the other open rows show "You hold 2 of 2 claims". Release puts a task back in Open; Submit work moves it to In review, which no longer counts. The limit is one constant at the top of the file.
What does Submit work check?
That the text is a link that starts with https:// and has a host with a dot. A bad or empty link keeps the form open, writes the problem next to the field in words and returns focus to it. A good one moves the task to In review and says nothing was paid. It does not fetch the link; do that on your server.
Where does the due date text come from?
Each task has a typed ISO due date, and the words "in 5 days", "tomorrow" or "yesterday" are counted against one fixed date constant, never the clock, so the page reads the same on every visit. Paid tasks show the day they were paid instead.
What stays local, and how do I wire it?
All of it. The tasks are typed in START, claiming, releasing and submitting change local state, and YARD is an invented token, so nothing is posted, locked or paid. In your app each action would be a request your server checks, the claim limit enforced there, and payouts would come from your escrow or treasury.
Is it accessible from the keyboard?
Yes. The tabs use the arrow keys, the skill buttons are a labelled group of toggles, every row button names its task, and the list is a named, focusable region. After a claim, release or submit the list takes focus, so you don't lose your place when the task moves to another tab. One polite status message reports every change.