### Example output of project creation

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/management-api/getting-started.mdx

Expected console output after successfully running the project creation script, showing project and database details.

```text
Created project:
 {
  createdAt: '2025-07-09T11:52:15.341Z',
  id: 'cmcvwftgs00v5zq0vh3kp7pms',
  name: 'demo-project-1752061932800',
  databases: [
    {
      createdAt: '2025-07-09T11:52:15.341Z',
      id: 'cmcvwftgs00v1zq0v0qrtrg8t',
      name: 'demo-project-1752061932800',
      connectionString: 'prisma+postgres://accelerate.prisma-data.net/?api_key=<api_key>',
      region: 'us-east-1',
      status: 'ready',
      apiKeys: [Array],
      isDefault: true
    }
  ]
}

Database details
- ID: cmcvwftgs00v2zq0vj3v0104j
- Created at: 2025-07-09T11:52:15.341Z
- API key: ey...<actual_api_key>
- Prisma Postgres connection string: prisma+postgres://accelerate.prisma-data.net/?api_key=ey...<actual_api_key>
- Direct TCP connection: db.prisma.io:5432
  - Host: db.prisma.io:5432
  - Username: <username>
  - Password: <password>
```

--------------------------------

### Install Accelerate Prisma Client extension

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/accelerate/getting-started.mdx

Command to install the latest Prisma Client and Accelerate extension.

```npm
npm install @prisma/client@latest @prisma/extension-accelerate
```

--------------------------------

### Project Setup Commands

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/nestjs-prisma-authentication-7D056s1s0k3l/index.mdx

A sequence of commands to navigate into the project directory, install dependencies, start the database, apply migrations, and run the application in development mode.

```shell
cd blog-backend-rest-api-nestjs-prisma
```

```shell
npm install
```

```shell
docker-compose up -d
```

```shell
npx prisma migrate dev
```

```shell
npm run start:dev
```

--------------------------------

### Navigate, Install Dependencies, and Start Development Server

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/fullstack-nextjs-graphql-prisma-oklidw1rhw/index.mdx

Changes into the cloned project directory, installs necessary npm packages, and starts the Next.js development server.

```shell
cd awesome-links
npm install
npm run dev
```

--------------------------------

### Download the example and install dependencies

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-client/deployment/traditional/deploy-to-heroku.mdx

Commands to create a directory, navigate into it, and download the Prisma Heroku example code.

```bash
mkdir prisma-heroku
cd prisma-heroku
curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=3 prisma-examples-latest/deployment-platforms/heroku
```

--------------------------------

### .env

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/accelerate/getting-started.mdx

Add DIRECT_DATABASE_URL for Prisma Migrate and Introspection.

```bash
DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=__API_KEY__"
DIRECT_DATABASE_URL="postgresql://user:password@host:port/db_name?schema=public" # [!code ++]
```

--------------------------------

### Install dependencies and start dev server

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/frameworks/solid-start.mdx

Commands to navigate into the project, install dependencies, and start the development server.

```npm
cd my-solid-prisma-app
npm install
npm run dev
```

--------------------------------

### Getting Started with GraphQL

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/graphql-vs-firebase-496498546142/index.mdx

Commands to install the GraphQL CLI and create a fullstack app using a boilerplate.

```shell
# Install the GraphQL CLI
npm install -g graphql-cli

# Create a fullstack app with React & GraphQL
graphql create myapp -b react-fullstack-basic
```

--------------------------------

### Using Accelerate extension with Query Insights

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/accelerate/getting-started.mdx

Example demonstrating the correct order of applying Accelerate and Query Insights extensions, with Query Insights applied before Accelerate.

```ts
const prisma = new PrismaClient({
  accelerateUrl: process.env.DATABASE_URL,
})
  .$extends(withOptimize())
  .$extends(withAccelerate());
```

--------------------------------

### Install npm dependencies

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx

Commands to navigate into the example directory and install npm dependencies.

```shell
cd graphql-sdl-first
npm install
```

--------------------------------

### Example with file path

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/making-guides.mdx

A TypeScript code example demonstrating Prisma client initialization with a database adapter, including a file path in the title metadata.

