shadcn.io is not affiliated with official shadcn/ui
Financial Planner Fee Calculator Profile Block for React Aria
A financial planner profile as a fee calculator: assets on a slider and a service tier in, the annual fee, monthly fee and effective rate out, with the fee worked out band by band.
Installation
Overview
Show what advice costs before anyone books a call, with this financial planner profile for React with React Aria. Inside a hairline frame with a plus mark on each corner, the first band names the planner and says it is a sample record. Under it, the assets to be advised sit on a Slider from $100,000 to $5,000,000, and the service tier on a Segment Group of three: Planning, Managed and Family office. The annual fee is the large figure, with the monthly fee and the effective rate beside it in a Data List. A table then works the fee out band by band: the first $1M, the next $2M and everything above $3M are each charged at their own rate, and the band the last dollar falls in is marked. The foot, ruled by Guides, holds a status line beside a Shine Button that asks for an intro call. It's built from Slider, Segment Group, Data List, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. Every figure is illustrative, not advice. For an adviser directory, a planner's own site or any fee schedule with brackets.
FAQ
How do I change the tiers, bands and rates?
Edit the constants at the top. TIERS lists each tier with its three rates in hundredths of a percent (100 is 1.00%), CEILINGS holds where the first two bands end and BAND_NAMES their labels. MIN_ASSETS, MAX_ASSETS and STEP set the slider. Every figure comes from these, so nothing is typed twice. Keep the assets a multiple of the step, so the fee in each band is a whole number of dollars.
How is the fee worked out?
Marginal, like income tax. The assets are split across the bands, each part is multiplied by that band's rate, and the three fees are added. The effective rate is the total fee over all the assets, so it is always lower than the top band's rate. The block says this in a line under the table, with the rate a dollar over $3M pays.
What does Ask for an intro call do?
Nothing leaves the page. It says Requested in this demo, nothing sent, in the status line, and the line goes back to the reminder that the figures are examples as soon as you move the slider or change the tier. To make it real, send the assets and the tier to your own API in the form's submit handler and show its answer in the same line.
Is this financial advice?
No, and the block says so in its status line, in the note under the table and in the first band, where it is labelled a sample record. The planner, the tiers and the rates are invented. If you show real fees, keep the sentence and add whatever your regulator requires.
Is it accessible?
The slider is named Assets to advise and reads its value as dollars, the tier group is named by its heading, and the table has column and row headers with the last-dollar band marked in words, not only in weight. The status line is a polite live region present from the start. Every control works from the keyboard. On React Aria the slider takes minValue and maxValue.
How does it look on a phone?
The slider and the tier group come first, then the fee, then the table, which scrolls sideways inside its band if it needs to, and the foot stays pinned to the bottom of the screen. The tier descriptions are hidden to keep the group on one line. Figures keep their order in a right-to-left layout.