Introduction
Entangle UI is a specialized React component library for building professional editor interfaces — 3D tools, node editors, parameter systems, creative applications, and more.
Why Entangle UI?
Section titled “Why Entangle UI?”- Editor-focused — components designed for dense, information-rich UIs, not marketing pages
- Dark-first — all default values target dark backgrounds suitable for creative tools
- Zero-runtime CSS — powered by Vanilla Extract, styles compile to static CSS at build time
- Type-safe — full TypeScript support with strict types for all props and theme tokens
- Tree-shakeable — ESM-only,
preserveModules, and/*#__PURE__*/annotations ensure only used code is bundled
Component Catalog
Section titled “Component Catalog”Primitives
Section titled “Primitives”Basic building blocks for any interface.
| Component | Description |
| ------------- | ----------------------------------------------------------------- |
| Button | Primary action trigger with default, ghost, filled variants |
| IconButton | Square button optimized for icon-only actions |
| Input | Text input with label, icons, error states |
| Text | Typography component with semantic variants |
| Paper | Surface container with elevation and nesting |
| Icon | SVG icon wrapper with consistent sizing |
| Checkbox | Toggle control with indeterminate state |
| Switch | Binary toggle switch |
| Tooltip | Accessible hover/focus tooltip |
| Popover | Floating content anchored to a trigger |
| Collapsible | Expandable/collapsible content section |
Layout
Section titled “Layout”Composable layout primitives with responsive breakpoints.
| Component | Description |
| -------------- | ---------------------------------------------------- |
| Stack | Flex-based stacking with spacing multiplier |
| Flex | Full flexbox control with responsive direction |
| Grid | CSS Grid layout |
| Spacer | Empty spacing element |
| ScrollArea | Custom-styled scrollbar container |
| SplitPane | Resizable split panel |
| Accordion | Multiple collapsible sections with single/multi mode |
| PanelSurface | Panel with header/body/footer slots |
Controls
Section titled “Controls”Advanced interactive controls for editor workflows.
| Component | Description |
| ----------------- | ----------------------------------------------- |
| Slider | Value slider with keyboard and modifier support |
| NumberInput | Numeric input with increment/decrement |
| Select | Dropdown with groups and search |
| VectorInput | Multi-axis numeric input (2D/3D vectors) |
| ColorPicker | Full color picker with modes and palettes |
| CartesianPicker | 2D coordinate picker |
| CurveEditor | Bezier curve editor with keyframe manipulation |
| TreeView | Hierarchical data with expand/collapse |
Navigation
Section titled “Navigation”| Component | Description |
| ------------- | ------------------------------------------------------------------------- |
| Menu | Composable dropdown menu (Menu.Trigger, Menu.Content, Menu.Item, …) |
| ContextMenu | Right-click context menu |
| Tabs | Tab navigation with TabList, Tab, TabPanel |
Feedback
Section titled “Feedback”| Component | Description |
| --------------- | ------------------------------------ |
| Dialog | Modal dialog with header/body/footer |
| ToastProvider | Toast notification system |
| useToast | Hook to show toasts programmatically |
Shell (Application Layout)
Section titled “Shell (Application Layout)”Full-application layout components designed for professional editor interfaces.
| Component | Description |
| --------------- | -------------------------------------------------------------- |
| AppShell | Root layout with .MenuBar, .Toolbar, .Dock, .StatusBar |
| MenuBar | Top-level application menu bar |
| Toolbar | Action toolbar with buttons, toggles, groups |
| StatusBar | Bottom information bar |
| FloatingPanel | Draggable, resizable floating window |
Editor
Section titled “Editor”| Component | Description |
| ------------------- | ------------------------------------- |
| ChatPanel | AI chat interface panel |
| PropertyInspector | Inspector panel for object properties |
| ViewportGizmo | 3D viewport orientation gizmo |
Next Steps
Section titled “Next Steps”- Installation — install Entangle UI and its peer dependencies
- Quick Start — build your first component in minutes
- Theming — customize colors, tokens, and create branded themes
- Styling — learn the Vanilla Extract styling system
- Docs for LLMs — plain-text documentation for AI coding assistants