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

progress-example.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 7 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  cb6cccb8_6779_b921_ccc5_527b586620b1["progress-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  80f09e68_7e3a_76ef_6b82_c72b6d39afbb["item"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> 80f09e68_7e3a_76ef_6b82_c72b6d39afbb
  28a5262e_a313_016d_3376_384962fb557d["progress"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> 28a5262e_a313_016d_3376_384962fb557d
  04c1627f_d93a_cdec_fb9b_d5d2a1e076a4["slider"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> 04c1627f_d93a_cdec_fb9b_d5d2a1e076a4
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  cb6cccb8_6779_b921_ccc5_527b586620b1 --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style cb6cccb8_6779_b921_ccc5_527b586620b1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { Field, FieldLabel } from "@/registry/bases/radix/ui/field"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/registry/bases/radix/ui/item"
import { Progress } from "@/registry/bases/radix/ui/progress"
import { Slider } from "@/registry/bases/radix/ui/slider"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export default function ProgressExample() {
  return (
    <ExampleWrapper>
      <ProgressValues />
      <ProgressWithLabel />
      <ProgressControlled />
      <FileUploadList />
    </ExampleWrapper>
  )
}

function ProgressValues() {
  return (
    <Example title="Progress Bar">
      <div className="flex w-full flex-col gap-4">
        <Progress value={0} />
        <Progress value={25} className="w-full" />
        <Progress value={50} />
        <Progress value={75} />
        <Progress value={100} />
      </div>
    </Example>
  )
}

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

// ... (83 more lines)

Domain

Subdomains

Functions

Dependencies

  • example
  • field
  • icon-placeholder
  • item
  • progress
  • react
  • slider

Source

Frequently Asked Questions

What does progress-example.tsx do?
progress-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in progress-example.tsx?
progress-example.tsx defines 5 function(s): FileUploadList, ProgressControlled, ProgressExample, ProgressValues, ProgressWithLabel.
What does progress-example.tsx depend on?
progress-example.tsx imports 7 module(s): example, field, icon-placeholder, item, progress, react, slider.
Where is progress-example.tsx in the architecture?
progress-example.tsx is located at apps/v4/registry/bases/radix/examples/progress-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free