184 Components
Environment Secret Vault
CardsVercel and Doppler inspired encrypted environment variable manager with environment scope tags (Production, Preview, Development), masked values, individual and global reveal toggles, and .env export.
Environment Variables Vault
Encrypted secret manager for boseui-production
DATABASE_URL
productionpreviewdevelopment
••••••••••••••••••••••••••••••••
NEXTAUTH_SECRET
productionpreview
••••••••••••••••••••••••••••••••
OPENAI_API_KEY
productionpreviewdevelopment
••••••••••••••••••••••••••••••••
STRIPE_WEBHOOK_SECRET
production
••••••••••••••••••••••••••••••••
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/env-secret-vault.json"
Props
TypeScript props supported by <EnvSecretVault />.
| Prop | Type | Default | Description |
|---|---|---|---|
| projectName | string | "boseui-production" | Project identifier shown in vault header. |
| initialVariables | EnvVariable[] | — | List of starting environment key-value pairs. |
Key Features
- Environment scope pills for Production, Preview, and Local development.
- Individual eye toggles and global Reveal All / Mask All controls.
- One-click Copy as .env file format.
- Inline interactive Add Secret form with uppercase key enforcement.
Keyboard & Accessibility
- Accessible toggle buttons with clear screen-reader state cues.
- High-contrast environment badges.