Progress

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/progress.json

Usage

<script lang="ts">
  import * as Progress from "$lib/components/ui/progress/index.js";
</script>

<Progress.Root value={40} />

If you render children inside Progress.Root, include Progress.Track and Progress.Indicator. Without them, the bar will not display. When no children are provided, the root renders a default track and indicator.

API Reference

Progress.Root

Root component. Styled wrapper for Progress.Root from Shards UI. When no children are provided, it renders a track and indicator.

Progress.Track

Track container for the progress indicator. Styled wrapper for Progress.Track from Shards UI.

Progress.Indicator

Visual indicator showing the current progress. Styled wrapper for Progress.Indicator from Shards UI.

Progress.Label

Label text for the progress bar. Styled wrapper for Progress.Label from Shards UI.

Progress.Value

Displays the current value. Styled wrapper for Progress.Value from Shards UI.

See the Shards Progress API for value formatting, status, and primitive props.