Progress

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

Preview

Code

'use client'

import Progress from '@dinui/react/progress'
import * as React from 'react'

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

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add progress

   yarn

   yarn dlx @dinui/cli@latest add progress

   pnpm

   pnpm dlx @dinui/cli@latest add progress

   bun

   bunx @dinui/cli@latest add progress

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-progress tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-progress tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-progress tailwind-variants type-fest

   bun

   bun add @radix-ui/react-progress tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as ProgressPrimitive from '@radix-ui/react-progress'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const progress = tv({
     slots: {
       root: 'relative overflow-hidden h-2 rounded-full bg-bg--muted',
       indicator: 'transition-all h-full bg-fg-brand rounded-full',
     },
   })
   
   const Progress = forwardRef<
     React.ElementRef<typeof ProgressPrimitive.Root>,
     Merge<
       React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
       {
         indicatorProps?: React.ComponentProps<typeof ProgressPrimitive.Indicator>
       }
     >
   >(({ indicatorProps, value, ...props }, ref) => {
     const { root, indicator } = progress()
   
     return (
       <ProgressPrimitive.Root
         {...props}
         ref={ref}
         value={value}
         className={root({ className: props.className })}
       >
         <ProgressPrimitive.Indicator
           {...indicatorProps}
           className={indicator({ className: indicatorProps?.className })}
           style={{
             ...indicatorProps?.style,
             transform: `translateX(-${100 - (value || 0)}%)`,
           }}
         />
       </ProgressPrimitive.Root>
     )
   })
   Progress.displayName = ProgressPrimitive.Root.displayName
   
   export default Progress
   export { progress, ProgressPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.