Code Block

Masked Env

Список переменных окружения со скрытыми значениями: строка открывается своим переключателем или общим в шапке, и всё это без клиентского JS.

env
secrets
toggle
no-js

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/codeblock-022

.env.localПоказать значения

DATABASE_URL=postgres://vibeui:s3cret@db:5432/appтолько серверПоказать значение DATABASE_URL
RESEND_API_KEY=re_9fJk2Lm0_QpZx4Nbтолько серверПоказать значение RESEND_API_KEY
NEXT_PUBLIC_SITE_URL=https://vibeui.devв браузерПоказать значение NEXT_PUBLIC_SITE_URL
NEXT_PUBLIC_ANALYTICS_ID=vb-2026-08в браузерПоказать значение NEXT_PUBLIC_ANALYTICS_ID

Маскировка визуальная: значения лежат в разметке страницы. Настоящие секреты сюда не кладут — только примеры из .env.example.

Файл

Показать всё

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «codeblock-022» (Masked Env) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/codeblock-022.json

Registry item: https://vibeui.ru/r/codeblock-022.json
Ставится в: components/vibeui/codeblock-022.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Список переменных окружения со скрытыми значениями: строка открывается своим переключателем или общим в шапке, и всё это без клиентского JS.

Переменные окружения со скрытыми значениями: раскрытие построчно или сразу всё, состояние на чекбоксах и :has(). Ноль зависимостей, клиентского JS нет.

## 3. Как использовать
import { Codeblock022 } from "@/components/vibeui/codeblock-022"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-codeblock-022-* и не подменять её токенами вашей темы
- вывод области видимости из имени ключа: проставленный руками значок рано или поздно соврёт
- два независимых источника раскрытия: общий переключатель и переключатель строки
- скрытие чекбоксов через clip-path, а не display:none — иначе они выпадают из обхода клавиатурой
- подпись в подвале про визуальность маскировки: без неё блок выглядит защитой, которой не является
- тёмную подложку блока — светлый моноширинный текст без неё не читается

## 6. Можно менять
- список переменных через variables
- имя файла через file
- открытые значения сразу через revealAll
- цвета значков области видимости и маски

## 7. Правила
- Маскировка визуальная: значения лежат в разметке страницы, настоящие секреты сюда не кладут.
- Общий переключатель перекрывает строчные: чтобы вернуться к построчному режиму, его нужно снять.
- Длинное значение режется многоточием — целиком оно видно только в исходном коде страницы.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/codeblock-022.json

https://vibeui.ru/r/codeblock-022.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-022-*. Серверный: состояние держат нативные чекбоксы, а показ значения включают два независимых селектора :has() — на строке и на всём блоке от общего переключателя в шапке. Область видимости переменной выводится из её имени: ключи с префиксом NEXT_PUBLIC_ получают другой значок, поэтому подпись не может разойтись с реальностью. Чекбоксы спрятаны clip-path, у каждого есть визуально скрытая подпись с именем ключа для читалки экрана.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { CSSProperties } from "react"

export type Codeblock022Variable = {
  key: string
  value: string
}

export type Codeblock022Props = {
  file?: string
  revealAll?: boolean
  variables?: Codeblock022Variable[]
  className?: string
  style?: CSSProperties
}

