Field Alert

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

# Install and place "alert-003" (Field Alert) 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/alert-003.json

Registry item: https://vibeui.ru/r/alert-003.json
Installs to: components/vibeui/alert-003.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
A single-line message under a form field: a tone dot and a phrase. No title, no description — nobody reads a second level of text in that spot.

A one-line message for forms: a coloured dot and a phrase. There is deliberately no title or description — under an input people read one line. Four tones, and in danger the whole line turns red. Zero dependencies, one file, its own palette, no client JS.

## 3. How to use it
import { Alert003 } from "@/components/vibeui/alert-003"

<Alert003 tone="danger" message="That address is taken." />

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-alert-003-* palette — do not swap it for your theme tokens (text-destructive and the like)
- the single line without a title: the moment a second level of text appears this is a different component
- aligning the dot to the first line: on a two-line message a centred dot drifts downward
- role="alert" on the danger tone — an error has to be announced immediately
- matching the line height of the field label: otherwise the message jolts the form when it appears
- the <style> block inside the component — it holds the palette and the layout

## 6. You may change
- tone: info, success, warning, danger
- message — the phrase itself; keep it to one line
- outer spacing through className: usually a margin-top under the field
- wiring to the field: give it an id and point aria-describedby at it from the input

## 7. Rules
- The component does not wire itself to the field. Give it an id and reference it in the input's aria-describedby, or a screen reader will not connect the two.
- Do not write two sentences here: the space is sized for one phrase, the second runs past the field.
- For a whole-form error summary use alert-010 — this is one field, one message.
- 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.