jal-co/ui3

Env Table

Read-only environment variable table with masked values, click-to-reveal, per-row copy, and bulk copy as .env format. Designed for settings pages, deploy previews, and documentation.

lucide-react

Preview

Environment Variables

6
NEXT_PUBLIC_SITE_URLproduction
http••••••••
NEXT_PUBLIC_SITE_URLpreview
http••••••••
VERCEL_ENVproduction
prod••••••••
STRIPE_SECRET_KEYproduction
stri••••••••

Stripe live API key. Never expose client-side.

STRIPE_SECRET_KEYpreview
stri••••••••
GITHUB_TOKENproduction
ghp_••••••••

GitHub PAT for API access.

Installation

$ shadcn add https://ui.justinlevine.me/r/env-table.json

Usage

import { EnvTable } from "@/components/env-table"
<EnvTable variables={variables} title="Environment Variables" />

Pass an array of { key, value, environment?, description? } objects. Values are masked by default — users click the eye icon to reveal individual values, or use the toolbar to reveal/hide all.

Examples

With environment badges

When variables include an environment field, color-coded badges show the target environment. Built-in colors for production (green), preview (blue), and development (amber).

Deploy settings

Environment Variables

6
NEXT_PUBLIC_SITE_URLproduction
http••••••••
NEXT_PUBLIC_SITE_URLpreview
http••••••••
VERCEL_ENVproduction
prod••••••••
STRIPE_SECRET_KEYproduction
stri••••••••

Stripe live API key. Never expose client-side.

STRIPE_SECRET_KEYpreview
stri••••••••
GITHUB_TOKENproduction
ghp_••••••••

GitHub PAT for API access.

Database config

Database

4
DATABASE_URLproduction
post••••••••

Primary PostgreSQL connection string.

DATABASE_POOL_SIZEproduction
••••••••
REDIS_URLproduction
redi••••••••

Redis cache connection string.

DATABASE_URLdevelopment
post••••••••

Without environments

Omit the environment field for a simpler key-value layout. Works well for API keys, webhook URLs, and general config.

API credentials

API Keys

4
API_KEY
ak_p••••••••
API_SECRET
as_p••••••••
WEBHOOK_URL
http••••••••
LOG_LEVEL
••••••••

Default revealed

Set defaultRevealed to start with all values visible. Useful for non-sensitive config or documentation contexts.

Revealed by default

Runtime Config

2
NODE_ENVproduction
production
PORTproduction
3000

API Reference

EnvTable

PropType

EnvVariable

PropType

Notes

  • Display-only. This component does not read from process.env or any external source. You supply the data — it renders it.
  • Client component. Uses "use client" for reveal toggle state and clipboard access.
  • Masking. Values show the first 4 characters plus dots. Values shorter than 5 characters show only dots. This is visual masking — values are still in the DOM. Do not use this for true secret concealment.
  • Copy .env. The toolbar "Copy .env" button copies all variables in KEY=value format, ready to paste into a .env file.
  • Duplicate keys. The component handles duplicate keys gracefully — common when showing the same variable across multiple environments.