// Идея компонента: показать состав .env, не показывая сами значения. Каждая
// строка закрыта точками и открывается своим чекбоксом, а общий переключатель
// в шапке открывает все сразу — всё на :has(), без клиентского состояния.
const STYLES = `
:where([data-vibeui-block="codeblock-022"]){
--vibeui-codeblock-022-bg:oklch(0.19 0.014 275);
--vibeui-codeblock-022-head:oklch(0.23 0.018 275);
--vibeui-codeblock-022-fg:oklch(0.93 0.008 275);
--vibeui-codeblock-022-muted:oklch(0.66 0.016 275);
--vibeui-codeblock-022-border:oklch(1 0 0 / 12%);
--vibeui-codeblock-022-key:oklch(0.82 0.12 250);
--vibeui-codeblock-022-value:oklch(0.85 0.12 145);
--vibeui-codeblock-022-mask:oklch(0.6 0.02 275);
--vibeui-codeblock-022-public:oklch(0.84 0.13 75);
--vibeui-codeblock-022-accent:oklch(0.8 0.12 250);
--vibeui-codeblock-022-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-022-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-022"]{
display:flex;flex-direction:column;
width:100%;max-width:34rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-022-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-022-bg);color:var(--vibeui-codeblock-022-fg);
font-family:var(--vibeui-codeblock-022-font);
}
[data-vibeui-block="codeblock-022"] [data-part="head"]{
display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
padding:0.5rem 0.75rem;
background:var(--vibeui-codeblock-022-head);
border-bottom:1px solid var(--vibeui-codeblock-022-border);
font-family:var(--vibeui-codeblock-022-mono);font-size:0.75rem;
color:var(--vibeui-codeblock-022-muted);
}
[data-vibeui-block="codeblock-022"] input{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
[data-vibeui-block="codeblock-022"] [data-part="sr"]{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
[data-vibeui-block="codeblock-022"] label{
cursor:pointer;display:inline-flex;align-items:center;gap:0.375rem;
padding:0.1875rem 0.5rem;border-radius:999px;
font-family:var(--vibeui-codeblock-022-font);font-size:0.6875rem;font-weight:650;
color:var(--vibeui-codeblock-022-muted);background:oklch(1 0 0 / 8%);
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="codeblock-022"] label:hover{color:var(--vibeui-codeblock-022-fg)}
[data-vibeui-block="codeblock-022"] label:has(input:checked){
color:var(--vibeui-codeblock-022-accent);background:oklch(0.6 0.12 250 / 22%);
}
[data-vibeui-block="codeblock-022"] label:has(input:focus-visible){
outline:2px solid var(--vibeui-codeblock-022-accent);outline-offset:2px;
}
[data-vibeui-block="codeblock-022"] ul{
margin:0;padding:0.375rem 0;list-style:none;
}
[data-vibeui-block="codeblock-022"] li{
display:flex;align-items:center;gap:0.5rem;
padding:0.25rem 0.75rem;min-height:1.875rem;
font-family:var(--vibeui-codeblock-022-mono);font-size:0.8125rem;
}
[data-vibeui-block="codeblock-022"] [data-part="key"]{color:var(--vibeui-codeblock-022-key)}
[data-vibeui-block="codeblock-022"] [data-part="pair"]{
display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="codeblock-022"] [data-part="mask"]{
color:var(--vibeui-codeblock-022-mask);letter-spacing:0.1em;
user-select:none;-webkit-user-select:none;
}
[data-vibeui-block="codeblock-022"] [data-part="real"]{
display:none;color:var(--vibeui-codeblock-022-value);
}
/* Значение открывает либо свой чекбокс строки, либо общий в шапке: два
   независимых источника одного состояния, оба — чистый CSS. */
[data-vibeui-block="codeblock-022"] li:has([data-part="eye"]:checked) [data-part="mask"],
[data-vibeui-block="codeblock-022"]:has([data-part="master"]:checked) [data-part="mask"]{display:none}
[data-vibeui-block="codeblock-022"] li:has([data-part="eye"]:checked) [data-part="real"],
[data-vibeui-block="codeblock-022"]:has([data-part="master"]:checked) [data-part="real"]{display:inline}
[data-vibeui-block="codeblock-022"] [data-part="scope"]{
margin-inline-start:auto;flex:none;
padding:0.0625rem 0.4375rem;border-radius:999px;
font-family:var(--vibeui-codeblock-022-font);font-size:0.625rem;font-weight:650;
background:oklch(1 0 0 / 8%);color:var(--vibeui-codeblock-022-muted);
}
[data-vibeui-block="codeblock-022"] [data-part="scope"][data-public="true"]{
color:var(--vibeui-codeblock-022-public);background:oklch(0.6 0.12 75 / 20%);
}
[data-vibeui-block="codeblock-022"] [data-part="foot"]{
margin:0;padding:0.5rem 0.75rem;
border-top:1px solid var(--vibeui-codeblock-022-border);
font-size:0.6875rem;line-height:1.4;color:var(--vibeui-codeblock-022-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="codeblock-022"] *{animation:none!important;transition:none!important}}
`

const VARIABLES: Codeblock022Variable[] = [
  { key: "DATABASE_URL", value: "postgres://vibeui:s3cret@db:5432/app" },
  { key: "RESEND_API_KEY", value: "re_9fJk2Lm0_QpZx4Nb" },
  { key: "NEXT_PUBLIC_SITE_URL", value: "https://vibeui.dev" },
  { key: "NEXT_PUBLIC_ANALYTICS_ID", value: "vb-2026-08" },
]

/** Список переменных окружения со скрытыми значениями. */
export function Codeblock022({
  file = ".env.local",
  revealAll = false,
  variables = VARIABLES,
  className,
  style,
}: Codeblock022Props) {
  return (
    <>
      <style href="vibeui-codeblock-022" precedence="medium">
        {STYLES}
      </style>
      <section
        data-vibeui-block="codeblock-022"
        className={className}
        style={style}
        aria-label={`Переменные окружения ${file}`}
      >
        <header data-part="head">
          <span>{file}</span>
          <label>
            <input
              type="checkbox"
              data-part="master"
              defaultChecked={revealAll}
            />
            Показать значения
          </label>
        </header>
        <ul>
          {variables.map((variable) => {
            const isPublic = variable.key.startsWith("NEXT_PUBLIC_")

            return (
              <li key={variable.key}>
                <span data-part="pair">
                  <span data-part="key">{variable.key}</span>=
                  <span data-part="mask" aria-hidden="true">
                    ••••••••••••
                  </span>
                  <span data-part="real">{variable.value}</span>
                </span>
                <span data-part="scope" data-public={isPublic || undefined}>
                  {isPublic ? "в браузер" : "только сервер"}
                </span>
                <label>
                  <input type="checkbox" data-part="eye" />
                  <span data-part="sr">Показать значение {variable.key}</span>
                  <span aria-hidden="true">◉</span>
                </label>
              </li>
            )
          })}
        </ul>
        <p data-part="foot">
          Маскировка визуальная: значения лежат в разметке страницы. Настоящие
          секреты сюда не кладут — только примеры из <code>.env.example</code>.
        </p>
      </section>
    </>
  )
}