A secret-aware configuration surface with masked values and explicit reveal or copy actions.
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}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.