# How to Use the 3D Graph Visualization UI in codebase-memory-mcp

> Learn to use the 3D graph visualization UI in codebase-memory-mcp. Explore React components, customize appearance with variant props, and leverage CVA for Tailwind CSS classes.

- Repository: [Martin Vogel/codebase-memory-mcp](https://github.com/DeusData/codebase-memory-mcp)
- Tags: how-to-guide
- Published: 2026-07-09

---

**The 3D graph visualization UI in codebase-memory-mcp is controlled through React components located in `graph-ui/src/components/ui/`, where you customize appearance by passing a `variant` prop (such as `"default"` or `"outline"`) to components like `Button` and `Badge`, which use class-variance-authority (CVA) to compute Tailwind CSS classes.**

The codebase-memory-mcp repository provides a React-based interface for exploring codebases as interactive 3D graphs. The UI components surrounding the Three.js scene are built with a **variant-driven styling system** that lets you change the appearance of controls, toolbars, and information panels without modifying the underlying 3D rendering logic.

## How the Variant System Works

Each UI component in the 3D graph interface supports a **`variant`** prop that determines its visual style. These components use **class-variance-authority (CVA)** to merge base Tailwind CSS classes with variant-specific overrides. The default value is `"default"`, but you can select alternatives like `"outline"` or `"secondary"` depending on the component's defined options.

The variant mapping lives inside individual component files in `graph-ui/src/components/ui/`. For example, [`button.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/button.tsx) defines its available variants in a configuration object that CVA consumes to generate the final class list. This architecture keeps styling logic centralized while allowing instant visual changes wherever the component is instantiated, such as in [`App.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/App.tsx) or [`GraphTab.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/GraphTab.tsx).

## Customizing UI Components

To change the appearance of interface elements surrounding the 3D graph, import the desired component and provide a valid `variant` value. You can also adjust sizing or add utility classes via the `className` prop.

### Styling Buttons

The `Button` component supports `"default"` and `"outline"` variants as defined in [`graph-ui/src/components/ui/button.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/src/components/ui/button.tsx).

```tsx
import { Button } from "./components/ui/button";

export function Toolbar() {
  return (
    <div className="flex gap-2">
      {/* Uses the default solid style */}
      <Button onClick={resetView}>Reset view</Button>

      {/* Uses the outline style for secondary actions */}
      <Button variant="outline" onClick={fitToScreen}>
        Fit to screen
      </Button>
    </div>
  );
}

```

### Configuring Badges

The `Badge` component in [`graph-ui/src/components/ui/badge.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/src/components/ui/badge.tsx) starts with a `"default"` variant, but you can extend it to support additional states like `"success"` or `"warning"`.

First, modify the CVA configuration in [`badge.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/badge.tsx):

```tsx
const badgeVariants = cva(
  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
  {
    variants: {
      variant: {
        default: "bg-gray-100 text-gray-800",
        success: "bg-green-100 text-green-800",
        warning: "bg-yellow-100 text-yellow-800",
      },
    },
    defaultVariants: { variant: "default" },
  }
);

```

Then consume the new variant in your feature components:

```tsx
import { Badge } from "./components/ui/badge";

export function NodeInfo({ node }) {
  return (
    <div className="flex items-center gap-1">
      <Badge variant="success">{node.type}</Badge>
      <span>{node.name}</span>
    </div>
  );
}

```

### Updating Checkboxes and Other Controls

Components like `Checkbox` in [`graph-ui/src/components/ui/checkbox.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/src/components/ui/checkbox.tsx) inherit styling logic from the Button component's patterns. You customize them using the same `variant` and `className` props, ensuring visual consistency across the **Project** and **Statistics** tabs.

## Implementing Global Themes

For a site-wide appearance switch that affects all UI controls simultaneously, wrap your application in a React Context that supplies variant values:

```tsx
// ThemeContext.tsx
import { createContext, useContext } from "react";

export const ThemeContext = createContext({ 
  button: "default", 
  badge: "default" 
});

export const useTheme = () => useContext(ThemeContext);

```

Provide the theme at the root level in [`App.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/App.tsx):

```tsx
import { ThemeContext } from "./ThemeContext";

export function App() {
  const theme = { button: "outline", badge: "warning" };

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <NodeInfo node={currentNode} />
    </ThemeContext.Provider>
  );
}

```

Consume the context in individual components:

```tsx
import { useTheme } from "./ThemeContext";
import { Button } from "./components/ui/button";

export function Toolbar() {
  const { button } = useTheme();
  return <Button variant={button}>Reset</Button>;
}

```

This approach decouples the visual theme from component implementation, allowing you to toggle between "light" and "dark" UI modes or highlight specific states across the entire 3D graph interface.

## Separation of UI and 3D Rendering

The variant system applies only to the React UI layer. The **3D scene itself**—handled by components like [`NodeCloud.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/NodeCloud.tsx) and `EdgeLines`—remains independent of these styling changes. Modifying the `variant` prop on a `Button` in [`GraphTab.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/GraphTab.tsx) changes the control's appearance but does not trigger re-renders of the Three.js scene graph, ensuring performance remains optimized during UI customization.

## Summary

- The 3D graph visualization UI uses React components stored in `graph-ui/src/components/ui/` that rely on **class-variance-authority** for styling.
- Change appearance by passing a **`variant`** prop (e.g., `"default"`, `"outline"`) to components like `Button` or `Badge`.
- Extend variants by editing the CVA configuration objects inside [`button.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/button.tsx), [`badge.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/badge.tsx), or [`checkbox.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/checkbox.tsx).
- Implement global themes by creating a React Context that supplies variant values to nested components.
- UI styling changes are isolated from the 3D rendering logic, which lives in components like [`NodeCloud.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/NodeCloud.tsx).

## Frequently Asked Questions

### Where are the UI components for the 3D graph visualization located?

All reusable UI components are located in the `graph-ui/src/components/ui/` directory according to the source code structure. Key files include [`button.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/button.tsx), [`badge.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/badge.tsx), and [`checkbox.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/checkbox.tsx), which define the visual controls used in tabs like **Project** and **Statistics**.

### How do I add a custom color variant to the Badge component?

To add a custom variant, modify the `badgeVariants` object in [`graph-ui/src/components/ui/badge.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/src/components/ui/badge.tsx) by adding a new key to the `variant` property with your desired Tailwind CSS classes. After saving, you can reference this new variant by name (e.g., `variant="success"`) anywhere you import the `Badge` component.

### Will changing the UI variant affect the 3D graph rendering performance?

No, changing the `variant` prop on UI components only affects the React layer's CSS classes. The actual 3D scene managed by [`NodeCloud.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/NodeCloud.tsx) and related Three.js components operates independently, so UI style updates do not trigger expensive 3D re-renders.

### Can I set a default variant for all buttons without editing each file individually?

Yes, you can create a React Context that provides default variant values to all children components, as demonstrated in the global themes section. Alternatively, you can modify the `defaultVariants` object within each component's CVA configuration in `graph-ui/src/components/ui/` to change the fallback style for that component type throughout the application.