# Bencho

> A library of interactive React components, micro-interactions and synthesized interface sounds that you copy into your own projects.

Bencho is a library of interactive React blocks and interface sounds made by Lorenzo Cabra. Each block is a self-contained folder with a component, stylesheet and props README, and the repository's free selection of 41 blocks and 24 sounds is MIT licensed.

## What It Is

Bencho is a UI component and micro-interaction library grouped by gesture: slide, hover, drag, press, type, select and swipe. Examples include a wake slider, folding bill, signature pad, dynamic island, magnifying dock, one-time code input and AI chat input. You explore blocks on bencho.dev, tune their props, and copy the folder into a React project.

## Using Blocks and Sounds

Blocks depend on framer-motion and lucide-react and read colours from a shared tokens.css file, with dark mode following a data-theme attribute or the system setting. Every prop is optional, and the values set on the site can be passed straight to the component. Sounds are 24 interface sounds generated with the Web Audio API in a single file with no audio assets, triggered with a play call. A local playground shows every block and sound on one page.

## Pro and MCP

The site describes a Pro tier that unlocks 120+ blocks and 130+ sounds with full source, downloads, an unlimited bench for arranging blocks, and the Bencho MCP. The MCP is a server that lets AI assistants such as Claude, Cursor, Claude Code and Codex find a block and paste it into a project. Pro blocks fall under a separate Bencho Pro licence, and the Bencho name and photographs are excluded from the MIT licence.

## Features
- Interactive React blocks and micro-interactions grouped by gesture
- Copy-a-folder component structure with optional props
- 24 synthesized interface sounds using the Web Audio API
- Light and dark theme tokens
- Copy prompt button for agent-assisted wiring
- Bench for arranging blocks
- Bencho MCP for AI assistants (Pro)
- Local playground showing all blocks and sounds

## Integrations
React, framer-motion, lucide-react, Web Audio API, Claude, Claude Code, Cursor, Codex

## Platforms
WEB, API, DEVELOPER_SDK

## Pricing
Freemium — Free tier available with paid upgrades

## Links
- Website: https://bencho.dev
- Documentation: https://bencho.dev/docs
- Repository: https://github.com/cabralorenzo/bencho
- EveryDev.ai: https://www.everydev.ai/tools/bencho