Skip to content

embeddr-net/embeddr-react-ui

Repository files navigation

Embeddr React Components

npm downloads embeddr-react-ui version

pypi version embeddr-core version

embeddr-frontend

license

Warning

You do not need this if you want to use Embeddr

This repo is for development only.

Please use embeddr-cli

This package lives strictly in the UI layer and communicates with the backend only through stable client contracts.


Currently used by


Plugin developer docs


Components

This library includes:

Public import paths

Use explicit subpath imports for clear boundaries:

  • @embeddr/react-ui/components/ui for base UI primitives and composed controls
  • @embeddr/react-ui/components/embeddr for Embeddr-specific media components
  • @embeddr/react-ui/components/visualization for UMAP and visualization components
  • @embeddr/react-ui/hooks for plugin and UI hooks
  • @embeddr/react-ui/hooks/plugin for plugin-oriented hooks
  • @embeddr/react-ui/hooks/distro for shell/distro-oriented hooks
  • @embeddr/react-ui/types for shared API and domain types
  • @embeddr/react-ui/context for provider context hooks
  • @embeddr/react-ui/lib/* for utility modules (utils, dnd, reactive, renderables, artifact-graph, mdx)

Quick import examples

import { Button, Card, ScrollArea } from "@embeddr/react-ui/components/ui";
import { EmbeddrImage, VideoPlayer } from "@embeddr/react-ui/components/embeddr";
import { Umap3DExplorer } from "@embeddr/react-ui/components/visualization";
import { usePluginDrop, usePluginStorage } from "@embeddr/react-ui/hooks";
import { usePluginAPI } from "@embeddr/react-ui/hooks/plugin";
import { useImageDialog } from "@embeddr/react-ui/hooks/distro";
import type { EmbeddrAPI } from "@embeddr/react-ui/types";
import { EmbeddrDnDTypes } from "@embeddr/react-ui/lib/dnd";

Tip

Use package export paths (@embeddr/react-ui/...) in consuming apps and plugins.

Themed shadcn components

Embeddr uses a themed and extended version of shadcn/ui as a base.

These components integrate with:

  • Embeddr theming tokens
  • layout and panel containers
  • distribution-specific styling

Hooks

Hook audiences

  • Plugin-focused hooks: import from @embeddr/react-ui/hooks/plugin
    • usePluginAPI, usePluginDrop, usePluginStorage, usePluginSetting
    • useWebSocketEvent, useWebSocketStream
    • useArtifact, useImage, useResolvedArtifact
  • Distro/shell hooks: import from @embeddr/react-ui/hooks/distro
    • useImageDialog, useExternalNav, usePanelStack, useLocalStorage
  • Backwards compatibility: @embeddr/react-ui/hooks still re-exports both groups

usePluginAPI

Canonical hook for plugin development. Returns the shell-provided API exposed via EmbeddrProvider when a plugin is mounted.


useImageDialog

Provides a lightbox and gallery viewer for artifacts and media.

lightbox


useExternalNav

Provides a confirmation and safety layer before navigating to external sites from inside an Embeddr shell.

nav


Visualization components (in progress)

Note

Visualization exports are available now, but APIs may continue to evolve during 0.2.x as usage expands.

3D UMAP explorer (available, evolving)

3d-viz

2D UMAP explorer (in development)


Contributing

Package-specific contribution guidance lives in CONTRIBUTING.md.

For general contribution guidelines, see:

https://github.com/embeddr-net/embeddr-cli


Related packages

License

Copyright 2026 Embeddr Labs and Contributors

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this project except in compliance with the License. You may obtain a copy of the License at:

http://www.apache.org/licenses/LICENSE-2.0

About

No description, website, or topics provided.

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors