var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var P=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var s in e)i(n,s,{get:e[s],enumerable:!0})},F=(n,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!B.call(n,r)&&r!==s&&i(n,r,{get:()=>e[r],enumerable:!(c=D(e,r))||c.enumerable});return n};var v=(n,e,s)=>(s=n!=null?u(N(n)):{},F(e||!n||!n.__esModule?i(s,"default",{value:n,enumerable:!0}):s,n)),C=n=>F(i({},"__esModule",{value:!0}),n);var m=P((w,y)=>{y.exports=_jsx_runtime});var x={};_(x,{default:()=>g,frontmatter:()=>R});var l=v(m()),R={title:"Progress",description:"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",component:!0,links:{doc:"https://radix-ui.com.cn/docs/primitives/components/progress",api:"https://radix-ui.com.cn/docs/primitives/components/progress#api-reference"}};function E(n){let e={a:"a",code:"code",div:"div",h2:"h2",pre:"pre",span:"span",...n.components},{CodeTabs:s,ComponentPreview:c,ComponentSource:r,Step:a,Steps:p,TabsContent:t,TabsList:h,TabsTrigger:d}=e;return s||o("CodeTabs",!0),c||o("ComponentPreview",!0),r||o("ComponentSource",!0),a||o("Step",!0),p||o("Steps",!0),t||o("TabsContent",!0),h||o("TabsList",!0),d||o("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(c,{name:"progress-demo",description:"A progress bar component.",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { Progress } from "@/components/ui/progress" export function ProgressDemo() { const [progress, setProgress] = React.useState(13) React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500) return () => clearTimeout(timer) }, []) return } `,__src__:"registry/new-york/examples/progress-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/progress"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" timer"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(timer)"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[60%]"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { Progress } from "@/components/ui/progress" export function ProgressDemo() { const [progress, setProgress] = React.useState(13) React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500) return () => clearTimeout(timer) }, []) return } `,__src__:"registry/default/examples/progress-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/progress"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ProgressDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"13"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" timer"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" setTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" setProgress"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"66"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"), "}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" clearTimeout"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(timer)"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"progress"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-[60%]"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(s,{children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(d,{value:"cli",children:"CLI"}),(0,l.jsx)(d,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add progress `,__npmCommand__:`npx shadcn@latest add progress `,__yarnCommand__:`npx shadcn@latest add progress `,__pnpmCommand__:`pnpm dlx shadcn@latest add progress `,__bunCommand__:`bunx --bun shadcn@latest add progress `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" progress"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(a,{children:"Install the following dependencies:"}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-progress `,__npmCommand__:`npm install @radix-ui/react-progress `,__yarnCommand__:`yarn add @radix-ui/react-progress `,__pnpmCommand__:`pnpm add @radix-ui/react-progress `,__bunCommand__:`bun add @radix-ui/react-progress `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" @radix-ui/react-progress"})]})})})}),(0,l.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(r,{name:"progress",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } `,__src__:"registry/new-york/ui/progress.tsx",__style__:"new-york",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ProgressPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-progress"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" Progress"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"ProgressPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-full w-full flex-1 bg-primary transition-all"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" style"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"{ transform: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"`translateX(-${"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" -"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ||"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"}%)`"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"Progress.displayName "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ProgressPrimitive.Root.displayName"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Progress }"})]})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } `,__src__:"registry/default/ui/progress.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ProgressPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-progress"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" Progress"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"ProgressPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "relative h-4 w-full overflow-hidden rounded-full bg-secondary"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"ProgressPrimitive.Indicator"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-full w-full flex-1 bg-primary transition-all"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" style"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"{ transform: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"`translateX(-${"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" -"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ||"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" 0"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:"}%)`"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"Progress.displayName "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ProgressPrimitive.Root.displayName"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Progress }"})]})]})})})]}),(0,l.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Progress } from "@/components/ui/progress" `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Progress } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/progress"'})]})})})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Progress"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:"33"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]})})})})]})}function g(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(E,{...n})}):E(n)}function o(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(x);})(); ;return Component;

进度条

安装

用法