Skip to content

Empty State

Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion.

Title

This should detail the actions you can take on this screen, as well as why it’s valuable.

When designed thoughtfully, empty states become an essential part of a smooth user experience, providing enough context to keep users working in a productive way. There are several approaches to explore that will match the needs a developer in different situations:

  • Blank Slate - Basic empty state for first run experience
  • Informational - Alternative for first use empty state, including in-line CTAs and supplemental documentation links
  • Educational - Launch a contextual onboarding flow to gain deeper understanding about that area of the app
  • Guide - Starter content that allows users to interact with data and learn the system by tinkering or setting up their environment

The most basic empty state should convey the state of the view.

Title

A message conveying the state of the product.

Code Editor

Help users by clearly explaining the benefit and utility of a product or feature, with a call to action and link to more information to help users progress.

Default to showing rather than telling the value of a feature. Certain entry points to a product may call for a unique empty state and a call to upgrade. Informational empty states will include a call to action.

Title

This should detail the actions you can take on this screen, as well as why it’s valuable.

Learn more
Code Editor

To help users new to a product or feature, use an empty state as a way to get started in a flow with starter content. Starter content allows users to begin using a product right away, making it easier for them to learn about what a product has to offer.

Starter content can only be used if the user has the correct permissions ot start using the feature or product.

Use content demonstrates primary features. If possible, provide content that’s personalized.

Title

This should detail the actions you can take on this screen, as well as why it’s valuable.

Edge Config

Ultra-low latency reads

KV

Durable Redis

Postgres

Serverless SQL

Blob

Fast object storage

Learn more
Code Editor

Offer instructions in code to get started with a feature, whether that’s a shorter quickstart command or a long form in-product tutorial. Keep headings action based and if possible, Group under `Resources` in the feature navigation.

Long-form tutorials should have interactive checkboxes when possible and collapse once steps are complete.

Getting Started

Get started using this Postgres by following the steps in one of these guides.

1

Connect to a project

Start by connecting to your existing project and then run vercel link in the CLI to link to the project locally.
If you don’t already have a project to connect to, you can get started with a Postgres template.

2

Pull your latest environment variables

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

3

Install our package

Then run npm install @vercel/postgres to install the Vercel Postgres SDK.

4

Use in code

This example uses Next.js. It will create a Server Component accessing a Postgres Database.
app/page.tsx
import { sql } from "@vercel/postgres";
export default async function Cart({
params
} : {
params: { user: string }
}): Promise<JSX.Element> {
const { rows } = await sql`SELECT * from CARTS where user_id=${params.user}`;
return (
<div>
{rows.map((row) => (
<div key={row.id}>
{row.id} - {row.quantity}
</div>
))}
</div>
);
}
Code Editor