Files
supabase/apps/docs
Gildas Garcia b554f58106 chore: migrate Input usages to Shadcn components (#45429)
## Problem

We want to reduce the code we ship and maintain.

## Solution

- Migrate old `Input` usage to the new Shadcn `input`

This PR focuses on:
- DevToolbar
- design-system examples
- `www` usages
- `docs` usages

## Screenshots

### Docs: OAuth Apple

Before:
<img width="613" height="508" alt="image"
src="https://github.com/user-attachments/assets/1d2d7726-cc5e-471f-a2c2-995b9d7f70ee"
/>

After:
<img width="606" height="530" alt="image"
src="https://github.com/user-attachments/assets/ca4f522f-de9c-4edf-966b-70cad5015d0c"
/>

NOTE: Also used the `DataInput` for the secret once the inputs are
filled.

### Docs: Extensions

Before:
<img width="596" height="161" alt="image"
src="https://github.com/user-attachments/assets/16d2f548-90dc-4987-9954-7c47ac58e76e"
/>

After:
<img width="604" height="227" alt="image"
src="https://github.com/user-attachments/assets/62c74102-98c6-47a6-b19b-cbf67dfad68f"
/>

### WWW: Blog search
Before:
<img width="971" height="417" alt="image"
src="https://github.com/user-attachments/assets/efb0307e-60b5-4d8f-9823-c8b8996cdf32"
/>

After:
<img width="964" height="403" alt="image"
src="https://github.com/user-attachments/assets/2dc0decd-b773-4bc6-9a72-c43f352f8cbf"
/>

### WWW: Blog author search

Before:
<img width="953" height="337" alt="image"
src="https://github.com/user-attachments/assets/1f629704-ab7d-4e4b-878e-1838ab16037f"
/>

After:
<img width="1028" height="341" alt="image"
src="https://github.com/user-attachments/assets/d8d54dcb-3c00-46ea-b97f-55c16cda917f"
/>

### WWW: Assistant demo
Before:
<img width="421" height="715" alt="image"
src="https://github.com/user-attachments/assets/bcc4a591-d53c-4202-acf8-2b3d6cfd52d2"
/>

After:
<img width="435" height="731" alt="image"
src="https://github.com/user-attachments/assets/8a57c5da-5c9e-474d-a89e-2835d3498aef"
/>

### WWW: Integrations
Before:
<img width="740" height="599" alt="image"
src="https://github.com/user-attachments/assets/cf3d3d8a-b247-4e20-b47d-11976ca49c57"
/>

After:
<img width="911" height="492" alt="image"
src="https://github.com/user-attachments/assets/dcb5b6e8-f4e2-4801-b390-352390a0b486"
/>

### WWW: features
Before:
<img width="1098" height="491" alt="image"
src="https://github.com/user-attachments/assets/ea3645c5-df03-4eb9-b28c-41018e01c41e"
/>

After:
<img width="976" height="479" alt="image"
src="https://github.com/user-attachments/assets/4439a38e-6342-42cd-a859-1e599a8cf0f4"
/>

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

* **Style**
* Adjusted input widths and spacing for more consistent search and form
layouts.

* **Refactor**
* Standardized input components across apps and docs, and reimplemented
search controls as composed input groups with dedicated icon/action
areas.

* **Chores**
* Removed a deprecated legacy input variant along with its legacy styles
and tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 08:09:31 +02:00
..
2026-05-04 23:24:08 +07:00
2025-11-28 08:58:11 +00:00
2024-10-24 12:56:20 -02:30

Reference Docs

Supabase Reference Docs

Maintainers

If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.

Versioning

All tools have versioned docs, which are kept in separate folders. For example, the CLI has the following folders and files:

  • cli: the "next" release.
  • cli_spec: contains the DocSpec for the "next" release (see below).
  • cli_versioned_docs: a version of the documentation for every release (including the most current version).
  • cli_versioned_sidebars: a version of the sidebar for every release (including the most current version).

When you release a new version of a tool, you should also release a new version of the docs. You can do this via the command line. For example, if you just released the CLI version 1.0.1:

npm run cli:version 1.0.1

DocSpec

We use documentation specifications which can be used to generate human-readable docs.

  • OpenAPI: for documenting API endpoints.
  • SDKSpec (custom to Supabase): for SDKs and client libraries.
  • ConfigSpec (custom to Supabase): for configuration options.
  • CLISpec (custom to Supabase): for CLI commands and usage.

The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.

Contributing

To contribute to docs, see the developers' guide and contributing guide.