InfoBar

free

InfoBar displays a signal strength indicator with three bars, commonly used to show levels like low, medium, or high intensity.

Preview

Dark

Low:

Medium:

High:

import InfoBar from '@/components/composites/InfoBar';

export default function UsageDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between gap-4">
        <span>Low:</span>
        <InfoBar level="low" />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>Medium:</span>
        <InfoBar level="medium" />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>High:</span>
        <InfoBar level="high" />
      </div>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add InfoBar

Examples

Custom Height

Preview

Dark

import InfoBar from '@/components/composites/InfoBar';

export default function CustomHeightDemo() {
  return (
    <div className="flex items-center gap-8">
      <InfoBar level="low" height={20} />
      <InfoBar level="medium" height={20} />
      <InfoBar level="high" height={20} />
    </div>
  );
}

API

Prop	Description	Type	Default
`level`	The level to display. Low shows 1 bar (red), medium shows 2 bars (yellow), high shows 3 bars (green).	`'low' \| 'medium' \| 'high'`	—
`height`	Height of the info bar in pixels.	`number`	`15`
`className`	Additional CSS classes to apply to the container.	`string`	—