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" />
    </>
  );
}

If you are an LLM trying to learn how to develop with Instant, here are all of the links to the docs: