97 Pro components and page blocks

Get Pro
uibrik

Performance Meter

Pro

Preview

Customize

Value96
Loop
Duration1.8s
Hold2600ms
Color

Installation

Pro

Performance Meter is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/performance-meter

Usage

import { PerformanceMeter } from "@/components/uibrik/performance-meter/performance-meter";​<PerformanceMeter  value={96}  play="loop"  duration={1.8}  hold={2600}  color="#6366f1"  glow  label="Performance"  max={100}  unit=""  title="Built for speed"  description="Every page scores in the high nineties."  onComplete={() => {}}/>

Props

PerformanceMeter
value
Type number
96
Where the needle ends up.
play
Type "loop" | "view" | "hover"
"loop"
Sweep, rest and sweep again while on screen; sweep once on view; or sweep while pointed at (tap on touch).
duration
Type number
1.8
How long the climb takes; the shifts and overshoot scale with it.
hold
Type number
2600
How long the needle rests at the end before it drops back.
color
Type string
"#6366f1"
Colour of the bands and the dot. The bands are shaded from it.
glow
Type boolean
true
A shine along the bands when the needle lands, and a soft glow on the number near the top.
label
Type string
"Performance"
Text next to the dot.
max
Type number
100
Top of the scale.
unit
Type string
""
Unit after the number in the corner.
title
Type string
"Built for speed"
Heading under the gauge. Empty hides it.
description
Type string
"Every page scores in the high nineties."
Line under the title.
onComplete
Type () => void
–
Called each time the needle arrives at the value.
className
Type string
–
Classes for the card.