Env Badge

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "badge-021" (Env Badge) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/badge-021.json

Registry item: https://vibeui.ru/r/badge-021.json
Installs to: components/vibeui/badge-021.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
An environment badge where the silhouette carries the meaning: production is a bevelled tag, staging a pill, development a dashed rectangle.

An environment badge in which prod, stage and dev differ by shape, not only by colour. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Badge021 } from "@/components/vibeui/badge-021"

<Badge021 env="stage" label="stage" />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-badge-021-* palette — do not swap it for your theme tokens
- the different shapes per environment: in a recompressed screenshot colour goes, the silhouette stays
- the missing border on prod: clip-path would cut the outline along with the corner and leave a ragged edge
- the monospace upper case: the badge must read as technical, not as a record status
- the loudest tone on prod — mistaking the environment costs the most
- the badge's own surface: without it the label is lost on any card

## 6. You may change
- the environment through env
- the caption through label
- the environment colours in the data-env rules
- the bevel size in the prod clip-path

## 7. Rules
- The caption is not derived from env: label is passed separately so wording stays a text question, not a code one.
- There are three environments: a fourth needs its own shape, or the "shape equals meaning" idea falls apart.
- clip-path cuts both background and shadow: do not give prod an outer shadow, it is clipped by the same contour.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.