HomeOnTour LogoUI

Dev Mode Bar

A development mode indicator bar that displays the current branch and API endpoint. Perfect for development and staging environments.

Usage Example
Dev mode bar with branch name and API endpoint
BRANCH: feature/new-feature
API: https://api.staging.example.com
<DevModeBar 
  branchName="feature/new-feature" 
  api="https://api.staging.example.com" 
/>

{/* In a Next.js server component with env variables */}
const branchName = process.env.VERCEL_GIT_COMMIT_REF || "local"
const apiUrl = process.env.API_URL || ""
return <DevModeBar branchName={branchName} api={apiUrl} />