ui Architecture Docs
Home / File/ component-preview.tsx — ui Source File

component-preview.tsx — ui Source File

Architecture documentation for component-preview.tsx, a tsx file in the ui codebase. 12 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 12 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  2e8d311b_d156_8b3e_bc13_f50b4484fb51["component-preview.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  f089de72_fa18_41f0_bbdc_dbd00aa24ef0["__registry__"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> f089de72_fa18_41f0_bbdc_dbd00aa24ef0
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  8c6845ea_e0db_55db_4a65_df2f64d9e581["use-config"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 8c6845ea_e0db_55db_4a65_df2f64d9e581
  402113bd_a10d_0255_fccf_87fa40fd281a["copy-button"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 402113bd_a10d_0255_fccf_87fa40fd281a
  aae3c3f1_230a_9c11_a663_8bbc3f0ad054["icons"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> aae3c3f1_230a_9c11_a663_8bbc3f0ad054
  604b23c1_86fa_0735_80ed_220de62b52fe["style-switcher"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 604b23c1_86fa_0735_80ed_220de62b52fe
  4fac0cf8_c0bd_8298_eafb_426ab7500040["theme-wrapper"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 4fac0cf8_c0bd_8298_eafb_426ab7500040
  68195618_3220_1f0a_c337_b26b6731e44a["v0-button"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 68195618_3220_1f0a_c337_b26b6731e44a
  ff4adc50_4c10_539a_2d63_f3d4b2f1ec61["tabs"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> ff4adc50_4c10_539a_2d63_f3d4b2f1ec61
  9798186b_08af_1d79_2ad7_d662300dc0ba["registry-styles"]
  2e8d311b_d156_8b3e_bc13_f50b4484fb51 --> 9798186b_08af_1d79_2ad7_d662300dc0ba
  style 2e8d311b_d156_8b3e_bc13_f50b4484fb51 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import Image from "next/image"
import { Index } from "@/__registry__"

import { cn } from "@/lib/utils"
import { useConfig } from "@/hooks/use-config"
import { CopyButton } from "@/components/copy-button"
import { Icons } from "@/components/icons"
import { StyleSwitcher } from "@/components/style-switcher"
import { ThemeWrapper } from "@/components/theme-wrapper"
import { V0Button } from "@/components/v0-button"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/new-york/ui/tabs"
import { styles } from "@/registry/registry-styles"

interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string
  extractClassname?: boolean
  extractedClassNames?: string
  align?: "center" | "start" | "end"
  description?: string
  hideCode?: boolean
  type?: "block" | "component" | "example"
}

export function ComponentPreview({
  name,
  type,
  children,
  className,
  extractClassname,
  extractedClassNames,
  align = "center",
  description,
  hideCode = false,
  ...props
}: ComponentPreviewProps) {
  const [config] = useConfig()
  const index = styles.findIndex((style) => style.name === config.style)

  const Codes = React.Children.toArray(children) as React.ReactElement[]
  const Code = Codes[index]

  const Preview = React.useMemo(() => {
    const Component = Index[config.style][name]?.component

    if (!Component) {
      return (
        <p className="text-sm text-muted-foreground">
          Component{" "}
          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
            {name}
          </code>{" "}
          not found in registry.
// ... (117 more lines)

Domain

Subdomains

Functions

Types

Dependencies

  • __registry__
  • copy-button
  • icons
  • image
  • react
  • registry-styles
  • style-switcher
  • tabs
  • theme-wrapper
  • use-config
  • utils
  • v0-button

Source

Frequently Asked Questions

What does component-preview.tsx do?
component-preview.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 component-preview.tsx?
component-preview.tsx defines 1 function(s): ComponentPreview.
What does component-preview.tsx depend on?
component-preview.tsx imports 12 module(s): __registry__, copy-button, icons, image, react, registry-styles, style-switcher, tabs, and 4 more.
Where is component-preview.tsx in the architecture?
component-preview.tsx is located at deprecated/www/components/component-preview.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/components).

Analyze Your Own Codebase

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

Try Supermodel Free