supabase/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx

---
title: 'Use Supabase with TanStack Start'
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a TanStack Start app.'
breadcrumb: 'Framework Quickstarts'
---

<$Partial path="quickstart_db_setup.mdx" />

## 3. Create a TanStack Start app

Create a TanStack Start app using the official CLI.

```bash
npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome
```

## 4. Install Agent Skills (optional)

Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

To install, run the following command in the root of your project:

```bash
npx skills add supabase/agent-skills
```

## 5. Install the Supabase client library

The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a TanStack Start app.

Navigate to the TanStack Start app and install `supabase-js`.

```bash
cd my-app && npm install @supabase/supabase-js
```

## 6. Declare Supabase environment variables

Create a `.env` file in the root of your project and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):

<Button variant="primary" asChild>
  <a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
</Button>

```text name=.env
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
```

<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />

## 7. Create a Supabase client utility

Create a new file at `src/utils/supabase.ts` to initialize the Supabase client.

```ts name=src/utils/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
)
```

## 8. Query data from the app

Replace the contents of `src/routes/index.tsx` with the following code to add a loader function that fetches the instruments data and displays it on the page.

```tsx name=src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

import { supabase } from '../utils/supabase'

export const Route = createFileRoute('/')({
  loader: async () => {
    const { data: instruments } = await supabase.from('instruments').select()
    return { instruments }
  },
  component: Home,
})

function Home() {
  const { instruments } = Route.useLoaderData()

  return (
    <ul>
      {instruments?.map((instrument) => (
        <li key={instrument.name}>{instrument.name}</li>
      ))}
    </ul>
  )
}
```

## 9. Start the app

Run the development server, go to http://localhost:3000 in a browser and you should see the list of instruments.

```bash
npm run dev
```

## Next steps

- Explore [drop-in UI components](/ui) for your Supabase app
- Set up [Auth](/docs/guides/auth) for your app
- [Insert more data](/docs/guides/database/import-data) into your database
- Upload and serve static files using [Storage](/docs/guides/storage)