---
name: "@brio"
slug: "brio"
description: "Everyday React components with the edge cases handled: FAQ, pricing toggle, code input and more. One file each."
category: "Forms"
tags: ["buttons", "developer-tools", "forms", "media", "pro-available"]
framework: "react"
license: null
author: null
website: "https://brioui.com"
github: null
registry: "https://brioui.com/r/registry.json"
pro: true
pro_url: "https://brioui.com/docs/components/pricing-toggle"
github_stars: null
component_count: 6
generated_at: "2026-10-20T06:35:22.791Z"
---

# @brio

Everyday React components with the edge cases handled: FAQ, pricing toggle, code input and more. One file each.

## Links

- Website: https://brioui.com
- Registry JSON: https://brioui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/brio
- This file: https://sh4dcn.vercel.app/md/brio.md
- Pro / pricing: https://brioui.com/docs/components/pricing-toggle

## Install

```sh
# add the whole registry (shadcn CLI)
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
# fetch the raw registry index
curl -s https://brioui.com/r/registry.json
```

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| install-command | registry:ui | npm / 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` |
| pricing-toggle | registry:ui | 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` |
| faq | registry:ui | 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` |
| changelog | registry:ui | 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` |
| code-input | registry:ui | 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` |
| contact-form | registry:ui | 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` |

## For AI agents

```text
You are adding components from @brio to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/brio.md) for the component list.
2. Fetch the machine-readable index: https://brioui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: brio).
```