Blocks
Ready-to-use showcase sections combining sensory-ui components with sound feedback.
Pre-built showcase sections that demonstrate real-world patterns for adding sound feedback to common UI patterns. Each block combines multiple sensory-ui components with tasteful sound roles.
Demo
Installation
npx shadcn@latest add SatyamVyas04/sensory-ui/sensory-uiThe bundle covers every block on this page. Prefer installing only what a block needs? Each block page lists its own minimal commands.
Available Blocks
Navigation
Navbars with sound-enhanced links and mobile menus.
Menu Bars
Menubars and dropdowns with audio feedback.
CTA Clicks
Call-to-action buttons with confirmation sounds.
Copy Installation
Code blocks with copy-to-clipboard feedback.
Timer + Confetti
Countdowns with milestones and celebrations.
How Blocks Work
Each block is a self-contained MDX page with:
- Title and description: What the block demonstrates
- Live demo: Interactive preview with sound pack selector
- Installation: Copy-paste command to install the block
- Code: Full source code you can paste into your project
- Sound roles: Which roles are used and why
- Customization: How to swap sounds or disable them
Blocks are designed to be copied directly into your project. They use the same sensory-ui components you already have installed.
Using Blocks
Copy the code
Each block provides the full source code. Paste it into your project and adjust as needed.
Customize sounds
// Swap sounds for a different role
<Button sound="interaction.confirm">CTA</Button>
// Disable sounds on specific elements
<Button sound={false}>Silent CTA</Button>When to Use Blocks
- Showcasing sensory-ui: Demonstrate the library's capabilities
- Starting points: Use as a base for your own implementations
- Learning: See how components compose with sound roles
- Prototyping: Quickly add sound feedback to common patterns