Environment Config Viewer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools9.tsx instead.

Usage

The file also exports devtools9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools9, devtools9Demo } from "@/components/blocks/devtools/devtools9";

export default function Page() {
  return <Devtools9 {...devtools9Demo} />;
}

Props

Types

type EnvVar = {
  key: string;
  value: string;
  masked?: boolean;
};

type EnvironmentConfig = {
  id: string;
  label: string;
  variables: EnvVar[];
};

Behavior notes

• This is a client component: the environment tabs are real state (clicking a tab swaps which environment's variables render below) and the Reveal/Mask button is real state too, not decorative.
• Masking is computed at render from the real value (first 8 characters, then a fixed run of bullets, then the last 4 characters) for any row with masked: true; there is no separate pre-masked string to keep in sync with the real value.
• The Reveal/Mask button only appears in the panel header when the currently active environment has at least one masked row, and it is a single toggle for all masked rows in that environment, not one button per row.
• The reveal state is shared across environments: switching tabs while revealed keeps secrets visible in the newly selected environment too, rather than re-masking on every tab change.
• The dark terminal-style panel (neutral-950 background, traffic-light dots, monospace) is a deliberate fixed-color exception for this block, matching this repo's established code-window convention rather than using semantic tokens.