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. 6 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 6 imports 5 functions

Entity Profile

Dependency Diagram

graph LR
  5b2376b5_e2dc_e507_8f92_62432cce38bc["progress-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> f56be340_a522_c6f7_dec3_5906873d14c8
  7a5dd398_b998_b51b_8c79_de0334382819["item"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> 7a5dd398_b998_b51b_8c79_de0334382819
  1881f540_3221_f636_291b_1a91ce61da25["progress"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> 1881f540_3221_f636_291b_1a91ce61da25
  0df66f45_ffa5_8f45_8677_89f4ccd3d80d["slider"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> 0df66f45_ffa5_8f45_8677_89f4ccd3d80d
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  5b2376b5_e2dc_e507_8f92_62432cce38bc --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 5b2376b5_e2dc_e507_8f92_62432cce38bc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/registry/bases/base/ui/item"
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/registry/bases/base/ui/progress"
import { Slider } from "@/registry/bases/base/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">
      <Progress value={56}>
        <ProgressLabel>Upload progress</ProgressLabel>
        <ProgressValue />
      </Progress>
    </Example>
  )
}

// ... (83 more lines)

Domain

Subdomains

Functions

Dependencies

  • example
  • 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, UIPrimitives 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 6 module(s): example, icon-placeholder, item, progress, react, slider.
Where is progress-example.tsx in the architecture?
progress-example.tsx is located at apps/v4/registry/bases/base/examples/progress-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

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

Try Supermodel Free