ui Architecture Docs
Home / File/ progress.tsx — ui Source File

progress.tsx — ui Source File

Architecture documentation for progress.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 2 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  c2523511_cecd_14c9_3a80_d7d226be91b4["progress.tsx"]
  34d98e0a_e922_c5c9_492d_90378735cff2["progress"]
  c2523511_cecd_14c9_3a80_d7d226be91b4 --> 34d98e0a_e922_c5c9_492d_90378735cff2
  8ad666ec_1b20_adda_0392_87a60bdb3a68["utils"]
  c2523511_cecd_14c9_3a80_d7d226be91b4 --> 8ad666ec_1b20_adda_0392_87a60bdb3a68
  style c2523511_cecd_14c9_3a80_d7d226be91b4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Progress as ProgressPrimitive } from "@base-ui/react/progress"

import { cn } from "@/registry/bases/base/lib/utils"

function Progress({
  className,
  children,
  value,
  ...props
}: ProgressPrimitive.Root.Props) {
  return (
    <ProgressPrimitive.Root
      value={value}
      data-slot="progress"
      className={cn("cn-progress-root flex flex-wrap gap-3", className)}
      {...props}
    >
      {children}
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </ProgressPrimitive.Root>
  )
}

function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
  return (
    <ProgressPrimitive.Track
      className={cn(
        "cn-progress-track relative flex w-full items-center overflow-x-hidden",
        className
      )}
      data-slot="progress-track"
      {...props}
    />
  )
}

function ProgressIndicator({
  className,
  ...props
}: ProgressPrimitive.Indicator.Props) {
  return (
    <ProgressPrimitive.Indicator
      data-slot="progress-indicator"
      className={cn("cn-progress-indicator h-full transition-all", className)}
      {...props}
    />
  )
}

function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
  return (
    <ProgressPrimitive.Label
      className={cn("cn-progress-label", className)}
      data-slot="progress-label"
      {...props}
    />
  )
}

function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
  return (
    <ProgressPrimitive.Value
      className={cn("cn-progress-value", className)}
      data-slot="progress-value"
      {...props}
    />
  )
}

export {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
}

Domain

Subdomains

Functions

Dependencies

  • progress
  • utils

Source

Frequently Asked Questions

What does progress.tsx do?
progress.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in progress.tsx?
progress.tsx defines 5 function(s): Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue.
What does progress.tsx depend on?
progress.tsx imports 2 module(s): progress, utils.
Where is progress.tsx in the architecture?
progress.tsx is located at apps/v4/registry/bases/base/ui/progress.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free