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 UIPrimitives 9 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  43d7b4a6_7d50_c823_b40b_0ea6351e2799["collapsible-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> f56be340_a522_c6f7_dec3_5906873d14c8
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  deffd1e6_798d_b7fd_c687_7ccabc947893["card"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> deffd1e6_798d_b7fd_c687_7ccabc947893
  d3a48a33_114e_9408_670a_e4d860f43a15["collapsible"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> d3a48a33_114e_9408_670a_e4d860f43a15
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> 106d51d9_3961_e810_478c_8a9c54987d20
  265525ff_a28c_a458_6a31_56bd147a920c["tabs"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> 265525ff_a28c_a458_6a31_56bd147a920c
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799 --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 43d7b4a6_7d50_c823_b40b_0ea6351e2799 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 { Button } from "@/registry/bases/base/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/bases/base/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/registry/bases/base/ui/collapsible"
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/base/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" }],
// ... (182 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, UIPrimitives 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/base/examples/collapsible-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