dashboardcn
1

Tick Bar

A progress bar drawn as a row of ticks, lit up to the current value.

import { TickBar } from "@/components/ui/tick-bar"

export default function TickBarDemo() {

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/tick-bar.json

Usage

import { TickBar } from "@/components/ui/tick-bar"

<TickBar value={46} color="var(--color-emerald-500)" />
<TickBar value={7420} max={12300} segments={40} />
<TickBar value={16} max={24} segments={24} shape="pill" />