supabase/web/docs/about.mdx

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

import ThemedImage from '@theme/ThemedImage'
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 NextjsDarkLogo from '@site/static/img/libraries/nextjs-dark-icon.svg'
import NextjsLightLogo from '@site/static/img/libraries/nextjs-light-icon.svg'
import ReactLogo from '@site/static/img/libraries/react-icon.svg'
import SolidJSLogo from '@site/static/img/libraries/solidjs-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/todo-list/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/auth/javascript-auth',
  },
  {
    name: 'Next.js',
    themed: true,
    logo: {
      dark: '/img/libraries/nextjs-dark-icon.svg',
      light: '/img/libraries/nextjs-light-icon.svg',
    },
    href: '/docs/guides/with-nextjs',
  },
  { name: 'React', logo: ReactLogo, href: '/docs/guides/with-react' },
  { name: 'RedwoodJS', logo: RedwoodJsLogo, href: '/docs/guides/with-redwoodjs' },
  { name: 'SolidJS', logo: SolidJSLogo, href: '/docs/guides/with-solidjs' },
  { 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 providing all the backend features you need to build a product.
You can use it completely, or just the features you need.

[Start a project](https://app.supabase.com) with the hosted platform or learn how to [host Supabase](/docs/guides/hosting/overview) yourself.

## Learn about features

<div class="container" style={{ padding: 0 }}>
  <div class="row is-multiline">
    {/* Database */}
    <div class="col col--4">
      <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>
    {/* API */}
    <div class="col col--4">
      <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>
    {/* Functions */}
    <div class="col col--4">
      <Link class="card" to="/docs/guides/functions" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Edge Functions</h4>
          <p>Server-side functions, distributed globally.</p>
        </div>
      </Link>
    </div>
    {/* Auth */}
    <div class="col col--4">
      <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>
    {/* Storage */}
    <div class="col col--4">
      <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>
    {/* Observability */}
    <div class="col col--4">
      <Link class="card" to="/docs/guides/platform/logs" style={{ height: '100%' }}>
        <div class="card__body">
          <h4>Observability</h4>
          <p>Monitor and debug your infrastucture.</p>
        </div>
      </Link>
    </div>
    {/*  */}
  </div>
</div>

## Start with a framework

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.themed ? (
              <x.logo width="20" alt={x.name} style={{ display: 'block', maxHeight: 20 }} />
            ) : (
              <ThemedImage
                style={{ display: 'block', maxHeight: 20 }}
                alt={x.name}
                width="20"
                sources={{
                  light: useBaseUrl(x.logo.light),
                  dark: useBaseUrl(x.logo.dark),
                }}
              />
            )}
            <p>{x.name}</p>
          </div>
        </Link>
      </div>
    ))}
  </div>
</div>