MDX components

This page describes how to use MDX components (e.g. code blocks) in the Prisma docs.

TopBlock

Required at the top of the page to avoid styling issues:

<TopBlock>

This page describes how to use [MDX](https://mdxjs.com/) components (e.g. code blocks) in the Prisma docs.

</TopBlock>

Code blocks

Example:

async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}

Code:

```js
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

```prisma
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}
```

schema.prisma
1datasource db {
2  provider = "sqlite"
3  url      = env("DATABASE_URL")
4}
5
6generator client {
7  provider = "prisma-client-js"
8}
9
10model Post {
11  id        Int     @id @default(autoincrement())
12  title     String
13  content   String?
14  published Boolean @default(false)
15  author    User?   @relation(fields: [authorId], references: [id])
16  authorId  Int?
17}
18
19model User {
20  id    Int     @id @default(autoincrement())
21  email String  @unique
22  name  String?
23  posts Post[]
24}

```prisma file=schema.prisma
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}
```

async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}

```js copy
async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}
```

async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}

```js no-lines
async function main() {
  const allUsers = await prisma.user.findMany()
  console.log(allUsers)
}
```

test.ts
1async function main() {
+  added code
3
-  deleted code
5
✎  edited
✎  code
8
9  highlights
10  over multiple
11  lines can be done by using
12  a hyphen
13}

```js file=test.ts highlight=2;add|4;delete|6,7;edit|9-12;normal
async function main() {
  added code

  deleted code

  edited
  code

  highlights
  over multiple
  lines can be done by using
  a hyphen
}
```

File icons

There are 4 icons available:

• file.pdf
• dev.db
• Windows
• schema.ts
• schema.prisma

<FileWithIcon text="file.pdf" icon="file"/>
<FileWithIcon text="dev.db" icon="database"/>
<FileWithIcon text="Windows" icon="display"/>
<FileWithIcon text="schema.ts" icon="code"/>
<FileWithIcon text="schema.prisma" icon="prisma"/>

Tabbed blocks

Example:

Code:

<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>

<tab>

 **id** | **email**           | **name**  |
 :----- | :------------------ | :-------- |
 `1`    | `"sarah@prisma.io"` | `"Sarah"` |
 `2`    | `"maria@prisma.io"` | `"Maria"` |

</tab>

<tab>

```copy bash-symbol
npm run dev
```

</tab>

</TabbedContent>

Subsections

Lists all child pages of the current page to the specified depth:

<Subsections depth="3" />

Expand/Collapse section

Example:

<details><summary>Expand if you want to view more</summary>

Here's more!

</details>

Button link

Example:

Code:

<ButtonLink color="dark" type="primary" href="https://www.prisma.io/docs">
  Button text
</ButtonLink>

Code with output

Example:

yarn prisma init

$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init

✔ Your Prisma schema was created at prisma/schema.prisma.
  You can now open it in your favorite editor.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

Code:

<CodeWithResult expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init

✔ Your Prisma schema was created at prisma/schema.prisma.
  You can now open it in your favorite editor.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started
```

</cmdResult>

</CodeWithResult>

Example with custom output text

yarn prisma init

$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init

✔ Your Prisma schema was created at prisma/schema.prisma.
  You can now open it in your favorite editor.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

Code:

<CodeWithResult outputResultText="some output" expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init

✔ Your Prisma schema was created at prisma/schema.prisma.
  You can now open it in your favorite editor.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started
```

</cmdResult>

</CodeWithResult>

Quiz component

Example:

Code:

<Quiz
  question="Can Prisma be used with Node.js?"
  answerOptions={[
    {
      answer: 'It only works with potatoes',
      isCorrect: true,
    },
    {
      answer: 'It can be used with any Java backend!',
      isCorrect: false,
    },
    {
      answer: 'It can be used with any Node.js or TypeScript backend!',
      isCorrect: false,
    },
    {
      answer: 'It can be used with a Python backend!',
      isCorrect: false,
    },
  ]}
/>

Tip component

Example:

Code:

<Tip>

  To find out if Prisma is the right fit for your project, head on over to [What is Prisma](/concepts/overview/what-is-prisma) and read all about what makes Prisma, Prisma!

</Tip>

Admonition component

The Admonition shows a message to the user with different levels of priority.

• info: The message is informational.
• warning: The message is a warning.
• alert: The message is an alert.

<Admonition type="info">

This is some information that might be of use to the reader

</Admonition>

<Admonition type="warning">

This is some information we want to warn the user about, maybe they should know this before they start using a feature.

</Admonition>

<Admonition type="alert">

This is some information we want to alert the user to, maybe they should be aware of some **breaking changes**

</Admonition>