```typescript
import { PrismaClient } from "../generated/prisma"; import { PrismaPg } from "@prisma/adapter-pg"; const adapter = new PrismaPg({   connectionString: process.env.DATABASE_URL!, }); const prisma = new PrismaClient({   adapter, }); export default prisma;
```

--------------------------------

### Getting Started with Prisma CLI

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/prisma-raises-4-5m-to-build-the-graphql-data-layer-for-all-databases-663484df0f60/index.mdx

Commands to install Prisma CLI globally and initialize a new Prisma project.

```bash
npm install -g prisma
```

```bash
prisma init
```

--------------------------------

### Get the example code

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-client/deployment/traditional/deploy-to-flyio.mdx

Commands to download the Prisma deployment example for Render and navigate into its directory.

```bash
curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/deployment-platforms/render
cd render
```

--------------------------------

### apps/docs/content/docs/guides/frameworks/meta.json

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/making-guides.mdx

Example `meta.json` file for a guide category, showing how to add a new guide page.

```json
{
  "title": "Frameworks",
  "defaultOpen": true,
  "pages": [
    "nextjs",
    "astro",
    "nuxt",
    "your-new-guide" // [!code ++]
  ]
}
```

--------------------------------

### Start a specific database

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/cli/dev/start.mdx

Example of starting a single local Prisma Postgres database named 'mydb'.

```npm
npx prisma dev start mydb
```

--------------------------------

### Install and set up Doppler CLI

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/how-to-use-ai-safely-and-responsibly/index.mdx

Example commands for installing and setting up the Doppler CLI for secret management.

```bash
brew install doppler-cli # macOS
doppler login
doppler setup --project your_project_name --config your_config_name
```

--------------------------------

### Start multiple databases with a pattern

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/cli/dev/start.mdx

Example of starting multiple local Prisma Postgres databases using a glob pattern.

```npm
npx prisma dev start mydb*
```

--------------------------------

### Set up your project (example command)

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/making-guides.mdx

Instructions for creating or setting up the project

```npm
# Example command
npx create-next-app@latest my-app
cd my-app
```

--------------------------------

### Install react-router

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Command to install the react-router dependency.

```shell
yarn add react-router@2.8.1
```

--------------------------------

### Install react-relay

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Command to install the react-relay package.

```shell
yarn add react-relay
```

--------------------------------

### Initialize Prisma Example Project with `try-prisma` CLI

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/wnip-q4-2022-f66prwkjx72s/index.mdx

Run this command to quickly set up any project from the `prisma/prisma-examples` repository using the `try-prisma` CLI tool.

```shell
npx try-prisma
```

--------------------------------

### Download and install starter project dependencies

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/tutorial-building-a-realtime-graphql-server-with-subscriptions-2758cfc6d427/index.mdx

Terminal commands to download the starter project and install its npm dependencies.

```sh
curl https://codeload.github.com/nikolasburk/subscriptions/tar.gz/starter | tar -xz subscriptions-starter
cd subscriptions-starter
yarn install # or npm install
```

--------------------------------

### Install and Use get-graphql-schema

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Commands to install get-graphql-schema globally and download the GraphQL schema.

```shell
npm install -g get-graphql-schema
get-graphql-schema __RELAY_API_ENDPOINT__ > ./schema.graphql
```

--------------------------------

### .env

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/accelerate/getting-started.mdx

Replace your direct database URL with your new Accelerate connection string.

```bash
DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=__API_KEY__"

# Previous (direct) database connection string
# DATABASE_URL="postgresql://user:password@host:port/db_name?schema=public"
```

--------------------------------

### Install axios library

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/management-api/getting-started.mdx

Command to install the `axios` library, which will be used as the HTTP client to interact with the Management API.

```npm
npm install axios
```

--------------------------------

### Download graphql-sdl-first example

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx

Command to download the `graphql-sdl-first` example from the `prisma-examples` repository.

```shell
curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/typescript/graphql-sdl-first
```

--------------------------------

### Install Relay Compiler and Babel Plugin

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Command to install relay-compiler and babel-plugin-relay as development dependencies.

```shell
yarn add relay-compiler babel-plugin-relay --dev
```

--------------------------------

