diff --git a/docs/api-reference/advanced-usages/custom-initial-state.md b/docs/api-reference/advanced-usages/custom-initial-state.md
index 82c2872488..1f526a52e4 100644
--- a/docs/api-reference/advanced-usages/custom-initial-state.md
+++ b/docs/api-reference/advanced-usages/custom-initial-state.md
@@ -6,7 +6,7 @@ Here is an example modify `uiState` `initialState` to hide side panel, and selec
 
 ```js
 import {combineReducers} from 'redux';
-import keplerGlReducer from 'kepler.gl/reducers';
+import {keplerGlReducer} from '@kepler.gl/reducers';
 
 const customizedKeplerGlReducer = keplerGlReducer
   .initialState({
diff --git a/docs/api-reference/advanced-usages/forward-actions.md b/docs/api-reference/advanced-usages/forward-actions.md
index 2eab6bee38..e5e142717a 100644
--- a/docs/api-reference/advanced-usages/forward-actions.md
+++ b/docs/api-reference/advanced-usages/forward-actions.md
@@ -10,11 +10,11 @@ You can add a dispatch function to your component that dispatches actions to a s
 
 ```js
 // component
-import KeplerGl from 'kepler.gl';
+import {KeplerGl} from '@kepler.gl/components';
 import {connect} from 'react-redux';
 
 // import action and forward dispatcher
-import {toggleFullScreen, forwardTo} from 'kepler.gl/actions';
+import {toggleFullScreen, forwardTo} from '@kepler.gl/actions';
 
 
 const MapContainer = props => (
@@ -44,10 +44,10 @@ You can also simply wrap an action into a forward action with the `wrapTo` helpe
 
 ```js
 // component
-import KeplerGl from 'kepler.gl';
+import {KeplerGl} from '@kepler.gl/components';
 
 // action and wrapper
-import {toggleFullScreen, wrapTo} from 'kepler.gl/actions';
+import {toggleFullScreen, wrapTo} from '@kepler.gl/actions';
 
 // create a function to wrapper action payload to 'foo'
 const wrapToMap = wrapTo('foo');