Circular Rings
Circular ring stats section with radial progress indicators.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stats | Array<{value: number, label: string, color?: string}> | [] | Array of stat items with value, label, and optional color. |
| backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
| circleBgColor | string | #333333 | Circle background color. |
| circleSize | number | 160 | Circle size in pixels. |
| circleRadius | number | 70 | Circle radius in pixels. |
| valueColor | string | #ffffff | Value text color. |
| labelColor | string | #a3a3a3 | Label text color. |
When to Use
Ideal for performance dashboards, fitness apps, and Next.js sites that want clear, percentage-based visual data. Use this React component for a stats section with radial progress indicators and vibrant ring animations.
Best Practices
Maintain consistent spacing within your design system by using it for circular-focused layouts. Follow React best practices by using high-contrast colors for the progress rings. Optimize for performance by managed the SVG stroke-dasharray animations.
Why This Component Matters
Circular indicators provide a fast, intuitive way for users to understand how close a project or metric is to reaching its goal. This production-ready UI component helpsคุณ build an interface that feels energetic and data-driven.
FAQ
QCan I customize the ring size?
Yes, the `circleSize` and `circleRadius` props allow you to adjust the physical scale and thickness of the progress indicators.
QDo the rings animate on load?
Yes, the progress bars animate from 0 to their specific value using smooth spring physics to create an engaging visual reveal.
QIs it good for non-percentage data?
While best for percentages, it can be used for any data point by adjusting the label and treating the 'full ring' as the metric's target.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.