https://github.com/suyalcinkaya/gauge

An aesthetic and customizable circular visual component for React.
https://github.com/suyalcinkaya/gauge

circular gauge progress react

Last synced: about 1 year ago
JSON representation

An aesthetic and customizable circular visual component for React.

• Host: GitHub
• URL: https://github.com/suyalcinkaya/gauge
• Owner: suyalcinkaya
• License: mit
• Created: 2024-05-05T22:23:30.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-27T04:15:22.000Z (about 1 year ago)
• Last Synced: 2025-03-31T22:23:57.770Z (about 1 year ago)
• Topics: circular, gauge, progress, react
• Language: TypeScript
• Homepage: https://gauge.onur.dev
• Size: 1.01 MB
• Stars: 281
• Watchers: 1
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
![screenshot](apps/website/public/og-image.png)

# Gauge [![@suyalcinkaya/gauge minzip package size](https://img.shields.io/bundlephobia/minzip/@suyalcinkaya/gauge)](https://www.npmjs.com/package/@suyalcinkaya/gauge?activeTab=code) [![@suyalcinkaya/gauge package version](https://img.shields.io/npm/v/@suyalcinkaya/gauge.svg?colorB=green)](https://www.npmjs.com/package/@suyalcinkaya/gauge) ![@suyalcinkaya/gauge NPM Downloads](https://img.shields.io/npm/dm/%40suyalcinkaya%2Fgauge) ![@suyalcinkaya/gauge GitHub License](https://img.shields.io/github/license/suyalcinkaya/gauge)

[Gauge](https://gauge.onur.dev/) is an aesthetic and customizable circular visual component for React.

Examples and playground: [https://gauge.onur.dev](https://gauge.onur.dev)

## Documentation

Find the full API reference in the [documentation](https://gauge.onur.dev/api).

## Install

```bash

pnpm install @suyalcinkaya/gauge

```

## Use

```tsx

import { Gauge } from '@suyalcinkaya/gauge'

export function Component(): JSX.Element {

  return 

}

```

## Development

### Installation

The Gauge repository uses [pnpm Workspaces](https://pnpm.io/workspaces) and [Turborepo](https://github.com/vercel/turborepo). To install dependencies, run `pnpm install` in the project root directory.

```bash

pnpm install

```

### Build Gauge

```bash

cd packages/gauge

pnpm build

```

Watch mode: `pnpm dev`

### Development

You can also debug it with the website app locally. For instance; to start `apps/website` locally, run the following command in the project root directory.

```bash

pnpm dev

```

Check [localhost:3000](http://localhost:3000) to see the website app.

## Inspiration & Credits

Inspired by [Geist Design System](https://vercel.com/geist/gauge) from the Vercel team and by [geist-gauge](https://geist-gauge.vercel.app) from Ajay.