ComponentsCore
Percentage
A percentage represents a quantity within a known range, or a fractional value.
Example
Usage
Features
The <meter> HTML element can be used to build a meter, however it is very difficult to style cross browser. Meter helps achieve accessible meters that can be styled as needed.
- Accessible – Follows the ARIA meter pattern, with fallback to progressbar where unsupported. A nested label is automatically associated with the meter semantically.
- International – The value is formatted as a percentage or custom format according to the user's locale.
Installation
Required Component
This component depends on Field. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add percentageAnatomy
import { Percentage } from "@/components/ui/core/percentage";<Percentage label="Memory usage" value={87} />Another Examples
Format Options
Usage
Value Label
Usage
Props
Loading types…