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

Button

View Count Button

A metric button with a view counter and trend bars: the shortened number on screen, the full one in aria-label and the tooltip.

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 metric label
  • the value through the count prop
  • the trend through the trend prop, an array of any length

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

Preview

1440pxHost theme
View Count Button — A metric button with a view counter and trend bars: the shortened number on screen, the full one in aria-label and the tooltip.

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/button-057?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

<Button057 count={12400} trend={[3, 5, 4, 7, 6, 9, 8, 12]} onClick={openStats}>
  Views
</Button057>

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

Settings

Label
children · default: Views
Views
count · default: 12400
Accent
accent · default: theme colour
Tooltip
titleText · default: {count} views
Surface
background · default: theme colour

More in Button

FAQ

How do I add View Count Button 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 View Count Button depend on?
No npm packages beyond React and Tailwind CSS.
What can I change in View Count Button?
Adapt: the metric label; the value through the count prop; the trend through the trend prop, an array of any length. Keep as installed: the full number in aria-label and title: the short form rounds, and nothing should rely on it; normalising the bars to the array maximum — otherwise large numbers push them all to the ceiling; the minimum bar height: a zero value has to read as zero rather than as missing.
Is View Count Button 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/button-057.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

The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-button-057-* variables. Server component. The number is shortened to "thousand" and "million" with a comma as the decimal separator; the full value through toLocaleString goes into title and aria-label, because the shortening rounds and lies. The bars are normalised to the maximum of the trend array, and a minimum height of 12% keeps zero values from disappearing. The last bar is highlighted as the current period.

Tags

  • button
  • stats
  • counter
  • sparkline
Component source

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

Loading…