supabase/web/docs/about.mdx

---
id: about
title: Introduction
description: 'What is Supabase?'
slug: /
hide_table_of_contents: true
---

import AngularLogo from '@site/static/img/libraries/angular-icon.svg'
import ExpoLogo from '@site/static/img/libraries/expo-icon.svg'
import DartLogo from '@site/static/img/libraries/dart-icon.svg'
import JavascriptLogo from '@site/static/img/libraries/javascript-icon.svg'
import NextjsLogo from '@site/static/img/libraries/nextjs-icon.svg'
import ReactLogo from '@site/static/img/libraries/react-icon.svg'
import RedwoodJsLogo from '@site/static/img/libraries/redwoodjs-icon.svg'
import SvelteLogo from '@site/static/img/libraries/svelte-icon.svg'
import VuejsLogo from '@site/static/img/libraries/vuejs-icon.svg'

import useBaseUrl from '@docusaurus/useBaseUrl'
import Link from '@docusaurus/Link'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
const frameworks = [
  {
    name: 'Angular',
    logo: AngularLogo,
    href: '/docs/guides/with-angular',
  },
  {
    name: 'Expo',
    logo: ExpoLogo,
    href: 'https://github.com/supabase/supabase/tree/master/examples/expo-todo-list',
  },
  { name: 'Flutter', logo: DartLogo, href: '/docs/guides/with-flutter' },
  {
    name: 'Javascript',
    logo: JavascriptLogo,
    href: 'https://github.com/supabase/supabase/tree/master/examples/javascript-auth',
  },
  { name: 'Next.js', logo: NextjsLogo, href: '/docs/guides/with-nextjs' },
  { name: 'React', logo: ReactLogo, href: '/docs/guides/with-react' },
  { name: 'RedwoodJS', logo: RedwoodJsLogo, href: '/docs/guides/with-redwoodjs' },
  { name: 'Svelte', logo: SvelteLogo, href: '/docs/guides/with-svelte' },
  { name: 'Vue', logo: VuejsLogo, href: '/docs/guides/with-vue-3' },
]

Supabase is an open source Firebase alternative.

It provides all the backend services you need to build a product. You can use it completely, or just the services you require:

<div class="container" style={{ padding: 0 }}>
  <div class="row is-multiline">
    {/* Database */}
    <div class="col col--6">
      <Link class="card" to="/docs/guides/database" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Database</h4>
          <p>A dedicated, scalable Postgres database.</p>
        </div>
      </Link>
    </div>
    {/* Auth */}
    <div class="col col--6">
      <Link class="card" to="/docs/guides/auth" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Auth</h4>
          <p>User management with Row Level Security.</p>
        </div>
      </Link>
    </div>
    {/* Auth */}
    <div class="col col--6">
      <Link class="card" to="/docs/guides/storage" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>File Storage</h4>
          <p>Store, organize, and serve large files.</p>
        </div>
      </Link>
    </div>
    {/* API */}
    <div class="col col--6">
      <Link class="card" to="/docs/guides/api" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Auto-generated APIs</h4>
          <p>Instantly generate APIs for your database.</p>
        </div>
      </Link>
    </div>
  </div>
</div>

## Getting started

Visit [app.supabase.io](https://app.supabase.io) to get started with the hosted platform or visit the [self-hosting](/docs/guides/hosting/overview) docs to learn how to host Supabase yourself.

Supabase is just Postgres, which makes it compatible with a large number of tools and frameworks.

<div>
  <div class="row is-multiline">
    {frameworks.map((x) => (
      <div key={x.name} class="col col--3">
        <Link class="card" to={x.href}>
          <div class="card__body" style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
            {x.logo && (
              <x.logo width="20" alt={x.name} style={{ display: 'block', maxHeight: 20 }} />
            )}
            <p>{x.name}</p>
          </div>
        </Link>
      </div>
    ))}
  </div>
</div>

## How to use these docs

The documentation is divided into 3 sections.

<div class="container" style={{ padding: 0 }}>
  <div class="row is-multiline">
    {/* Overview */}
    <div class="col col--4">
      <Link class="card" to="/docs/architecture" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Overview</h4>
          <p>A summary of the tools and how to get started.</p>
        </div>
      </Link>
    </div>
    {/* Auth */}
    <div class="col col--4">
      <Link class="card" to="/docs/guides" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Guides</h4>
          <p>In-depth explanations for each tool.</p>
        </div>
      </Link>
    </div>
    {/* Ref */}
    <div class="col col--4">
      <Link class="card" to="/docs/reference/javascript/supabase-client" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Reference Docs</h4>
          <p>Technical documentation for Client Libraries and Systems.</p>
        </div>
      </Link>
    </div>
  </div>
</div>