Gauge

Charts

Circular gauge/progress indicator with 5 intents, 3 sizes, label and value display.

Instalação via CLI

$ npx kikitocn add gauge

Interno:

@/lib/utils

Exemplo de uso

GaugeExample.tsx

import { Gauge } from "@/components/ui/cn/gauge/Gauge";

export function GaugeExample() {
  return (
    <Gauge />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value*`	`number`	—	Valor atual
`max`	`number`	`100`	Valor máximo
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do gauge
`intent`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Cor do arco via token de intent
`label`	`string`	`undefined`	Texto abaixo do valor
`showValue`	`boolean`	`true`	Exibe o valor percentual no centro

Carregando…