Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

import * as React from "react"
import { Progress } from "uilab-core"

export function ProgressPreview() {
  const [progress, setProgress] = React.useState(13)

Usage

import { Progress } from "@/components/ui/progress"

<Progress value={33} />

Examples

Label

Use ProgressLabel and ProgressValue to add a label and value display.

Upload progress

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "uilab-core"

Controlled

A progress bar that can be controlled by a slider.

import * as React from "react"
import { Progress, Slider } from "uilab-core"

export function ProgressControlledExample() {
  const [value, setValue] = React.useState(50)

Popover

Displays rich content in a portal, triggered by a button.

Questionnaire

A step-by-step form that shows one question at a time, with choices, text answers, keyboard shortcuts and progress.

Progress

UsageCopy Anchor Link

ExamplesCopy Anchor Link

LabelCopy Anchor Link

ControlledCopy Anchor Link

On this page

Usage

Examples

Label

Controlled