Customizer() — ui Function Reference

Architecture documentation for the Customizer() function in customizer.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ Customizer() — ui Function Reference

Dependency Diagram

graph TD
  561aa03c_2214_8fef_a67a_183a34ebb820["Customizer()"]
  e5c08ca8_8065_9362_a7c6_7276ca615150["customizer.tsx"]
  561aa03c_2214_8fef_a67a_183a34ebb820 -->|defined in| e5c08ca8_8065_9362_a7c6_7276ca615150
  style 561aa03c_2214_8fef_a67a_183a34ebb820 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/customizer.tsx lines 26–73

export function Customizer() {
  const [params] = useDesignSystemSearchParams()
  const isMobile = useIsMobile()
  const anchorRef = React.useRef<HTMLDivElement | null>(null)

  const availableThemes = React.useMemo(
    () => getThemesForBaseColor(params.baseColor),
    [params.baseColor]
  )

  return (
    <div
      className="no-scrollbar -mx-2.5 flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
      ref={anchorRef}
    >
      <div className="no-scrollbar h-14 overflow-x-auto overflow-y-hidden p-px md:h-full md:overflow-x-hidden md:overflow-y-auto">
        <FieldGroup className="flex h-full flex-1 flex-row gap-2 md:flex-col md:gap-0">
          <PresetPicker
            presets={PRESETS}
            isMobile={isMobile}
            anchorRef={anchorRef}
          />
          <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
          <StylePicker
            styles={STYLES}
            isMobile={isMobile}
            anchorRef={anchorRef}
          />
          <BaseColorPicker isMobile={isMobile} anchorRef={anchorRef} />
          <ThemePicker
            themes={availableThemes}
            isMobile={isMobile}
            anchorRef={anchorRef}
          />
          <IconLibraryPicker isMobile={isMobile} anchorRef={anchorRef} />
          <FontPicker fonts={FONTS} isMobile={isMobile} anchorRef={anchorRef} />
          <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
          <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
          <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
          <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
            <RandomButton />
            <ResetButton />
          </div>
        </FieldGroup>
      </div>
    </div>
  )
}