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

spinner-example.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 8 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b["spinner-example.tsx"]
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  452eda35_d2bf_4302_cb12_371f9f01e11b["badge"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> 452eda35_d2bf_4302_cb12_371f9f01e11b
  381135fe_5f7a_910a_b8a2_691e9756a016["button"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> 381135fe_5f7a_910a_b8a2_691e9756a016
  60e5614f_5f22_4214_bc6f_532cdf848a85["empty"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> 60e5614f_5f22_4214_bc6f_532cdf848a85
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  0933745b_84d7_328d_17fd_7868edde7274["input-group"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> 0933745b_84d7_328d_17fd_7868edde7274
  55533227_de3b_bbfa_a2c3_fbf8c5498526["spinner"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> 55533227_de3b_bbfa_a2c3_fbf8c5498526
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 4ac68bc1_b25c_7adb_9fd5_bca11a39fe5b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { Badge } from "@/registry/bases/radix/ui/badge"
import { Button } from "@/registry/bases/radix/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/registry/bases/radix/ui/empty"
import { Field, FieldLabel } from "@/registry/bases/radix/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/registry/bases/radix/ui/input-group"
import { Spinner } from "@/registry/bases/radix/ui/spinner"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export default function SpinnerExample() {
  return (
    <ExampleWrapper>
      <SpinnerBasic />
      <SpinnerInButtons />
      <SpinnerInBadges />
      <SpinnerInInputGroup />
      <SpinnerInEmpty />
    </ExampleWrapper>
  )
}

function SpinnerBasic() {
  return (
    <Example title="Basic">
      <div className="flex items-center gap-6">
        <Spinner />
        <Spinner className="size-6" />
      </div>
    </Example>
  )
}

function SpinnerInButtons() {
  return (
    <Example title="In Buttons">
      <div className="flex flex-wrap items-center gap-4">
        <Button>
          <Spinner data-icon="inline-start" /> Submit
        </Button>
        <Button disabled>
          <Spinner data-icon="inline-start" /> Disabled
        </Button>
        <Button variant="outline" disabled>
          <Spinner data-icon="inline-start" /> Outline
        </Button>
        <Button variant="outline" size="icon" disabled>
// ... (88 more lines)

Domain

Subdomains

Functions

Dependencies

  • badge
  • button
  • empty
  • example
  • field
  • icon-placeholder
  • input-group
  • spinner

Source

Frequently Asked Questions

What does spinner-example.tsx do?
spinner-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 spinner-example.tsx?
spinner-example.tsx defines 6 function(s): SpinnerBasic, SpinnerExample, SpinnerInBadges, SpinnerInButtons, SpinnerInEmpty, SpinnerInInputGroup.
What does spinner-example.tsx depend on?
spinner-example.tsx imports 8 module(s): badge, button, empty, example, field, icon-placeholder, input-group, spinner.
Where is spinner-example.tsx in the architecture?
spinner-example.tsx is located at apps/v4/registry/bases/radix/examples/spinner-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