### Creating the Server

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Command to install the Graphcool CLI.

```shell
# If necessary, install `graphcool`
npm install -g graphcool
```

--------------------------------

### Migration history structure

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-migrate/getting-started.mdx

Example of the generated migration history directory.

```text
migrations/
  └─ 20210313140442_init/
    └─ migration.sql
```

--------------------------------

### Add an example model

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/cli/init.mdx

Set up a project with an example `User` model:

```npm
npx prisma init --with-model
```

--------------------------------

### Launch Studio without a Prisma Project

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/studio/getting-started.mdx

Launch Studio by providing a database connection string directly.

```npm
npx prisma studio --url="postgresql://user:password@localhost:5432/yourdb"
```

--------------------------------

### Installation

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Add Eclipse to your project's dependencies in `package.json`.

```json
{
  "dependencies": {
    "@prisma/eclipse": "workspace:*"
  }
}
```

--------------------------------

### Initialize npm and install TypeScript dependencies

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/management-api/getting-started.mdx

Commands to initialize npm and install `tsx`, `typescript`, and `@types/node` for a TypeScript project, then create an `index.ts` file.

```npm
npm init -y
npm install tsx typescript @types/node --save-dev
touch index.ts
```

--------------------------------

### Button Sizes

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of different button sizes available in Eclipse.

```tsx
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🚀</Button>
```

--------------------------------

### Use the connection string in your application

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/console/getting-started.mdx

Add the connection string to your .env file:

```bash
# For Accelerate
DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=YOUR_API_KEY"
```

--------------------------------

### Button Variants

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of different button variants available in Eclipse.

```tsx
import { Button } from "@prisma/eclipse";

<Button variant="default">Default</Button>
<Button variant="ppg">Prisma Pulse & Accelerate</Button>
<Button variant="orm">Prisma ORM</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link Button</Button>
```

--------------------------------

### 1. Set up your project

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/frameworks/nextjs.mdx

Then, navigate to the project directory:

```bash
cd nextjs-prisma
```

--------------------------------

### Set DATABASE_URL in .env file

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/studio/getting-started.mdx

Example of setting the database connection string in a .env file.

```env
DATABASE_URL="postgresql://user:password@localhost:5432/yourdb"
```

--------------------------------

### Install Prisma

Source: https://github.com/prisma/web/blob/main/apps/eclipse/content/design-system/components/steps.mdx

Add Prisma to your project and initialize it.

```bash
npm install prisma --save-dev
npx prisma init
```

--------------------------------

### Add service token to .env

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/management-api/getting-started.mdx

Example of how to add your Prisma service token to the `.env` file.

```bash
PRISMA_SERVICE_TOKEN="ey..."
```

--------------------------------

### Creating the App

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Commands to install create-react-app and create a new React application.

```shell
# If necessary, install `create-react-app`
npm install -g create-react-app

# Create React app called `instagram` (and navigate into it)
create-react-app instagram
cd instagram
```

--------------------------------

### Hello world swagger example with NestJS

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/documenting-apis-mjjpZ7E7NkVP/index.mdx

Steps to set up and run a NestJS application with Swagger documentation using Prisma examples.

```shell
curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/typescript/rest-nestjs
```

```shell
cd rest-nestjs
npm install
```

```shell
npx prisma migrate dev --name init
```

```shell
npm install @nestjs/swagger swagger-ui-express
```

```ts
// src/main.ts
import { NestFactory } from '@nestjs/core'
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger'
import { AppModule } from './app.module'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)
	const config = new DocumentBuilder()
    .setTitle('Prisma Examples')
    .setDescription('The prisma-examples REST API definition')
    .setVersion('1.0')
    .build();

  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000)
}
bootstrap()
```

```shell
npm run dev
```

--------------------------------

### Initial Integration Script Setup (Database Wait)

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/testing-series-3-aBUyF8nxAn/index.mdx

Sets up the environment, starts Docker Compose, and waits for the database to become ready using `wait-for-it.sh`.

```sh
DIR="$(cd "$(dirname "$0")" && pwd)"
source $DIR/setenv.sh
docker-compose up -d
+echo '🟡 - Waiting for database to be ready...'
+$DIR/wait-for-it.sh "${DATABASE_URL}" -- echo '🟢 - Database is ready!'
```

