Opacity Bar

Opacity level visualization showing bars at varying opacity values with token names.

Preview

--opacity-0

25%

--opacity-25

50%

--opacity-50

75%

--opacity-75

100%

--opacity-100

Installation

npx visor add opacity-bar

This copies two files into your project:

components/ui/opacity-bar/opacity-bar.tsx — the component
components/ui/opacity-bar/opacity-bar.module.css — the styles

Usage

import { OpacityBar } from '@/components/ui/opacity-bar/opacity-bar';

<OpacityBar levels={[
  { token: "--opacity-0", name: "0%", value: 0 },
  { token: "--opacity-25", name: "25%", value: 0.25 },
  { token: "--opacity-50", name: "50%", value: 0.5 },
  { token: "--opacity-75", name: "75%", value: 0.75 },
  { token: "--opacity-100", name: "100%", value: 1 },
]} />

API Reference

OpacityBarProps

Prop	Type	Default	Description
`levels`*	`OpacityBarItemProps[]`	—	Array of opacity levels with token, name, and value (0–1).
`className`	`string`	—	Additional CSS class names to merge onto the element.

Accessibility

OpacityBar is a documentation utility. The bars are decorative and supplemented by text labels (name) and token names for non-visual access. No interactive behavior.