Skill Bar

Charts

Animated horizontal skill/progress bars with labels, values, intents and sub-labels.

Instalação via CLI

$ npx kikitocn add skill-bar

Interno:

@/lib/utils

Exemplo de uso

Skill BarExample.tsx

import { SkillBar } from "@/components/ui/cn/skill-bar/SkillBar";

export function SkillBarExample() {
  return (
    <SkillBar />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`skills*`	`SkillItem[]`	—	Lista de habilidades: { label, value, max?, intent?, sublabel? }
`animate`	`boolean`	`true`	Anima o preenchimento ao entrar na viewport
`showValues`	`boolean`	`true`	Exibe percentual à direita de cada barra
`height`	`number`	`8`	Espessura das barras em px
`intent`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'secondary'`	`'primary'`	Intent padrão para barras sem intent próprio

Carregando…