@brio
Everyday React components with the edge cases handled: FAQ, pricing toggle, code input and more. One file each.
Install this registry
npx shadcn@latest add https://brioui.com/r/registry.json pnpm dlx shadcn@latest add https://brioui.com/r/registry.json bunx shadcn@latest add https://brioui.com/r/registry.json curl -s https://brioui.com/r/registry.json Components
6 totalnpm / pnpm / yarn / bun tabs where only the words that differ change. Every block on the page follows your pick, in a cascade, and remembers it.
npx shadcn@latest add https://brioui.com/r/install-command.json Monthly / yearly switch with odometer prices. Drag halfway and prices sit halfway; land on yearly and the badge peels, the old price strikes through.
npx shadcn@latest add https://brioui.com/r/pricing-toggle.json Accordion with deep links, ⌘F that finds text in closed answers, optional search with highlights, and FAQPage structured data for Google.
npx shadcn@latest add https://brioui.com/r/faq.json Remembers what each visitor has read: unread dots, a “since your last visit” line, dots that fade as you read, and a mark-all sweep. Releases hang off a measur…
npx shadcn@latest add https://brioui.com/r/changelog.json A calm code field with a caret that glides between underlined slots. Digits rise into place, pasted codes stream in, a line runs while checking, and on success…
npx shadcn@latest add https://brioui.com/r/code-input.json The contact form: topic chips with a sliding pill that reshape the fields (Sales adds company and team size) while the card's height glides; company filled fro…
npx shadcn@latest add https://brioui.com/r/contact-form.json