shadcn.io is not affiliated with official shadcn/ui
Reputation Score Web3 Block for React
A trust score from 0 to 1,000 built from five weighted categories, drawn as a bar with Bronze, Silver and Trusted ticks, with four actions that add capped points and re-derive the score and the gap to the next tier.
Installation
Overview
Explain a trust score and what would move it with this reputation panel for React with Base UI. It's the score model of Trustwren, a trust score for lenders, and it is a typed model: nothing was measured. A score from 0 to 1,000 is worked out from five weighted categories, DeFi activity 30%, governance 25%, history 20%, social 15% and NFT activity 10%, and drawn as a bar with ticks at Bronze 300, Silver 600 and Trusted 800, with a sentence such as 142 points to Trusted. The score rolls in a Sliding Number. Five category rows show a bar, the sub-score and the weight. A Toggle Group of four actions, such as Vote on 3 proposals or Verify a name, adds typed, capped points to a category, and each chip says what it changed. For lenders, profiles and any score that should be explained.
FAQ
How is the score calculated?
Each category has a sub-score from 0 to 100 and a weight; the score is the sum of weight times sub-score, scaled to 1,000. With the starting sub-scores it is 658, which is Silver and 142 points short of Trusted. The tiers are Bronze from 300, Silver from 600 and Trusted from 800, and all of it is a constant table in the file.
What do the actions do?
Each adds a fixed number of sub-score points to one category, capped at 100, so a category can't pass its ceiling. Pressing one re-derives the category row, the score, the bar and the gap, and the chip's second line changes from the points it would add to the sub-score it moved. Press it again to take it back, or use Reset.
Is this a real score?
No. The categories, weights and starting values are invented, nothing is read from a wallet, and the panel says it is a typed model. A real score needs a method you can state and an appeal route for the person it describes, and should not be used as advice about lending.
What stays local, and how do I wire it?
All of it. In your app compute sub-scores on the server from indexed activity, return the weights with the score so the explanation stays honest, and make the planner's actions links to the real tasks. The actions here only change local state.