React Dialog Block Breathing Exercise

Find your calm with guided breathing. This React breathing exercise dialog provides multiple breathing patterns (4-7-8, box breathing, relaxing), animated visual circle that expands and contracts, clear phase instructions (inhale, hold, exhale), and session completion tracking. Built with shadcn/ui Dialog, Button, Badge, Progress, and Select components using Tailwind CSS, users practice mindfulness with soothing visual guidance and satisfying animations. Select pattern, follow the circle, complete sessions—perfect for meditation apps, wellness tools, stress relief features, or any Next.js application where guided breathing helps users relax and focus.

React Dialog Block Breathing Exercise preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-breathing-exercise.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-breathing-exercise.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-breathing-exercise.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-breathing-exercise.json

Related Components

FAQ