Card

CardProgressCircle

Compact card showing a circular progress indicator alongside a label and value.

CardProgressCircle

Compact card pairing a XAChartProgressCircle ring with a text label and formatted value.

Component

`<XACardProgressCircle />`

Compact card pairing a XAChartProgressCircle with a text label and formatted value.

<XACardProgressCircle
  label="Task Completion"
  value="48 / 60"
  :progress="80"
/>

Props

Prop	Type	Default	Description
`label`	`string`	—	Required. Card label.
`value`	`number \| string`	—	Required. Displayed value text.
`progress`	`number`	—	Required. Circle fill percentage (0–100).
`color`	`string`	`undefined`	Custom circle color.

AI Context

component: XACardProgressCircle
package: "@xenterprises/nuxt-x-app"
use-when: Showing a single metric as a circular progress ring alongside a label and value — task completion, goal progress, etc. Uses XAChartProgressCircle internally; pass progress as 0–100.

Edit this pageorReport an issue

CardKpiSimple

Compact KPI card with currency formatting, trend indicator, and optional budget progress bar.

CardStat

Single-metric stat card with value formatting, trend badge, icon, and optional color theming.