The explorer page from the Instant Dashboard is available as an installable React component that you can use in your own apps. This is especially useful if you're building a platform or app builder powered by Instant

import './App.css';
import { Explorer, Toaster } from '@instantdb/components';
 
function App() {
  return (
    <>
      <Explorer
        className="h-full"
        useShadowDOM={false}
        darkMode={false}
        appId={import.meta.env.VITE_INSTANT_APP_ID}
        adminToken={import.meta.env.VITE_INSTANT_ADMIN_TOKEN}
      />
      <Toaster position="top-right" />
    </>
  );
}

The Toaster component is required for pop-up alerts, unless you are already using Sonner in your project.

The component accepts explorerState and setExplorerState props for manual control over the state of the Explorer.

#CSS

#Projects Using Tailwind

For projects using Tailwind, add the component library to your Tailwind configuration.

Tailwind V3:

// tailwind.config.js
module.exports = {
  content: [
    './lib/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx,md}',
    './_posts/**/*.{js,ts,jsx,tsx,md}',
    './components/**/*.{js,ts,jsx,tsx}',
    './utils/**/*.{js,ts,jsx,tsx}',
    './node_modules/@instantdb/components/src/**/*.{js,ts,jsx,tsx,md}',
  ],
};

Tailwind V4:

@import 'tailwindcss';
@source '../node_modules/@instantdb/components';

#Projects Without Tailwind

For projects without Tailwind, to avoid CSS conflicts, the Shadow DOM is used to isolate styles of the explorer.

import './App.css';
import { Explorer, Toaster } from '@instantdb/components';
 
function App() {
  return (
    <>
      <Explorer
        className="h-full"
        useShadowDOM // this prop automatically applies styles
        appId={import.meta.env.VITE_INSTANT_APP_ID}
        adminToken={import.meta.env.VITE_INSTANT_ADMIN_TOKEN}
      />
      <Toaster position="top-right" />
    </>
  );
}

instant

instant

Pick your app

Explorer Component

#CSS

#Projects Using Tailwind

#Projects Without Tailwind