/
1.1k
Sponsor

Progress Circle

PreviousNext

Circular progress indicator using Unicode braille

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/progress-circle

Usage

import { ProgressCircle } from "@/components/ui/progress-circle";
<ProgressCircle value={75} size="sm" label="Memory" showPercent />

Examples

Sizes

Terminal
import { Box } from "@/components/ui/box";
import { ProgressCircle } from "@/components/ui/progress-circle";

export function ProgressCircleSizes() {
  return (
    <Box gap={2}>
      <ProgressCircle value={60} size="sm" />
      <ProgressCircle value={45} size="md" label="CPU" />
      <ProgressCircle value={88} size="lg" showPercent />
    </Box>
  );
}

API Reference

ProgressCircle

PropTypeDefault
valuenumberrequired
size"sm" | "md" | "lg""sm"
colorstring-
labelstring-
showPercentbooleanfalse