VibeUI
РусEng
Sign in
All1346Button124Input99Select40Card145Table33Dialog39Tabs14Badge33Avatar54Toast25Accordion32Alert35Button group77Calendar48Carousel28Chart36Checkbox & toggles59Code Block31Combobox62Command15Device Mockup10Dropdown menu32Empty20Loading32Navigation48Popover39Slider20Specialized inputs64Stepper29Tree19Typography4

Badge

Key Value Badge

A key-value badge for technical data: the key cannot be selected with the mouse, the value is selected whole in a single click.

React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.

What you can change

  • the caption through label
  • the value through value
  • the key and border tone through accent

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme
Key Value Badge — A key-value badge for technical data: the key cannot be selected with the mouse, the value is selected whole in a single click.

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.club/c/badge-025?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

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

Loading…

How to use

<Badge025 label="commit" value="a1f9c02" accent="" />

A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.

Settings

Key
label · default: commit
Value
value · default: a1f9c02
Key tone
accent · default: theme colour
Value background
background · default: theme colour

More in Badge

FAQ

How do I add Key Value Badge with Cursor or Claude Code?
Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
What does Key Value Badge depend on?
No npm packages beyond React and Tailwind CSS.
What can I change in Key Value Badge?
Adapt: the caption through label; the value through value; the key and border tone through accent. Keep as installed: the local --vibeui-badge-025-* palette — do not swap it for your theme tokens; user-select:none on the key: otherwise the caption travels to the clipboard with the value; user-select:all on the value — the badge exists for it, nobody drags a mouse across a hash.
Is Key Value Badge free?
Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.

For developers

npx shadcn@latest add https://vibeui.club/r/pro/badge-025.json

This command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options

Technical notes

One file, zero dependencies, the palette in the local --vibeui-badge-025-* variables. Server rendered: no hooks. Two zones in one border under a shared overflow:hidden: a dark key and a light value, with the boundary between them being a change of background rather than a line. The key is marked user-select:none and the value user-select:all, so a click on the hash selects exactly the hash and the word "commit" does not travel to the clipboard with it. The value is set in a monospaced face and truncated with an ellipsis, with the full one in title. Both zones are under aria-hidden, and the whole badge is announced as one phrase through aria-label. The palette rests on light-dark(): in a dark context the zones change their lightness and the border becomes lighter than the background. The key tone is overridden by the accent prop and the value fill by background.

Tags

  • badge
  • key-value
  • metadata
  • copy
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…