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.

```tsx
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](https://sonner.emilkowal.ski/) 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:

```js
// 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:

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

---

## Projects Without Tailwind

For projects without Tailwind, to avoid CSS conflicts, the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) is used to isolate styles of the explorer.

```tsx
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:

- [Getting started w/ React](/content/docs/index.html)  
- [Getting started w/ React Native](/content/docs/start-rn/index.html)  
- [Getting started w/ Vanilla JS](/content/docs/start-vanilla/index.html)  
- [Getting started w/ SolidJS](/content/docs/start-solidjs/index.html)  
- [Getting started w/ Svelte](/content/docs/start-svelte/index.html)  
- [Getting started w/ TanStack Start](/content/docs/start-tanstack/index.html)  
- [Create Instant App](/content/docs/create-instant-app/index.html)  
- [Recommended Workflow](/content/docs/workflow/index.html)  
- [Using LLMs](/content/docs/using-llms/index.html)  
- [Init](/content/docs/init/index.html)  
- [Modeling data](/content/docs/modeling-data/index.html)  
- [Writing data](/content/docs/instaml/index.html)  
- [Reading data](/content/docs/instaql/index.html)  
- [Infinite Queries](/content/docs/infinite-queries/index.html)  
- [Instant on the backend](/content/docs/backend/index.html)  
- [Patterns](/content/docs/patterns/index.html)  
- [Auth](/content/docs/auth/index.html)  
- [Magic codes](/content/docs/auth/magic-codes/index.html)  
- [Guest Auth](/content/docs/auth/guest-auth/index.html)  
- [Google OAuth](/content/docs/auth/google-oauth/index.html)  
- [Sign In with Apple](/content/docs/auth/apple/index.html)  
- [GitHub OAuth](/content/docs/auth/github-oauth/index.html)  
- [LinkedIn OAuth](/content/docs/auth/linkedin-oauth/index.html)  
- [Clerk](/content/docs/auth/clerk/index.html)  
- [Firebase Auth](/content/docs/auth/firebase/index.html)  
- [Permissions](/content/docs/permissions/index.html)  
- [Rate Limits](/content/docs/rate-limits/index.html)  
- [Managing users](/content/docs/users/index.html)  
- [Presence, Cursors, and Activity](/content/docs/presence-and-topics/index.html)  
- [Instant CLI](/content/docs/cli/index.html)  
- [Devtool](/content/docs/devtool/index.html)  
- [Platform API](/content/docs/platform-api/index.html)  
- [Explorer Component](/content/docs/explorer-component/index.html)  
- [Custom emails](/content/docs/emails/index.html)  
- [App teams](/content/docs/teams/index.html)  
- [Storage](/content/docs/storage/index.html)  
- [Streams](/content/docs/streams/index.html)  
- [Stripe Payments](/content/docs/stripe-payments/index.html)  
- [Admin HTTP API](/content/docs/http-api/index.html)  
- [(Experimental) Next.js SSR](/content/docs/next-ssr/index.html)  
- [Migrating from Supabase](/content/docs/migrate-from-supabase/index.html)