Progress

Source code
import { Progress } from "rfui";

#Basic

<Progress value={40} />

#Size

You can also do something like class="!h-8" to set the height to a specific value.
<Stack class="gap-5">
  <Progress value={40} size="sm" />
  <Progress value={40} size="md" />
  <Progress value={40} size="lg" />
</Stack>

#Variant

<Stack class="gap-5">
  <Progress value={40} variant="neutral" />
  <Progress value={40} variant="info" />
  <Progress value={40} variant="success" />
  <Progress value={40} variant="warning" />
  <Progress value={40} variant="danger" />
</Stack>

#Props

PropRequiredDefaultType and notes
value✔-
number
The value should be a number between 0 and 100 and represents what percentage of the bar is full.
size-"md"
"sm" | "md" | "lg"
variant-"neutral"
"success" | "info" | "warning" | "danger" | "neutral"
...rest--
ComponentProps<"div">
See the docs for rest parameters. For Progress, you could pass anything you normally would pass to <div> because the container looks something like this:
<div class={className} {...restWithoutClass}>
  {children}
</div>