Environment Variables

AI chats 9

About

A secret-aware configuration surface with masked values and explicit reveal or copy actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Environment Variables to your project and fits it to your theme.

Code

How Environment Variables is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import EnvironmentVariables from '@/components/ui/environment-variables'

export default function Demo() {
  const [items, setItems] = useState([
    {
      id: 'database',
      key: 'DATABASE_URL',
      value: 'postgres://pasta:s3cret@db.internal:5432/app_a3f2',
      scope: 'Production',
    },
    {
      id: 'openai',
      key: 'OPENAI_API_KEY',
      value: 'sk-proj-7Hq2Lx9vKd4w9b1c',
      scope: 'All environments',
    },
    {
      id: 'site',
      key: 'PUBLIC_SITE_URL',
      value: 'https://pastaui.dev',
      scope: 'All environments',
      public: true,
    },
  ])

  return (
    <EnvironmentVariables
      className="w-full max-w-lg"
      items={items}
      onAdd={() => undefined}
      onDelete={(id) => setItems((current) => current.filter((item) => item.id !== id))}
      onEdit={() => undefined}
    />
  )
}