mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
UI library/docs (#34377)
* Add faq sections * Update the faq. * Minor updates to the client and auth guides. * Add missing pages to the sidebar. * Rename the React category to React SPA. --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
This commit is contained in:
Terry SuttonandIvan Vasilov authored and GitHub committed
1 parent
861fe9ec88
commit
bc0977f492
9 files changed
+112
-38
No files matched your search
@@ -74,6 +74,12 @@ export const frameworkPages: Record<string, SidebarNavGroup> = {
|
||||
'react-router': {
|
||||
title: 'React Router',
|
||||
items: [
|
||||
{
|
||||
title: 'Client',
|
||||
href: '/docs/react-router/client',
|
||||
items: [],
|
||||
commandItemLabel: 'Supabase Client for React Router',
|
||||
},
|
||||
{
|
||||
title: 'Dropzone',
|
||||
href: '/docs/react-router/dropzone',
|
||||
@@ -118,8 +124,14 @@ export const frameworkPages: Record<string, SidebarNavGroup> = {
|
||||
],
|
||||
},
|
||||
react: {
|
||||
title: 'React',
|
||||
title: 'React SPA',
|
||||
items: [
|
||||
{
|
||||
title: 'Client',
|
||||
href: '/docs/react/client',
|
||||
items: [],
|
||||
commandItemLabel: 'Supabase Client for React SPA',
|
||||
},
|
||||
{
|
||||
title: 'Password-Based Auth',
|
||||
href: '/docs/react/password-based-auth',
|
||||
|
||||
@@ -3,32 +3,59 @@ title: FAQ
|
||||
description: Frequently asked questions
|
||||
---
|
||||
|
||||
<Accordion openBehaviour="single">
|
||||
<AccordionItem value="overwrite">
|
||||
<AccordionTrigger>Will it overwrite what I already have?</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
<Accordion openBehaviour="single" collapsible>
|
||||
<AccordionItem value="how">
|
||||
<AccordionTrigger>How does it work? </AccordionTrigger>
|
||||
<AccordionContent>
|
||||
You run a command in a new or existing project that looks something like this:
|
||||
```bash
|
||||
npx shadcn@latest add http://supabase.com/ui/r/password-based-auth-nextjs.json
|
||||
```
|
||||
This will add all of the files to your project and install the dependencies.
|
||||
After you've run the command, you can start using the components. In the case of Auth, you should be up and running with user sign in/sign up with just this one command.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="overwrite">
|
||||
<AccordionTrigger>Will it overwrite my existing files?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
No. If you run a command in an existing project, it will <u>not</u> overwrite your existing
|
||||
files. If there conflicting files, you will be asked what you want to do (leave them or
|
||||
overwrite them). If you run it in a new project, it will just add the new files to your project.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="existing-project">
|
||||
<AccordionTrigger>I've already started my a project, what should I do?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
You can still use these components, even if you've already started your project! The commands
|
||||
won't overwrite your existing files, but you should still be careful with the changes to makes
|
||||
sure you understand what's been added. You should commit your changes into Git before running
|
||||
these commands so you'll be able to see a clean diff of the changes.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="shadcn">
|
||||
<AccordionTrigger>I've already installed shadcn/ui, what should I do?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
You're off to a great start! You can now run an add command to add the desired component to your
|
||||
project.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="quickstart">
|
||||
<AccordionTrigger>
|
||||
I already started with `npx create-next-app -e with-supabase` what should I do now?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Our Next.js quickstart is a great starting point for building a full app with Supabase and
|
||||
Next.js. If you've already started with this template, you can use add command to add more
|
||||
components to your project.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="ai-builder">
|
||||
<AccordionTrigger>I used an AI builder to build my app, what should I do?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
If your app is already built, you can use any of the commands to drop components into your
|
||||
project. Your app likely already has a Supabase client set up, so you can just continue using
|
||||
that if it's working well for you.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="shadcn">
|
||||
<AccordionTrigger>I've already installed shadcn/ui, what should I do?</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="supabase">
|
||||
<AccordionTrigger>
|
||||
I already started with -e with-supabase what should I do?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="pages">
|
||||
<AccordionTrigger>I use pages router</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="app">
|
||||
<AccordionTrigger>I use app router</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="none">
|
||||
<AccordionTrigger>I use none of the things mentioned, what can I do?</AccordionTrigger>
|
||||
<AccordionContent>Answer</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
@@ -1,10 +1,34 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Components
|
||||
description: A flexible, open-source UI component library built on shadcn/ui, designed to simplify Supabase-powered projects with pre-built Auth, Storage, and Realtime features.
|
||||
---
|
||||
|
||||
## Code Block
|
||||
Our Supabase UI component library is a set of components built on top of the shadcn/ui registry system. It's designed to make building new or existing Supabase-powered projects faster and easier by providing pre-built solutions for common but challenging features—such as authentication, file uploads, and real-time updates.
|
||||
|
||||
```js
|
||||
console.log('Hello World')
|
||||
```
|
||||
Our Supabase UI library aims to solve these issues with:
|
||||
|
||||
- **Extensible components**: Modify and extend simple primitives as needed.
|
||||
|
||||
- **Composable Components**: Modular structure that makes components easy to integrate and combine.
|
||||
|
||||
- **Supabase Clients**: Interact with Supabase however you choose.
|
||||
|
||||
- **Scaffolding for Hard Problems**: Pre-built solutions for challenging features like sign-in/sign-up flows, file uploads, and real-time data sync.
|
||||
|
||||
- **New or existing projects**: Designed to work with brand new projects or to fit easily into existing ones.
|
||||
|
||||
### Extensible components
|
||||
|
||||
Our components are designed to be easily extensible. You can modify the code to fit your needs and use it as a starting point for your own components. You can change any of the code to fit your needs and use it as a starting point for your own components. The important part is that the code is designed to make the hard parts easy, and leave the easy parts for you.
|
||||
|
||||
### Composable components
|
||||
|
||||
Our components are designed to be easily composable. You can combine them to create new components that are tailored to your needs. If you want to change the design or behavior of a component, you can easily do so in your own codebase.
|
||||
|
||||
### Supabase Clients
|
||||
|
||||
The Supabase Clients are the backbone of your apps. They are designed to be easily integrated with your existing Supabase project. We provide both client-side and server-side clients for several major frameworks, and the code is designed to be easily integrated with your existing codebase.
|
||||
|
||||
### Scaffolding for Hard Problems
|
||||
|
||||
Setting up something like Auth should be easy, so we've done the hard work for you. Our components are designed to be easily integrated with your new or existing Supabase projects. Installing them drops the files into place so you can get the hard parts out of the way quickly.
|
||||
@@ -15,7 +15,7 @@ description: Supabase client for Next.js
|
||||
|
||||
This block installs a Supabase client to be used by Next.js. It's meant to be used with app router and it's fully SSR compatible.
|
||||
|
||||
If you started a project through `npx create-next-app -e with-supabase` command, this block is already included in your project.
|
||||
If you already have your Supabase client(s) set up and working well (through the through `npx create-next-app -e with-supabase` template or in another way) you can just continue using them.
|
||||
|
||||
To get started, you need to add an `.env` file to your project with the following entries:
|
||||
|
||||
@@ -27,3 +27,6 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=
|
||||
If you're using a local instance of supabase, you can find these values by running `supabase start` or `supabase status` (if already running).
|
||||
|
||||
If you're using supabase.com project, you can find them in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
|
||||
|
||||
This block provides Supabase clients designed for use with SSR by storing JWT tokens in cookies. If you're
|
||||
developing a React SPA, use the [React SPA client](/ui/docs/react-router/client) instead.
|
||||
@@ -42,3 +42,5 @@ To finish the installation:
|
||||
1. Set the site URL in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration).
|
||||
1. Set the `forgot-password` route in `forgot-password-form.tsx` component. The same route also needs to be configured as a redirect URL in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration). It should look something like this: `http://example.com/auth/forgot-password`.
|
||||
1. Update the redirect paths in the `login-form.tsx` and `update-password-form.tsx` components to point to the logged-in routes in your app.
|
||||
|
||||
You can use this block with pages router by simply moving the routes from the `app` folder into the `pages` folder and renaming them.
|
||||
@@ -10,3 +10,6 @@ description: Supabase client for React Router
|
||||
## Folder structure
|
||||
|
||||
<RegistryBlock itemName="supabase-client-react-router" />
|
||||
|
||||
This block provides Supabase clients designed for use with SSR by storing JWT tokens in cookies. If you're
|
||||
developing a React SPA, use the [React SPA client](/ui/docs/react-router/client) instead.
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: React
|
||||
description: Supabase client for React
|
||||
title: React Single Page Applications
|
||||
description: Supabase client for React Single Page Applications
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
<BlockItem name="supabase-client-react" description="Supabase Client for React" />
|
||||
<BlockItem name="supabase-client-react" description="Supabase Client for React SPA" />
|
||||
|
||||
## Folder structure
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Password-based Auth (React)
|
||||
description: Password-based Auth block for React
|
||||
title: Password-based Authentication
|
||||
description: Password-based authentication block for React Single Page Applications
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -16,3 +16,6 @@ The easiest way to use Tanstack Start with Supabase is to follow the following s
|
||||
## Folder structure
|
||||
|
||||
<RegistryBlock itemName="supabase-client-tanstack" />
|
||||
|
||||
This block provides Supabase clients designed for use with SSR by storing JWT tokens in cookies. If you're
|
||||
developing a React SPA, use the [React SPA client](/ui/docs/react-router/client) instead.
|
||||
Reference in new issue
Block a user