9b:I[909850,["/_next/static/chunks/3-oldppc3cdn0.js","/_next/static/chunks/07ksm9-2ekd62.js","/_next/static/chunks/2g7jfqd9--bun.js","/_next/static/chunks/31kgouwxgdz30.js","/_next/static/chunks/0g_a--dgm_vx2.js","/_next/static/chunks/0wj_p_e20bygd.js","/_next/static/chunks/305fbm9-2kylm.js","/_next/static/chunks/35ku5yjbif25o.js","/_next/static/chunks/03gf-5_c1fhpw.js","/_next/static/chunks/0yra0wnwx6l3y.js","/_next/static/chunks/3mtcx1om0ufpk.js","/_next/static/chunks/0k7q93e3jov37.js","/_next/static/chunks/408vo-7izisls.js","/_next/static/chunks/1ra6b9l59hs1t.js","/_next/static/chunks/2lwbc7vr4n8gq.js","/_next/static/chunks/0vp4x8w8o2hc0.js","/_next/static/chunks/3cr3crpounju2.js","/_next/static/chunks/1td2r-9vo6pv5.js","/_next/static/chunks/20nvv431kujy3.js","/_next/static/chunks/0qe44_nk5f1zl.js","/_next/static/chunks/3nek2irthlc56.js","/_next/static/chunks/1f728deqjx2kz.js","/_next/static/chunks/18ajxbukqmopy.js","/_next/static/chunks/14mx-7p2q8y0b.js","/_next/static/chunks/20j41d7wd_sgo.js","/_next/static/chunks/23r04i55wnixy.js","/_next/static/chunks/2l8-oz74fa5ys.js","/_next/static/chunks/1af31cvxear8z.js","/_next/static/chunks/2eh1ne0xb6kel.js","/_next/static/chunks/1ms3so6ygrwar.js","/_next/static/chunks/42f3hommd-f3y.js","/_next/static/chunks/03s3pyenxnlya.js","/_next/static/chunks/1ihpugza2t6wp.js","/_next/static/chunks/2wlts9-d0fa8u.js","/_next/static/chunks/3wi8euz-zkel1.js","/_next/static/chunks/2xq470ey5-_lv.js","/_next/static/chunks/15w0zamt-sx0w.js","/_next/static/chunks/061nrwy7lfrr-.js","/_next/static/chunks/3us0tz8jgphgq.js","/_next/static/chunks/0pabg5jfcnriw.js","/_next/static/chunks/0bopwm34i7qq_.js","/_next/static/chunks/2ui0n41adci0h.js","/_next/static/chunks/07p56pwlf35-y.js","/_next/static/chunks/1vxnv67d7o8bj.js","/_next/static/chunks/0qnnlmu6qegbf.js","/_next/static/chunks/1rx6j5ec1e82z.js","/_next/static/chunks/07_9r9sz2g-x9.js","/_next/static/chunks/3_wfm093s4i0l.js","/_next/static/chunks/27m8-9kdgmv5-.js","/_next/static/chunks/2xd8zn4xsgv21.js","/_next/static/chunks/34-__-f_nugob.js","/_next/static/chunks/2dmx9eb8vn82s.js","/_next/static/chunks/2-znpd_m4tjmb.js","/_next/static/chunks/0i_kavar-12o-.js","/_next/static/chunks/39_vlg9zlrjtt.js","/_next/static/chunks/43g2v53fjy-xr.js","/_next/static/chunks/3lxsum0ik646y.js","/_next/static/chunks/226rudjv28qpw.js","/_next/static/chunks/1_78y4ocj8so4.js","/_next/static/chunks/2iovnmi2snpvb.js","/_next/static/chunks/3q95ud_qna442.js","/_next/static/chunks/3drn-i4ns1ejw.js","/_next/static/chunks/1twt84sc4-ltn.js","/_next/static/chunks/1ofk7fxn2ap85.js","/_next/static/chunks/273y382-ir8z9.js","/_next/static/chunks/40dmkeri0spkb.js","/_next/static/chunks/2gtvdrrwedb1r.js","/_next/static/chunks/12srbch7k-eze.js","/_next/static/chunks/1z73ew93q6a41.js","/_next/static/chunks/0wkdc4utnv_ti.js","/_next/static/chunks/2ibgtc36h_5pa.js","/_next/static/chunks/3iz1h_39iuzrk.js","/_next/static/chunks/0g20qq0t0gp06.js","/_next/static/chunks/349v30kq-bc42.js","/_next/static/chunks/0jory6vqhsq7p.js","/_next/static/chunks/0yv6gsuojapf3.js","/_next/static/chunks/11b_g6-m7flig.js","/_next/static/chunks/2p6vpq4xewuxu.js","/_next/static/chunks/2peg5doc0hze9.js","/_next/static/chunks/20s1bpchvmdwd.js","/_next/static/chunks/2oo16dwv5pyxt.js","/_next/static/chunks/2-idflq01vgp3.js","/_next/static/chunks/1tf3jwzn01hji.js","/_next/static/chunks/09tuq-df7q4ee.js","/_next/static/chunks/38r70eu8b0onq.js","/_next/static/chunks/2ko58wmnij6u2.js","/_next/static/chunks/3nu5uoszutw74.js","/_next/static/chunks/2-jpc5jqda0jm.js","/_next/static/chunks/2r4lqwybybq1x.js","/_next/static/chunks/393wg5igw4_z0.js","/_next/static/chunks/14ommr7mug_kh.js","/_next/static/chunks/340emax6-2q3d.js","/_next/static/chunks/0mmlrphq7bx7o.js","/_next/static/chunks/1bhj4t4poi1cm.js","/_next/static/chunks/1ti8cx6_hl0hv.js","/_next/static/chunks/3uipf5q6w14eo.js","/_next/static/chunks/0oo0d1qoxv4t_.js","/_next/static/chunks/2f7drku6salwi.js","/_next/static/chunks/1twnjg80ckh77.js","/_next/static/chunks/0q2uz3_g8i4w9.js","/_next/static/chunks/0fsg19a662tv4.js"],"CodeCollapsibleWrapper"] 98:T420,

