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

collapsible-example.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 9 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  9c2f8751_9cee_835d_4c31_60aeed473c38["collapsible-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  381135fe_5f7a_910a_b8a2_691e9756a016["button"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> 381135fe_5f7a_910a_b8a2_691e9756a016
  11818bc0_4ad2_fa77_9175_f5c44c22af5e["card"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> 11818bc0_4ad2_fa77_9175_f5c44c22af5e
  6446fa60_a046_3422_5dd0_2a98daa65df9["collapsible"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> 6446fa60_a046_3422_5dd0_2a98daa65df9
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  dc919c5d_820f_f2af_7ccd_a07763a51161["input"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> dc919c5d_820f_f2af_7ccd_a07763a51161
  04ba6674_152b_cdef_6cfe_788b915d323b["tabs"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> 04ba6674_152b_cdef_6cfe_788b915d323b
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  9c2f8751_9cee_835d_4c31_60aeed473c38 --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 9c2f8751_9cee_835d_4c31_60aeed473c38 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 { Button } from "@/registry/bases/radix/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/bases/radix/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/registry/bases/radix/ui/collapsible"
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
import { Input } from "@/registry/bases/radix/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/radix/ui/tabs"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export default function CollapsibleExample() {
  return (
    <ExampleWrapper>
      <CollapsibleFileTree />
      <CollapsibleSettings />
    </ExampleWrapper>
  )
}

type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }

function CollapsibleFileTree() {
  const fileTree: FileTreeItem[] = [
    {
      name: "components",
      items: [
        {
          name: "ui",
          items: [
            { name: "button.tsx" },
            { name: "card.tsx" },
            { name: "dialog.tsx" },
            { name: "input.tsx" },
            { name: "select.tsx" },
            { name: "table.tsx" },
          ],
        },
        { name: "login-form.tsx" },
        { name: "register-form.tsx" },
      ],
    },
    {
      name: "lib",
      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
// ... (180 more lines)

Domain

Subdomains

Functions

Types

Dependencies

  • button
  • card
  • collapsible
  • example
  • field
  • icon-placeholder
  • input
  • react
  • tabs

Source

Frequently Asked Questions

What does collapsible-example.tsx do?
collapsible-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 collapsible-example.tsx?
collapsible-example.tsx defines 3 function(s): CollapsibleExample, CollapsibleFileTree, CollapsibleSettings.
What does collapsible-example.tsx depend on?
collapsible-example.tsx imports 9 module(s): button, card, collapsible, example, field, icon-placeholder, input, react, and 1 more.
Where is collapsible-example.tsx in the architecture?
collapsible-example.tsx is located at apps/v4/registry/bases/radix/examples/collapsible-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