Customizer() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Customizer() — ui Function Reference

Dependency Diagram

graph TD
  786dbdf4_5945_3c83_62e7_9f5d52b16834["Customizer()"]
  140c7d1e_fab6_452b_6086_5ea5d9731e35["theme-customizer.tsx"]
  786dbdf4_5945_3c83_62e7_9f5d52b16834 -->|defined in| 140c7d1e_fab6_452b_6086_5ea5d9731e35
  style 786dbdf4_5945_3c83_62e7_9f5d52b16834 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/theme-customizer.tsx lines 97–197

export function Customizer() {
  const [mounted, setMounted] = React.useState(false)
  const { resolvedTheme: mode } = useTheme()
  const [config, setConfig] = useConfig()

  React.useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <ThemeWrapper defaultTheme="zinc">
      <div className="grid w-full flex-1 grid-cols-2 flex-wrap items-start gap-2 sm:flex sm:items-center md:gap-6">
        <div className="flex flex-col gap-2">
          <Label className="sr-only text-xs">Color</Label>
          <div className="flex flex-wrap gap-1 md:gap-2">
            {baseColors
              .filter(
                (theme) =>
                  !["slate", "stone", "gray", "neutral"].includes(theme.name)
              )
              .map((theme) => {
                const isActive = config.theme === theme.name

                return mounted ? (
                  <Button
                    variant="outline"
                    size="sm"
                    key={theme.name}
                    onClick={() => {
                      setConfig({
                        ...config,
                        theme: theme.name,
                      })
                    }}
                    className={cn(
                      "w-[32px] rounded-lg lg:px-2.5 xl:w-[86px]",
                      isActive && "border-primary/50 ring-[2px] ring-primary/30"
                    )}
                    style={
                      {
                        "--theme-primary": `hsl(${
                          theme?.activeColor[mode === "dark" ? "dark" : "light"]
                        })`,
                      } as React.CSSProperties
                    }
                  >
                    <span
                      className={cn(
                        "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[--theme-primary]"
                      )}
                    >
                      {isActive && <Check className="!size-2.5 text-white" />}
                    </span>
                    <span className="hidden xl:block">
                      {theme.label === "Zinc" ? "Default" : theme.label}
                    </span>
                  </Button>
                ) : (
                  <Skeleton
                    className="h-8 w-[32px] xl:w-[86px]"
                    key={theme.name}
                  />
                )
              })}
          </div>
        </div>
        <Separator orientation="vertical" className="hidden h-6 sm:block" />
        <div className="flex flex-col gap-2">
          <Label className="sr-only text-xs">Radius</Label>
          <div className="flex flex-wrap gap-1 md:gap-2">
            {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => {
              return (
                <Button
                  variant={"outline"}
                  size="sm"
                  key={value}
                  onClick={() => {
                    setConfig({
                      ...config,
                      radius: parseFloat(value),
                    })