import { Field, FieldLabel } from "@/components/ui/field"
import { Progress } from "@/components/ui/progress"

8e:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Progress } from \"@/components/ui/progress\"\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$98"}}]]}]}] 99:T1244,

import { Field, FieldLabel } from "@/components/ui/field"
import { Progress } from "@/components/ui/progress"

export function ProgressWithLabel() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel htmlFor="progress-upload">
        <span>Upload progress</span>
        <span className="ml-auto">66%</span>
      </FieldLabel>
      <Progress value={66} id="progress-upload" />
    </Field>
  )
}

8d:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"import { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Progress } from \"@/components/ui/progress\"\n\nexport function ProgressWithLabel() {\n return (\n \n \n Upload progress\n 66%\n \n \n \n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$99"}}]]}]}] 91:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"\"use client\"\n\nimport * as React from \"react\""}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"

\"use client\"\n\nimport * as React from \"react\"

"}}]]}]}] 9a:T1788,

"use client"

import * as React from "react"

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

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

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Progress value={value[0]} />
      <Slider
        value={value}
        onValueChange={setValue}
        min={0}
        max={100}
        step={1}
      />
    </div>
  )
}

90:["$","div",null,{"className":"relative","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":["$undefined",["$","$L8b",null,{"value":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/components/ui/progress\"\nimport { Slider } from \"@/components/ui/slider\"\n\nexport function ProgressControlled() {\n const [value, setValue] = React.useState([50])\n\n return (\n

\n \n \n

\n )\n}\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9a"}}]]}]}] 9c:T49c,M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z9d:T1b82,

"use client"

import * as React from "react"
import { cn } from "cn"
import { Progress as ProgressPrimitive } from "radix-ui"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-hover",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 rounded-full bg-foreground transition-all duration-moderate ease-spring"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

8a:["$","$L9b",null,{"className":"$undefined","children":["$","figure",null,{"data-rehype-pretty-code-figure":"","className":"[&>pre]:max-h-96","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","className":"flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70","data-language":"tsx","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-foreground","children":["$","path",null,{"d":"$9c"}]}],"components/ui/progress.tsx"]}],["$","$L8b",null,{"value":"\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nfunction Progress({\n className,\n value,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport { Progress }\n"}],["$","div",null,{"data-not-typeset":true,"dangerouslySetInnerHTML":{"__html":"$9d"}}]]}]}]

Search documentation

Installation#

Usage#

Label#

Controlled#

API Reference#

Installation

Usage

Label

Controlled

API Reference