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

index.tsx — ui Source File

Architecture documentation for index.tsx, a tsx file in the ui codebase. 33 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 33 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  53860de0_4d86_dc1d_c85a_07c01f0d1a07["index.tsx"]
  c89e98dc_cf11_cf26_f5f8_e583815ecf63["appearance-settings.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> c89e98dc_cf11_cf26_f5f8_e583815ecf63
  8bc246b4_6f2b_aa0d_96fb_e983164020a3["AppearanceSettings"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 8bc246b4_6f2b_aa0d_96fb_e983164020a3
  2d3dc754_5c8f_7355_d3f7_8890873ee0f7["button-group-demo.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 2d3dc754_5c8f_7355_d3f7_8890873ee0f7
  9e97d1ba_95cf_cba7_854b_698aed668748["ButtonGroupDemo"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 9e97d1ba_95cf_cba7_854b_698aed668748
  0779e9e9_46ad_e823_893b_e4dce92c2f63["button-group-input-group.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 0779e9e9_46ad_e823_893b_e4dce92c2f63
  e23995c4_cbfa_42c7_6408_6b30a7269d19["ButtonGroupInputGroup"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> e23995c4_cbfa_42c7_6408_6b30a7269d19
  990528c0_8fb0_6dac_80fe_99168667f05d["button-group-nested.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 990528c0_8fb0_6dac_80fe_99168667f05d
  5c479679_c517_10a3_0cd9_dadead3897fb["ButtonGroupNested"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 5c479679_c517_10a3_0cd9_dadead3897fb
  7d16561a_b95f_17c9_e503_180b6ee967e3["button-group-popover.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 7d16561a_b95f_17c9_e503_180b6ee967e3
  66044eb1_2fae_d207_3069_a42761bdf20c["ButtonGroupPopover"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 66044eb1_2fae_d207_3069_a42761bdf20c
  c0b53f3b_7b77_55d9_8960_38b71c350d92["empty-avatar-group.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> c0b53f3b_7b77_55d9_8960_38b71c350d92
  b223c670_791a_9628_4019_c28522049bb2["EmptyAvatarGroup"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> b223c670_791a_9628_4019_c28522049bb2
  8de3f498_e877_0aad_280e_d6e63a8f1711["field-checkbox.tsx"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> 8de3f498_e877_0aad_280e_d6e63a8f1711
  aa037720_8011_266f_3a59_4588ad03bbfc["FieldCheckbox"]
  53860de0_4d86_dc1d_c85a_07c01f0d1a07 --> aa037720_8011_266f_3a59_4588ad03bbfc
  style 53860de0_4d86_dc1d_c85a_07c01f0d1a07 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { FieldSeparator } from "@/examples/radix/ui/field"

import { AppearanceSettings } from "./appearance-settings"
import { ButtonGroupDemo } from "./button-group-demo"
import { ButtonGroupInputGroup } from "./button-group-input-group"
import { ButtonGroupNested } from "./button-group-nested"
import { ButtonGroupPopover } from "./button-group-popover"
import { EmptyAvatarGroup } from "./empty-avatar-group"
import { FieldCheckbox } from "./field-checkbox"
import { FieldDemo } from "./field-demo"
import { FieldHear } from "./field-hear"
import { FieldSlider } from "./field-slider"
import { InputGroupButtonExample } from "./input-group-button"
import { InputGroupDemo } from "./input-group-demo"
import { ItemDemo } from "./item-demo"
import { NotionPromptForm } from "./notion-prompt-form"
import { SpinnerBadge } from "./spinner-badge"
import { SpinnerEmpty } from "./spinner-empty"

export function RootComponents() {
  return (
    <div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <FieldDemo />
      </div>
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <EmptyAvatarGroup />
        <SpinnerBadge />
        <ButtonGroupInputGroup />
        <FieldSlider />
        <InputGroupDemo />
      </div>
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <InputGroupButtonExample />
        <ItemDemo />
        <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
        <AppearanceSettings />
      </div>
      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
        <NotionPromptForm />
        <ButtonGroupDemo />
        <FieldCheckbox />
        <div className="flex justify-between gap-4">
          <ButtonGroupNested />
          <ButtonGroupPopover />
        </div>
        <FieldHear />
        <SpinnerEmpty />
      </div>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does index.tsx do?
index.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in index.tsx?
index.tsx defines 1 function(s): RootComponents.
What does index.tsx depend on?
index.tsx imports 33 module(s): AppearanceSettings, ButtonGroupDemo, ButtonGroupInputGroup, ButtonGroupNested, ButtonGroupPopover, EmptyAvatarGroup, FieldCheckbox, FieldDemo, and 25 more.
What files import index.tsx?
index.tsx is imported by 1 file(s): page.tsx.
Where is index.tsx in the architecture?
index.tsx is located at apps/v4/app/(app)/(root)/components/index.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(app)/(root)/components).

Analyze Your Own Codebase

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

Try Supermodel Free