Skip to content

Implement Progress component using Radix UI primitives#152

Draft
AzadZedan with Copilot wants to merge 2 commits into
mainfrom
copilot/add-progress-component
Draft

Implement Progress component using Radix UI primitives#152
AzadZedan with Copilot wants to merge 2 commits into
mainfrom
copilot/add-progress-component

Conversation

Copilot AI commented Mar 10, 2026

Copy link
Copy Markdown
Contributor

The Progress component in client/src/components/ui/progress.tsx was stubbed out — missing the generic type constraint and the JSX body entirely.

Changes

  • Type: Added React.ComponentProps<typeof ProgressPrimitive.Root> generic so all Radix Root props pass through correctly
  • Render: Implemented the full JSX using ProgressPrimitive.Root + ProgressPrimitive.Indicator, with a translateX transform to animate fill based on value
function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  );
}

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: AzadZedan <172204218+AzadZedan@users.noreply.github.com>
Copilot AI changed the title [WIP] Add progress component using Radix UI Implement Progress component using Radix UI primitives Mar 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants