---
id: 'getting-started'
title: 'Getting Started'
description: 'Resources for getting started with Supabase.'
hideToc: true
---

<div className="flex flex-col gap-12 my-12">

<div>

<div className="grid grid-cols-12 gap-6 not-prose">
  <Link href="/guides/ai-tools" className="col-span-12 md:col-span-4" passHref>
    <GlassPanel
      title="Build with AI tools"
      hasLightIcon={true}
      background={false}
      showIconBg={true}
    >
      Develop with Supabase AI-first using plugins, MCP, and skills.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/api-keys" className="col-span-12 md:col-span-4" passHref>
    <GlassPanel title="API Keys" hasLightIcon={true} background={false} showIconBg={true}>
      Learn about the different API keys in Supabase and how to use them.
    </GlassPanel>
  </Link>
  <Link href="/guides/local-development" className="col-span-12 md:col-span-4" passHref>
    <GlassPanel title="Local Development" hasLightIcon={true} background={false} showIconBg={true}>
      Use the Supabase CLI to develop locally and collaborate between teams.
    </GlassPanel>
  </Link>
</div>

</div>

</div>

### Use cases

<div className="grid lg:grid-cols-12 gap-6 not-prose">
  <Link href="/guides/ai#examples" passHref className="col-span-4">
    <GlassPanel
      title="AI, Vectors, and embeddings"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/openai_logo"
      hasLightIcon={true}
    >
      Build AI-enabled applications using our Vector toolkit.
    </GlassPanel>
  </Link>
  <Link
    href="https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter"
    passHref
    className="col-span-4"
  >
    <GlassPanel
      title="Subscription Payments (SaaS)"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/nextjs-icon"
    >
      Clone, deploy, and fully customize a SaaS subscription application with Next.js.
    </GlassPanel>
  </Link>
  <Link
    href="https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example"
    passHref
    className="col-span-4"
  >
    <GlassPanel
      title="Partner Gallery"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/nextjs-icon"
    >
      Postgres full-text search, image storage, and more.
    </GlassPanel>
  </Link>
</div>

### Framework quickstarts

<$Show if="docs:framework_quickstarts">

<div className="grid lg:grid-cols-12 gap-6 not-prose">
  <Link href="/guides/getting-started/quickstarts/reactjs" passHref className="col-span-4">
    <GlassPanel
      title="React"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/react-icon"
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a React app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/nextjs" passHref className="col-span-4">
    <GlassPanel
      title="Next.js"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/nextjs-icon"
      hasLightIcon={true}
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a Next.js app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/nuxtjs" passHref className="col-span-4">
    <GlassPanel title="Nuxt" span="col-span-6" background={false} icon="/docs/img/icons/nuxt-icon">
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a Nuxt app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/hono" passHref className="col-span-4">
    <GlassPanel title="Hono" span="col-span-6" background={false} icon="/docs/img/icons/hono-icon">
      Learn how to create a Supabase project, add some sample data to your database, secure it with
      auth, and query the data from a Hono app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/redwoodjs" passHref className="col-span-4">
    <GlassPanel
      title="RedwoodJS"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/redwood-icon"
    >
      Learn how to create a Supabase project, add some sample data to your database using Prisma
      migration and seeds, and query the data from a RedwoodJS app.
    </GlassPanel>
  </Link>
  <$Show if="sdk:dart">
    <Link href="/guides/getting-started/quickstarts/flutter" passHref className="col-span-4">
      <GlassPanel
        title="Flutter"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/flutter-icon"
      >
        Learn how to create a Supabase project, add some sample data to your database, and query the
        data from a Flutter app.
      </GlassPanel>
    </Link>
  </$Show>
  <$Show if="sdk:swift">
    <Link href="/guides/getting-started/quickstarts/ios-swiftui" passHref className="col-span-4">
      <GlassPanel
        title="iOS SwiftUI"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/swift-icon"
      >
        Learn how to create a Supabase project, add some sample data to your database, and query the
        data from an iOS app.
      </GlassPanel>
    </Link>
  </$Show>
  <$Show if="sdk:kotlin">
    <Link href="/guides/getting-started/quickstarts/kotlin" passHref className="col-span-4">
      <GlassPanel
        title="Android Kotlin"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/kotlin-icon"
      >
        Learn how to create a Supabase project, add some sample data to your database, and query the
        data from an Android Kotlin app.
      </GlassPanel>
    </Link>
  </$Show>
  <Link href="/guides/getting-started/quickstarts/sveltekit" passHref className="col-span-4">
    <GlassPanel
      title="SvelteKit"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/svelte-icon"
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a SvelteKit app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/solidjs" passHref className="col-span-4">
    <GlassPanel
      title="SolidJS"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/solidjs-icon"
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a SolidJS app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/vue" passHref className="col-span-4">
    <GlassPanel title="Vue" span="col-span-6" background={false} icon="/docs/img/icons/vuejs-icon">
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a Vue app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/tanstack" passHref className="col-span-4">
    <GlassPanel
      title="TanStack Start"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/tanstack-icon"
      hasLightIcon={true}
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a TanStack Start app.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/quickstarts/refine" passHref className="col-span-4">
    <GlassPanel
      title="Refine"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/refine-icon"
    >
      Learn how to create a Supabase project, add some sample data to your database, and query the
      data from a Refine app.
    </GlassPanel>
  </Link>
</div>

</$Show>

<$Show if="!quickstarts:hide_nimbus">

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

</$Show>

<$Show if="docs:web_apps">

### Web app demos

<div className="grid lg:grid-cols-12 gap-6 not-prose">
  <Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-4">
    <GlassPanel
      title="Next.js"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/nextjs-icon"
      hasLightIcon={true}
    >
      Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-4">
    <GlassPanel
      title="React"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/react-icon"
    >
      Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-4">
    <GlassPanel
      title="Vue 3"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/vuejs-icon"
    >
      Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-4">
    <GlassPanel
      title="Nuxt 3"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/nuxt-icon"
    >
      Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-4">
    <GlassPanel
      title="Angular"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/angular-icon"
    >
      Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-4">
    <GlassPanel
      title="RedwoodJS"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/redwood-icon"
    >
      Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-4">
    <GlassPanel
      title="Svelte"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/svelte-icon"
    >
      Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-4">
    <GlassPanel
      title="SvelteKit"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/svelte-icon"
    >
      Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-4">
    <GlassPanel
      title="Refine"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/refine-icon"
    >
      Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
</div>
</$Show>

<$Show if="docs:mobile_tutorials">

### Mobile tutorials

<div className="grid lg:grid-cols-12 gap-6 not-prose">
  <$Show if="sdk:dart">
    <Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-4">
      <GlassPanel
        title="Flutter"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/flutter-icon"
      >
        Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.
      </GlassPanel>
    </Link>
  </$Show>
  <Link
    href="/guides/getting-started/tutorials/with-expo-react-native"
    passHref
    className="col-span-4"
  >
    <GlassPanel
      title="Expo React Native"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/expo-icon"
      hasLightIcon={true}
    >
      Learn how to build a user management app with Expo React Native and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link
    href="/guides/getting-started/tutorials/with-expo-react-native-social-auth"
    passHref
    className="col-span-4"
  >
    <GlassPanel
      title="Expo React Native Social Auth"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/expo-icon"
      hasLightIcon={true}
    >
      Learn how to implement social authentication in an app with Expo React Native and Supabase Database and Auth functionality.
    </GlassPanel>
  </Link>
  <$Show if="sdk:kotlin">
    <Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-4">
      <GlassPanel
        title="Android Kotlin"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/kotlin-icon"
      >
        Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.
      </GlassPanel>
    </Link>
  </$Show>
  <$Show if="sdk:swift">
    <Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-4">
      <GlassPanel
        title="iOS Swift"
        span="col-span-6"
        background={false}
        icon="/docs/img/icons/swift-icon"
      >
        Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.
      </GlassPanel>
    </Link>
  </$Show>
  <Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-4">
    <GlassPanel
      title="Ionic React"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/ionic-icon"
    >
      Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-4">
    <GlassPanel
      title="Ionic Vue"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/ionic-icon"
    >
      Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
  <Link
    href="/guides/getting-started/tutorials/with-ionic-angular"
    passHref
    className="col-span-4"
  >
    <GlassPanel
      title="Ionic Angular"
      span="col-span-6"
      background={false}
      icon="/docs/img/icons/ionic-icon"
    >
      Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.
    </GlassPanel>
  </Link>
</div>
</$Show>