Usage Meter

이번 달 사용량을 막대와 설명으로 보여주는 카드입니다.

@horon-ai/react 표시 Storybook ↗

Preview

Usage this month

6,420 of 10,000 tasksResets Nov 1

Usage

tsx

import { UsageMeter } from "@horon-ai/react";

export default function UsageMeterDemo() {
  return (
    <>
      <UsageMeter label="Usage this month" value={64} detail="6,420 of 10,000 tasks" note="Resets Nov 1" />
    </>
  );
}