Brio

Overview

Brio UI is a set of everyday React components with the edge cases handled. Each component is a single file using only React and Motion, with CSS included. The site plans 50 components, of which 10 are free under the MIT license and rolling out now; the rest form a Pro tier due to launch in November. The registry currently serves six items.

Brio's focus is testing where component kits tend to break. Every component can be stress-tested on the site at narrow widths, with long German labels, billion-dollar numbers, right-to-left Arabic, messy text, slow CPUs and keyboard-only input, using the same file that gets copied.

Features

• Pricing toggle: Monthly and yearly switch with odometer-style prices that follow the drag.
• Seat estimator: Prices drop as the user crosses each tier.
• Code input: A caret glides between underlined slots and pasted codes stream in.
• Password field: The bottom edge doubles as a strength meter.
• Contact form: Topic chips reshape the fields, for example adding company and team size for sales.
• FAQ: Deep links, browser find that searches closed answers, optional search and FAQPage structured data.
• Changelog: Tracks what each visitor has read, with unread dots and a "since your last visit" line.
• Other free parts: Feedback rating, table of contents and an install command with package manager tabs.

Tech stack

• React 19, Motion
• MIT license for free components

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @brio/component-name