# Use an exposed component

App plugins can [expose additional functionality through a React component](https://grafana.com/developers/plugin-tools/how-to-guides/ui-extensions/expose-a-component.md), which you can then import into your own plugin. Use exposed components to augment your own app plugin with additional features to extend a user workflow.

## Use an exposed component[​](#use-an-exposed-component "Direct link to Use an exposed component")

The following example shows how you can render a component exposed by another plugin in your extension point:

1. Use the exposed component in your code:

src/components/MyComponent.tsx

```tsx
import { usePluginComponent } from '@grafana/runtime';

export const MyComponent = () => {
  const { component: Component, isLoading } = usePluginComponent('myorg-basic-app/reusable-component/v1');

  return (
    <>
      <div>My component</div>
      {isLoading ? 'Loading...' : <Component name="John" />}
    </>
  );
};

```

2. Declare the component dependency in your `plugin.json`:

src/plugin.json

```json
{
  ...
  "dependencies": {
    "extensions": {
      "exposedComponents": ["myorg-basic-app/reusable-component/v1"]
    }
  }
}

```

tip

For more details [check the API reference guide](https://grafana.com/developers/plugin-tools/reference/ui-extensions-reference/ui-extensions.md).

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

The plugin that exposes the component must also have declared it in their `plugin.json` file under the `extensions.exposedComponents` section. For more information about exposing components, see [Expose a component](https://grafana.com/developers/plugin-tools/how-to-guides/ui-extensions/expose-a-component.md).