HomeOnTour Logo6UI

Dev Mode Bar

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

Loading example...
import { DevModeBar } from "@/components/homeontour-ui/dev-mode-bar"

export function UsageExampleExample() {
  return (
    <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} />

Installation

pnpm dlx homeontour-ui@latest add dev-mode-bar

Usage

import { DevModeBar } from "@/components/homeontour-ui/dev-mode-bar"
<DevModeBar branchName="feature/new-feature" api="https://api.staging.example.com" />