Env

A labeled list of environment variables with copyable values and a coordinated reveal toggle for sensitive entries.

Anatomy

The header is optional. Each variable owns its raw value and an optional secret flag. The root owns a single visibility state that applies to every secret value at once.

value is a string on EnvVar because both EnvVarValue and EnvVarCopy need the raw text. The value cell reads it to render the value or its mask, and the copy button reads it to write to the clipboard. Names stay as children so labels remain freeform.

Visibility

The root accepts visible for the controlled flow, defaultVisible for the uncontrolled flow, and onVisibleChange to mirror state. The state applies to every variable marked secret. Public variables always render their value regardless of the toggle.

When a value is masked, EnvVarValue renders fixed-length bullets so the displayed length never leaks the real length, and sets data-masked on the element for custom styling.

The component does not ship a visibility toggle. Render whatever surface fits the design and call setVisible from useEnv. A switch, an icon button, a keyboard shortcut all work.

Copying

EnvVarCopy is headless. It carries no visual styling and writes the row's value to the clipboard on click. After a successful copy the button receives data-copied for around a second so descendant icons can swap between a copy and check state.

Pass render to swap the underlying element entirely, for example to use the kit's Button with its built-in variants.

API

Reference for each part of the component, including its available props and behavior.

Env

Root container. Holds the visibility state and exposes it through context. Accepts visible for the controlled flow, defaultVisible for the uncontrolled flow, and onVisibleChange to mirror state. Sets data-visible on the root when revealed so descendants can style off the parent.

EnvHeader

Optional. Top row of the container. Lays out children horizontally. Typically holds an EnvTitle on the left and a custom reveal control on the right.

EnvTitle

Muted label for the header. Use it for a filename or a section name.

EnvList

A flex column that wraps the variable rows. Plain <div> with no padding of its own, so the parent decides density. Override per instance through className.

EnvVar

A single variable row. Provides the row context with the raw value and the secret flag so EnvVarValue and EnvVarCopy can read both without prop drilling. Sets data-secret on the row for custom styling on sensitive entries.

EnvVarName

The variable identifier. Renders as a monospaced <span> so names align visually. Content is free, so any label markup works.

EnvVarValue

The value cell. Reads value and secret from the row context and visible from the root. When the row is secret and visibility is off, renders fixed-length bullets and sets data-masked on the element. Otherwise renders the raw value verbatim and truncates on narrow widths.

EnvVarCopy

A headless copy button. Wires the click handler to write the row's value to the clipboard and toggles data-copied on the button for around a second after a successful copy. No default visual styling, so the call site brings its own button family through render or className. The button ships no default icon, so pass one explicitly.

useEnv

Hook for wiring a custom reveal toggle to the root visibility state. Returns { visible, setVisible }. Must be called inside <Env>.