CustomizerCode() — ui Function Reference

Architecture documentation for the CustomizerCode() function in theme-customizer.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives calls 2

Entity Profile

ComponentRegistry→ UIPrimitives→ CustomizerCode() — ui Function Reference

Dependency Diagram

graph TD
  08bc5253_3d27_47f2_fff0_98cd98b59931["CustomizerCode()"]
  140c7d1e_fab6_452b_6086_5ea5d9731e35["theme-customizer.tsx"]
  08bc5253_3d27_47f2_fff0_98cd98b59931 -->|defined in| 140c7d1e_fab6_452b_6086_5ea5d9731e35
  c7929dff_1e9f_5d91_5fbc_e37a6af8c60f["getThemeCode()"]
  08bc5253_3d27_47f2_fff0_98cd98b59931 -->|calls| c7929dff_1e9f_5d91_5fbc_e37a6af8c60f
  93e343d5_d6af_2deb_a0ed_c1445580138f["getThemeCodeOKLCH()"]
  08bc5253_3d27_47f2_fff0_98cd98b59931 -->|calls| 93e343d5_d6af_2deb_a0ed_c1445580138f
  style 08bc5253_3d27_47f2_fff0_98cd98b59931 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/theme-customizer.tsx lines 254–488

function CustomizerCode() {
  const [config] = useConfig()
  const [hasCopied, setHasCopied] = React.useState(false)
  const [themeVersion, setThemeVersion] = React.useState("v4")
  const activeTheme = React.useMemo(
    () => baseColors.find((theme) => theme.name === config.theme),
    [config.theme]
  )
  const activeThemeOKLCH = React.useMemo(
    () => baseColorsOKLCH[config.theme as keyof typeof baseColorsOKLCH],
    [config.theme]
  )

  React.useEffect(() => {
    if (hasCopied) {
      setTimeout(() => {
        setHasCopied(false)
      }, 2000)
    }
  }, [hasCopied])

  return (
    <ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
      <Tabs value={themeVersion} onValueChange={setThemeVersion}>
        <div className="flex items-center justify-between">
          <TabsList>
            <TabsTrigger value="v4">Tailwind v4</TabsTrigger>
            <TabsTrigger value="v3">v3</TabsTrigger>
          </TabsList>
          <Button
            size="sm"
            variant="outline"
            onClick={() => {
              copyToClipboardWithMeta(
                themeVersion === "v3"
                  ? getThemeCode(activeTheme, config.radius)
                  : getThemeCodeOKLCH(activeThemeOKLCH, config.radius),
                {
                  name: "copy_theme_code",
                  properties: {
                    theme: config.theme,
                    radius: config.radius,
                  },
                }
              )
              setHasCopied(true)
            }}
            className="absolute right-0 top-0 shadow-none"
          >
            {hasCopied ? <Check /> : <ClipboardIcon />}
            Copy
          </Button>
        </div>
        <TabsContent value="v4">
          <div data-rehype-pretty-code-fragment="">
            <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
              <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
                <span className="line text-white">&nbsp;:root &#123;</span>
                <span className="line text-white">
                  &nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
                </span>
                {Object.entries(activeThemeOKLCH?.light).map(([key, value]) => (
                  <span className="line text-white" key={key}>
                    &nbsp;&nbsp;&nbsp;--{key}: {value};
                  </span>
                ))}
                <span className="line text-white">&nbsp;&#125;</span>
                <span className="line text-white">&nbsp;</span>
                <span className="line text-white">&nbsp;.dark &#123;</span>
                {Object.entries(activeThemeOKLCH?.dark).map(([key, value]) => (
                  <span className="line text-white" key={key}>
                    &nbsp;&nbsp;&nbsp;--{key}: {value};
                  </span>
                ))}
                <span className="line text-white">&nbsp;&#125;</span>
              </code>
            </pre>
          </div>
        </TabsContent>
        <TabsContent value="v3">
          <div data-rehype-pretty-code-fragment="">