--------------------------------

### Responsive Design

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Example of applying responsive padding using Tailwind CSS classes.

```tsx
<div className="p-4 md:p-6 lg:p-12">
  Responsive padding
</div>
```

--------------------------------

### Download example code

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-client/deployment/traditional/deploy-to-koyeb.mdx

Commands to create a directory, navigate into it, and download the Prisma Koyeb example code.

```bash
mkdir prisma-on-koyeb
cd prisma-on-koyeb
curl https://github.com/koyeb/example-prisma/tarball/main/latest | tar xz  --strip=1
```

--------------------------------

### Gradients

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of using gradient background classes for ORM and PPG branded sections.

```tsx
<div className="bg-gradient-orm text-foreground-orm-reverse p-8 rounded-square-high">
  ORM Branded Section
</div>

<div className="bg-gradient-ppg text-foreground-ppg-reverse p-8 rounded-square-high">
  PPG Branded Section
</div>
```

--------------------------------

### Dark Mode

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Example of how to toggle dark mode by adding the `dark` class to a container.

```tsx
export function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={isDark ? "dark" : ""}>
      <div className="bg-background-default text-foreground-neutral">
        {/* All colors automatically adjust for dark mode */}
        <button onClick={() => setIsDark(!isDark)}>
          Toggle Dark Mode
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Initialize Bun Project and Install Dependencies

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/postgres-bloom-index-the-overlooked-postgres-feature/index.mdx

Commands to set up a new Bun project and install necessary dependencies like `pg` and `create-db` for database interaction, along with `@types/pg` for TypeScript.

```bash
bun init -y
bun add pg create-db
bun add -d @types/pg
```

--------------------------------

### Border Radius

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of using border radius tokens for different rounded styles.

```tsx
<div className="rounded-square-low">Low radius (3px)</div>
<div className="rounded-square">Default radius (6px)</div>
<div className="rounded-square-high">High radius (12px)</div>
<div className="rounded-circle">Circular (999px)</div>
```

--------------------------------

### Create project directory

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/management-api/getting-started.mdx

Commands to create a new directory for the project and navigate into it.

```bash
mkdir management-api-demo
cd management-api-demo
```

--------------------------------

### Typography

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of using typography tokens for font families, sizes, and line heights.

```tsx
// Font families
<h1 className="font-sans-display text-3xl font-bold">
  Display Heading
</h1>

<p className="font-sans text-md">
  Body text using Inter
</p>

<code className="font-mono text-sm">
  const code = true;
</code>

// Font sizes (with corresponding line heights)
<p className="text-sm">Small text (14px/20px)</p>
<p className="text-md">Medium text (16px/24px)</p>
<p className="text-lg">Large text (18px/28px)</p>
```

--------------------------------

### Clone Starter Repository

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/nestjs-prisma-authentication-7D056s1s0k3l/index.mdx

Clones the tutorial's starting point repository from GitHub, checking out the specified branch.

```shell
git clone -b end-relational-data git@github.com:prisma/blog-backend-rest-api-nestjs-prisma.git
```

--------------------------------

### Spacing

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of using consistent spacing tokens for margin, padding, and element sizes.

```tsx
// Margin
<div className="m-margin-md">Content with margin</div>

// Padding
<div className="p-6">
  Container with padding
</div>

// Element sizes
<div className="w-size-xl h-size-xl">Square element (32x32)</div>
```

--------------------------------

### migration.sql

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-migrate/getting-started.mdx

Example of appending custom SQL to a generated migration file to create a trigger function.

```sql
/* Generated migration SQL */

CREATE OR REPLACE FUNCTION notify_on_insert() -- [!code ++]
RETURNS TRIGGER AS $$ -- [!code ++]
BEGIN -- [!code ++]
  PERFORM pg_notify('new_record', NEW.id::text); -- [!code ++]
  RETURN NEW; -- [!code ++]
