Minimal Scale
Minimal scale stats section with clean design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stats | Array<{label: string, value: number}> | [] | Array of stat items with label and value. |
| backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
| labelColor | string | #737373 | Label text color. |
| labelHoverColor | string | #000000 | Label text color on hover. |
| valueColor | string | #000000 | Value text color. |
| borderColor | string | #e5e5e5 | Border color. |
| rowBgColor | string | #ffffff | Row background color. |
| rowHoverBgColor | string | #f5f5f5 | Row hover background color. |
When to Use
Perfect for minimalist blogs, editorial portfolios, and Next.js applications that want a clean, type-focused aesthetic. Use this React component for a minimal scale stats section with smooth row transitions and subtle border highlights.
Best Practices
Follow React best practices by pairing this with bold, high-contrast typography. Maintain consistent spacing within your design system by using it on light, neutral backgrounds. Optimize for performance by using efficient state management for the transitions.
Why This Component Matters
Clean typography focuses the user's entire attention on the numbers. This production-ready UI component helpsคุณ build an interface that feels sincere and authoritative, without distracting from the message.
FAQ
QHow does the hover effect work?
Each metric row features a subtle background shift and text color transition to indicate the user's focus.
QCan I add more metrics?
The component is built to handle a vertical list of stats, making it extremely scalable for long data summaries.
QIs it mobile responsive?
The layout automatically adjusts for smaller screens, ensuring the labels and values remain aligned and legible.
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.