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?
- 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
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
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
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
| Component | Description |
|---|
Menu | Config-driven dropdown menu |
ContextMenu | Right-click context menu |
Tabs | Tab navigation with TabList, Tab, TabPanel |
Feedback
| Component | Description |
|---|
Dialog | Modal dialog with header/body/footer |
ToastProvider | Toast notification system |
useToast | Hook to show toasts programmatically |
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
| Component | Description |
|---|
ChatPanel | AI chat interface panel |
PropertyInspector | Inspector panel for object properties |
ViewportGizmo | 3D viewport orientation gizmo |
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