END; -- [!code ++]
$$ LANGUAGE plpgsql; -- [!code ++]
```

--------------------------------

### Connect using command line

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/studio/getting-started.mdx

Connect to a database by providing the connection string via the command line.

```bash
npx prisma studio --url="your-database-connection-string"
```

--------------------------------

### Extend Prisma Client with Accelerate extension

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/accelerate/getting-started.mdx

Example of extending a standard Prisma Client instance with the Accelerate extension.

```ts
import { PrismaClient } from "@prisma/client";
import { withAccelerate } from "@prisma/extension-accelerate";

const prisma = new PrismaClient({
  accelerateUrl: process.env.DATABASE_URL,
}).$extends(withAccelerate());
```

--------------------------------

### Run try-prisma CLI utility

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/try-prisma-announcment-Kv6bwRcdjd/index.mdx

Command to launch the `try-prisma` utility and explore example projects.

```shell
npx try-prisma
```

--------------------------------

### DeletePostMutation.js initial implementation

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/getting-started-with-relay-modern-46f8de6bd6ec/index.mdx

Initial setup for deleting posts, defining the mutation and a placeholder for updaters.

```javascript
import {
  commitMutation,
  graphql,
} from 'react-relay'
import {ConnectionHandler} from 'relay-runtime'
import environment from './Environment'

const mutation = graphql`
  mutation DeletePostMutation($input: DeletePostInput!) {
    deletePost(input: $input) {
      deletedId
    }
  }
`

export default (postId, viewerId) => {
  const variables = {
    input: {
      id: postId,
      clientMutationId: ""
    },
  }
  commitMutation(
    environment,
    {
      mutation,
      variables,
      onError: err => console.error(err),
      optimisticUpdater: (proxyStore) => {
        // ... you'll implement this in a bit
      },
      updater: (proxyStore) => {
        // ... this as well
      },
    },
  )
}
```

--------------------------------

### Combining Tokens

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Example of combining multiple design tokens and utility classes to style a well-styled component.

```tsx
<div className="
  bg-background-default
  text-foreground-neutral
  rounded-square-high
  border border-stroke-neutral
  shadow-lg
">
  Well-styled component
</div>
```

--------------------------------

### Set up your project

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/guides/deployment/turborepo.mdx

Navigate to the project root directory after setup.

```bash
cd turborepo-prisma
```

--------------------------------

### Colors

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Examples of using semantic color tokens for backgrounds, foregrounds, and strokes in both light and dark modes.

```tsx
// Backgrounds
<div className="bg-background-neutral">Neutral background</div>
<div className="bg-background-ppg">PPG branded background</div>
<div className="bg-background-orm">ORM branded background</div>

// Foreground (text/icons)
<span className="text-foreground-neutral">Default text</span>
<span className="text-foreground-error">Error text</span>
<span className="text-foreground-success">Success text</span>

// Strokes (borders)
<div className="border border-stroke-neutral">Bordered element</div>
```

--------------------------------

### Initialize a Prisma Compute Project

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/create-prisma-deploy-prisma-compute/index.mdx

Use `bun create prisma@latest` to scaffold a new Prisma Compute-ready application.

```bash
bun create prisma@latest
```

--------------------------------

### Navigate and Run React Project

Source: https://github.com/prisma/web/blob/main/apps/blog/content/blog/e2e-type-safety-graphql-react-1-I2GxIfxkSZ/index.mdx

After project generation, use these commands to enter the project directory, install dependencies, and start the development server.

```sh
cd react-client
npm install
npm run dev
```

--------------------------------

### Focus States

Source: https://github.com/prisma/web/blob/main/packages/eclipse/GETTING_STARTED.md

Example of defining an accessible focus state for a button using Tailwind CSS classes to apply a ring on focus.

```tsx
<button className="focus:ring-2 focus:ring-stroke-ppg focus:outline-none">
  Accessible button
</button>
```

--------------------------------

### main.ts

Source: https://github.com/prisma/web/blob/main/apps/docs/content/docs/orm/prisma-migrate/workflows/prototyping-your-schema.mdx

Create some example content:

```ts
const add = await prisma.user.create({
  data: {
    name: "Eloise",
    jobTitle: "Programmer",
    posts: {
      create: {
        title: "How to create a MySQL database",
        content: "Some content",
      },
    },
  },
});
```