buildRegistryBase() — ui Function Reference

Architecture documentation for the buildRegistryBase() function in config.ts from the ui codebase.

Function typescript ComponentRegistry ChartRegistry calls 3

Entity Profile

ComponentRegistry→ ChartRegistry→ buildRegistryBase() — ui Function Reference

Dependency Diagram

graph TD
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04["buildRegistryBase()"]
  ad762621_6a27_5b76_c744_8ca39930b352["config.ts"]
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04 -->|defined in| ad762621_6a27_5b76_c744_8ca39930b352
  cda42272_242b_511e_90fe_586b6be1c09c["getBase()"]
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04 -->|calls| cda42272_242b_511e_90fe_586b6be1c09c
  d3d6413a_09c6_ce19_b6c6_9f9f44fd91e1["getIconLibrary()"]
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04 -->|calls| d3d6413a_09c6_ce19_b6c6_9f9f44fd91e1
  f01c7cbd_535b_d368_94f9_81a40fde13ec["buildRegistryTheme()"]
  1ccb73c0_1ef3_71ae_c124_e225d34e4f04 -->|calls| f01c7cbd_535b_d368_94f9_81a40fde13ec
  style 1ccb73c0_1ef3_71ae_c124_e225d34e4f04 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/config.ts lines 383–439

export function buildRegistryBase(config: DesignSystemConfig) {
  const baseItem = getBase(config.base)
  const iconLibraryItem = getIconLibrary(config.iconLibrary)

  if (!baseItem || !iconLibraryItem) {
    throw new Error(
      `Base "${config.base}" or icon library "${config.iconLibrary}" not found`
    )
  }

  const registryTheme = buildRegistryTheme(config)

  // Build dependencies.
  const dependencies = [
    `shadcn@${SHADCN_VERSION}`,
    "class-variance-authority",
    "tw-animate-css",
    ...(baseItem.dependencies ?? []),
    ...iconLibraryItem.packages,
  ]

  const registryDependencies = ["utils"]

  if (config.font) {
    registryDependencies.push(`font-${config.font}`)
  }

  return {
    name: `${config.base}-${config.style}`,
    extends: "none",
    type: "registry:base" as const,
    config: {
      style: `${config.base}-${config.style}`,
      iconLibrary: iconLibraryItem.name,
      rtl: config.rtl,
      menuColor: config.menuColor,
      menuAccent: config.menuAccent,
      tailwind: {
        baseColor: config.baseColor,
      },
    },
    dependencies,
    registryDependencies,
    cssVars: registryTheme.cssVars,
    css: {
      '@import "tw-animate-css"': {},
      '@import "shadcn/tailwind.css"': {},
      "@layer base": {
        "*": { "@apply border-border outline-ring/50": {} },
        body: { "@apply bg-background text-foreground": {} },
      },
    },
    ...(config.rtl && {
      docs: `To learn how to set up the RTL provider and fonts for your app, see https://ui.shadcn.com/docs/rtl/${config.template ?? "next"}`,
    }),
  }
}