Segmented control and input components for React
The small controls that carry a lot of the interaction in a dense product. A segmented control that animates between options, an amount field with half and max presets so the maths is not left to the user, a currency toggle, and a preferences card. Small parts, and the ones people touch most.
6 components, installable with the shadcn CLI.
Segmented Control
A segmented control for timeframes and view modes like 24h, 7d and 30d, with a thumb that slides between the options.
View componentCrypto/Fiat
A crypto amount input that switches between fiat and token units at the current rate, for wallets, exchanges and payment flows.
View componentCurrency Amount
Currency and crypto amount formatters that keep symbols, decimals, abbreviations and signed colours consistent across a fintech screen.
View componentAvatar Stack
An overlapping avatar stack for teams, signers or token holders that lifts and names one on hover and lists the overflow.
View componentPreferences Card
An account settings card with rows for profile, payment method and notifications, for SaaS, banking and exchange account pages.
View componentPrice Scrubber
A stock price chart you scrub with a magnet crosshair and price and time badges on the axes, the headline price turning green or red against the open.
View component
Questions
- Is the segmented control accessible with a keyboard?
- Yes. It is a real radio group under the styling, so arrow keys move between options and focus is visible.
- Does the amount input handle decimals safely?
- Yes. It formats as you type, keeps a fixed decimal treatment and offers half and max presets so people do not calculate fees by hand.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide