{"id":27452059,"url":"https://github.com/papermark/gauge-demo","last_synced_at":"2025-06-27T16:31:42.957Z","repository":{"id":188283301,"uuid":"678444464","full_name":"papermark/gauge-demo","owner":"papermark","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-02T05:54:54.000Z","size":116,"stargazers_count":132,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-10T03:32:48.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gauge-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/papermark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-14T15:08:55.000Z","updated_at":"2025-05-05T22:22:48.000Z","dependencies_parsed_at":"2024-11-20T11:01:18.979Z","dependency_job_id":null,"html_url":"https://github.com/papermark/gauge-demo","commit_stats":null,"previous_names":["mfts/gauge-demo","papermark/gauge-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/papermark/gauge-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/papermark%2Fgauge-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/papermark%2Fgauge-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/papermark%2Fgauge-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/papermark%2Fgauge-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/papermark","download_url":"https://codeload.github.com/papermark/gauge-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/papermark%2Fgauge-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262293043,"owners_count":23288650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-15T11:20:08.243Z","updated_at":"2025-06-27T16:31:42.932Z","avatar_url":"https://github.com/papermark.png","language":"TypeScript","readme":"# vercel/gauge\n\nThis is the open-source Tailwindcss version of Vercel's beautiful Gauge React component to indicate a status.\n\n![gauge demo image](.github/img/demo.png)\n## Demo\n\nView the demo here: https://gauge-demo.vercel.app\n\nView the original Vercel design system here: [Gauge](https://vercel.com/design/gauge)\n\n\n## Installation\n\n### Requirements\n\n- `tailwindcss`\n- `tailwindcss-animate`\n\n\nIt's pretty easy to install. I made it a standalone component that you can copy in your codebase.\n\n1. Copy the `gauge` component\n   ```sh\n   cp ./app/gauge.tsx your-project/components/gauge.tsx\n   ```\n\n   or go directly to it here: [gauge.tsx](https://github.com/mfts/gauge-demo/blob/main/app/gauge.tsx)\n   \n\n2. Add keyframes and animation to your `tailwind.config.ts`\n   ```ts\n   import type { Config } from 'tailwindcss'\n\n   const config: Config = {\n     content: [\n       \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n       \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n       \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n     ],\n     theme: {\n       extend: {\n         keyframes: {\n           gauge_fadeIn: {\n             from: { opacity: \"0\" },\n             to: { opacity: \"1\" },\n           },\n           gauge_fill: {\n             from: { \"stroke-dashoffset\": \"332\", opacity: \"0\" },\n             to: { opacity: \"1\" },\n           },\n         },\n         animation: {\n           gauge_fadeIn: \"gauge_fadeIn 1s ease forwards\",\n           gauge_fill: \"gauge_fill 1s ease forwards\",\n         },\n       },\n     },\n     plugins: [require(\"tailwindcss-animate\")],\n   };\n   export default config\n\n   ```\n\n3. Import into your page\n   ```ts\n   import { Gauge } from \"@/components/gauge\";\n\n   export default function Home() {\n     return (\n      \u003c\u003e\n        // ...\n        \u003cGauge value={80} size=\"small\" showValue={true} /\u003e\n        // ...\n      \u003c/\u003e\n     )\n   }\n   ```\n\n\n## API\n\nThe `Gauge` component takes three props: `value`, `size`, `showValue`.\n\n- `value`: a **number** from `0` to `100`\n- `size`: a **string** (\"small\", \"medium\", \"large\"). Defaults to: `\"small\"`\n- `color`: a **string** (all text- of tailwinds like text-green-500). Defaults to: `\"text-[hsla(131,41%,46%,1)]\"`\n- `bgColor`: a **string** (all text- of tailwinds like text-green-500). Defaults to: `\"text-[#333]\"`\n- `showValue`: a **boolean** to show the number inside the gauge or not. Defaults to: `true`\n\n\n## Inspiration\n\n- Thanks to the [@vercel](https://x.com/vercel) design team for the awesome component.\n- Thanks to [@shadcn](https://x.com/shadcn) who gave me a new joy for UI design.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpapermark%2Fgauge-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpapermark%2Fgauge-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpapermark%2Fgauge-demo/lists"}