dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-09 11:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
2761fb3aefdb84cbf18b7b9dbef00a652e9067f3
supabase/apps/docs/content/guides/getting-started.mdx
T
Danny White 3b06c6c7cc fix(docs): unify docs card hover and retire IconPanel (#48379) 
## What kind of change does this PR introduce?

Bug fix / docs UI polish.

## What is the current behavior?

- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths

## What is the new behavior?

**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice

**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed

**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`

| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |

## Additional context

Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.

`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.

## Test plan

- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-31 06:34:05 +10:00

397 lines
14 KiB
Plaintext
Raw Blame History

---
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-6 xl:col-span-4" passHref>
<GlassPanel title="Build with AI tools" hasLightIcon={true} 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-6 xl:col-span-4"
passHref
>
<GlassPanel title="API Keys" hasLightIcon={true} 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-6 xl:col-span-4"
passHref
>
<GlassPanel title="Local Development" hasLightIcon={true} 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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="AI, Vectors, and embeddings"
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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Subscription Payments (SaaS)" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Partner Gallery" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="React" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Next.js" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Nuxt" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Hono" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="RedwoodJS" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Flutter" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="iOS SwiftUI" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Android Kotlin" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="SvelteKit" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="SolidJS" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Vue" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="TanStack Start" 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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel title="Refine" 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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Next.js"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="React"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Vue 3"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Nuxt 3"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Angular"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="RedwoodJS"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Svelte"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="SvelteKit"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Refine"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Flutter"
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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Expo React Native"
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/auth/quickstarts/with-expo-react-native-social-auth"
passHref
className="col-span-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Expo React Native Social Auth"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Android Kotlin"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="iOS Swift"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Ionic React"
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-12 md:col-span-6 xl:col-span-4">
<GlassPanel
title="Ionic Vue"
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-12 md:col-span-6 xl:col-span-4"
>
<GlassPanel
title="Ionic Angular"
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>
Reference in new issue View Git Blame Copy Permalink