Progress

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download progress -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Progress } from "@/components/ui/progress";
import * as UI from "@/components/ui/progress";

const Component = UI.Progress;

const args = {
  "modelValue": 33,
  "value": 33,
  "max": 100,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Progress class="w-[300px]" :model-value="args.value" :max="args.max" />
</template>

Examples

Default

<script setup lang="ts">
import { Progress } from "@/components/ui/progress";
import * as UI from "@/components/ui/progress";

const Component = UI.Progress;

const args = {
  "modelValue": 33,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Progress class="w-[300px]" v-bind="args" />
</template>

Values

<script setup lang="ts">
import { Progress } from "@/components/ui/progress";
import * as UI from "@/components/ui/progress";

const Component = UI.Progress;

const args = {
  "modelValue": 33,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex w-[300px] flex-col gap-4">
    <Progress :model-value="0" />
    <Progress :model-value="25" class="w-full" />
    <Progress :model-value="50" />
    <Progress :model-value="75" />
    <Progress :model-value="100" />
  </div>
</template>

With Label

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Progress } from "@/components/ui/progress";
import * as UI from "@/components/ui/progress";

const Component = UI.Progress;

const args = {
  "modelValue": 33,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Field class="w-[300px]">
    <FieldLabel html-for="progress-upload">
      <span>Upload progress</span>
      <span class="ml-auto">66%</span>
    </FieldLabel>
    <Progress id="progress-upload" :model-value="66" class="w-full" />
  </Field>
</template>

Controlled

<script setup lang="ts">
import { ref } from "vue";
import { Progress } from "@/components/ui/progress";
import { Slider } from "@/components/ui/slider";
import * as UI from "@/components/ui/progress";

const Component = UI.Progress;

const args = {
  "modelValue": 33,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref([50]);
</script>

<template>
  <div class="flex w-[300px] flex-col gap-4">
    <Progress :model-value="value[0]" class="w-full" />
    <Slider v-model="value" :min="0" :max="100" :step="1" />
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.