ThemeComponent() — ui Function Reference

Architecture documentation for the ThemeComponent() function in theme-component.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ThemeComponent() — ui Function Reference

Dependency Diagram

graph TD
  a0b341bf_3446_655a_8de5_b2128158b998["ThemeComponent()"]
  671cdfc4_30ba_8f54_70ac_5d4a2494b708["theme-component.tsx"]
  a0b341bf_3446_655a_8de5_b2128158b998 -->|defined in| 671cdfc4_30ba_8f54_70ac_5d4a2494b708
  style a0b341bf_3446_655a_8de5_b2128158b998 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/theme-component.tsx lines 17–52

export function ThemeComponent({ name, ...props }: ThemeComponentProps) {
  const [config] = useConfig()

  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.
        </p>
      )
    }

    return <Component />
  }, [name, config.style])

  return (
    <div className={cn("relative")} {...props}>
      <React.Suspense
        fallback={
          <div className="flex items-center text-sm text-muted-foreground">
            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
            Loading...
          </div>
        }
      >
        {Preview}
      </React.Suspense>
    </div>
  )
}