GitHub
Copy-pasteStyled

Progress

Show percent completion with a progress bar

Progress displays determinate completion with accessible values and independently styled track and indicator parts.

Features

Installation

Progress is already installed in tamagui, or you can install it independently:

yarn add @tamagui/progress

Usage

The value property controls the percent, but you can override it by adjusting the x property.

// copy-paste: these skins import from files you own. copy each registry item

// below into your app, then adjust the relative import paths to fit.

//   components/tamagui/Button.tsx (registry item "button")

//   components/tamagui/Progress.tsx (registry item "progress")

// npm dependencies: @tamagui/button @tamagui/core @tamagui/helpers-tamagui @tamagui/progress

import { Button } from "../components/tamagui/Button";

import { Progress } from "../components/tamagui/Progress";

export default () => <Progress value={60}>

    <Progress.Indicator transition="bouncy" />

  </Progress>;

API reference

Progress

Progress extends YStack, getting Tamagui standard props, plus:

Props

  • size

    'xs' | 'sm' | 'md' | 'lg' | 'xl' | SizeTokens | number

    A named size ("xs" to "xl", default true which matches "md") is a row in the track height table; a size token or number keeps the historical quarter-scale height.

  • value

    number | null

    Controls the percent progress.

  • max

    number

    Maximum value for calculating the percentage.

  • unstyled

    boolean

    When true, removes all default styles.

    • Progress.Indicator

    Progress.Indicator extends YStack, getting Tamagui standard props.

    Props

  • unstyled

    boolean

    When true, removes all default styles.

    • Source

    v2-look Progress: theme background on the track and indicator + pill radius on the track, over the unstyled @tamagui/ui Progress behavior (clip, size-derived track height, and the indeterminate/complete/loading state machine). Static: Progress.Indicator. This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/Progress.tsx
    // Styled Progress = the unstyled @tamagui/ui Progress behavior (the clip + the
// size-derived track height + the indeterminate/complete/loading state machine)
// + the default v2-look skin (theme background on the track and indicator, pill
// radius on the track). Single skin definition; the shadcn registry item is
// generated from this file.
import { type GetProps, styled, withStaticProperties } from '@tamagui/core'
import {
  Progress as UiProgress,
  ProgressIndicator as UiProgressIndicator,
  type ProgressExtraProps,
} from '@tamagui/progress'

export const ProgressIndicator = styled(UiProgressIndicator, {
  displayName: 'ProgressIndicator',
  backgroundColor: 'background',
})

const ProgressFrame = styled(UiProgress, {
  displayName: 'Progress',
  backgroundColor: 'background',
  borderRadius: 100_000,
})

export const Progress = withStaticProperties(ProgressFrame, {
  Indicator: ProgressIndicator,
})

export type ProgressProps = GetProps<typeof ProgressFrame> & ProgressExtraProps

    Dependencies

    yarn add @tamagui/core @tamagui/progress

    Expects theme tokens: background.

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    Label

    Next

    RadioGroup

    Edit this page on GitHub.