mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
3f205627e0
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature — the visual redesign itself. Part 5 of 6 in a stack that splits the library redesign into reviewable pieces. The four PRs beneath it carry the build, content and Markdown work; what's left here is layout, navigation and styling. ## What is the current behavior? The library is laid out like a documentation site: a sidebar tree of framework folders, a homepage that lists links, and a guide page that opens with prose. That shape suits reference material, but the library's job is to help someone find a block and install it — and the sidebar is the only way to discover one. ## What is the new behavior? The homepage is the catalog itself — blocks grouped by what they do (authentication, database, storage, realtime, messaging, AI, foundations) rather than by framework, each with a preview of what it renders, filterable by category. Navigation moves into a site header whose Explore menu opens the same categories, so the catalog is reachable from any page and the per-page sidebar tree is gone. A guide opens with what the reader came for: the block's name, the install command, and a preview pane with tabs — the running component and its files — before any prose. The file tree that used to sit mid-page under "Folder structure" is one of those tabs. Every guide also offers a copy of the agent prompt that points at its Markdown. Getting-started pages get the same treatment: the quickstart is now a framework-tabbed walkthrough rather than a wall of setup links. ## Additional context `BlockOverviewTabs` renders Preview and Files here. #50369, stacked on top of this one, adds the third "What's added" tab — it is the only part of the redesign that depends on the new resource analyzer, which is why it sits above this PR rather than below it. Also removes what the redesign orphaned: the table-of-contents component and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav and command-item configuration the new header replaced. The block source changes are typography only — auth card titles move from `text-2xl` to `font-medium text-lg tracking-normal` — which is what regenerates the auth registry artifacts. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a redesigned Supabase Library catalog with categorized blocks, framework-aware navigation, previews, file views, and installation actions. * Added framework-specific quickstart guides for Next.js, React, Vue, Nuxt, React Router, and TanStack Start. * Added copy-to-clipboard prompts, “Open in v0” actions, starter templates, and richer visual previews. * **Improvements** * Updated documentation layouts, FAQ content, typography, navigation, accessibility, and responsive behavior. * Improved mobile navigation, framework selection, and standardized block installation guidance. * Refined authentication and social-login block presentation with more consistent heading styles. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
135 lines
8.6 KiB
Plaintext
135 lines
8.6 KiB
Plaintext
---
|
|
title: Frequently Asked Questions
|
|
description: Exploring, installing, and adapting Supabase Library blocks
|
|
---
|
|
|
|
<div className="library-faq border-y">
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>What is Supabase Library?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Supabase Library is a collection of blocks and starter apps for Supabase projects. Browse by category, inspect a block, and follow its installation instructions. The files live in your project, so you can adapt them to your application.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>How do I install a block?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Open a block page, choose your framework, and run its installation command from your project directory. For example, this adds the Next.js password authentication block:
|
|
|
|
```bash
|
|
npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.json
|
|
```
|
|
|
|
The command adds the block's files and dependencies. Follow the block's setup instructions to configure your Supabase project, environment variables, and any required redirect URLs or email templates. Vue and Nuxt blocks use `shadcn-vue` instead of `shadcn`.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>What does a starter app include?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Starter apps are blocks that provide a starting point for a complete application. Each starter page includes its framework, setup commands, configuration steps, and source repository. Follow the commands on that page: some starters compose library blocks, while others use an existing application template.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Will installing a block overwrite existing files?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
The block installer asks how to handle conflicting files. Review those prompts and the resulting changes before accepting replacements. Commit your current work first so you can inspect the diff and recover any changes you want to keep.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Can I use blocks in an existing project?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Yes. Use the block's framework-specific instructions and adapt its files to your project structure. If you already have a working Supabase client, reuse it instead of replacing it. You can also copy the agent prompt from the block page to help adapt the installation to your conventions.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>What if I already use shadcn/ui?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
You can run the block's add command without initializing shadcn/ui again. Keep your existing `components.json`, aliases, and theme. Review the block's prerequisites if you encounter a setup issue.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>What if I started with the Next.js Supabase template?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
The `with-supabase` template already includes a Supabase client and authentication setup. Add the blocks you need and review overlapping files before replacing them. You do not need to create another app or repeat the client setup.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Do I need a framework quickstart first?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Use the [Quickstart](/library/docs/getting-started/quickstart) if you are starting a new project. An existing project can install blocks directly once it meets the block's framework and component-library requirements.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Can I add blocks to an app built with AI?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Yes, if the app uses a supported framework. Keep any Supabase client that is already working, install the block, and adapt its components to your app. Review the changes just as you would for any other project.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Which frameworks are supported?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
The library includes blocks for Next.js, React Router, TanStack Start, React SPA, Vue, and Nuxt. Support varies by block; the framework selector shows the available versions. Starter apps can use other frameworks, such as Flutter, with their own setup instructions.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Why are some blocks only available for React?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Some blocks build on React-specific libraries and components used in Supabase's own tools. Other blocks also have Vue and Nuxt versions. Check the framework selector on the block page for its current support; a React block cannot be installed directly into a different UI framework.
|
|
|
|
</details>
|
|
|
|
<details className="group border-b py-6 last:border-b-0">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-6 text-sm font-semibold [&::-webkit-details-marker]:hidden">
|
|
<span>Where can I get help?</span>
|
|
<span aria-hidden="true" className="font-mono text-lg font-normal text-foreground-lighter transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
|
|
</summary>
|
|
|
|
Start with the [Quickstart](/library/docs/getting-started/quickstart) and the setup notes on your block's page. For Supabase configuration, see the [documentation](https://supabase.com/docs). You can report library issues in the [Supabase repository](https://github.com/supabase/supabase/issues).
|
|
|
|
</details>
|
|
|
|
</div>
|