### Add Markdown/MDX Content

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Demonstrates adding Markdown/MDX content to `src/app/page.mdx`. This example includes basic Markdown, a link, and custom components like `Frame`, `Image`, and `Caption` provided by Prose UI or MDX setup.

```mdx
# Hello, world! 

The Viking landers, part of NASA's [Viking program](https://en.wikipedia.org/wiki/Viking_program), were the first U.S. missions to successfully land on Mars and transmit images and scientific data back to Earth in 1976.

<Frame align="center">
  <Image
    src="https://nssdc.gsfc.nasa.gov/image/spacecraft/viking_lander.jpg"
    alt="Viking lander"
  />
  <Caption>Viking lander</Caption>
</Frame>
```

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

### Install Prose UI and MDX Dependencies

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Installs core Prose UI, Next.js integration, MDX tools, and TypeScript types. This command uses pnpm, but any package manager can be used. It ensures all necessary packages for MDX rendering and Prose UI styling are available.

```bash
pnpm add @prose-ui/core @prose-ui/next @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
```

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

### Configuring Remark Plugins with Options (TypeScript)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/how-it-works.mdx

Provides an example of using the remarkPlugins function with an options object to configure features like image optimization. The function returns an array of plugins for MDX setup.

```typescript
const plugins = remarkPlugins({
  image: {
    imageDir: './public',
  },
})
```

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

### Create New Next.js Project

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Initializes a new Next.js project. This command prompts the user for project configuration. Ensure Webpack is used if `@next/mdx` is planned, as Turbopack is the default in newer Next.js versions.

```bash
npx create-next-app@latest
```

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

### Install Prose UI - JavaScript

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/index.mdx

This JavaScript code snippet demonstrates how to install and use Prose UI, showing variable declaration and string interpolation. It is useful for front-end development.

```javascript
const moons = 95
const text = `Jupiter has ${moons} moons, and Europa may harbor life in its hidden ocean.`
console.log(text)
```

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

### Import Prose UI CSS Styles

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Imports Prose UI's core CSS and KaTeX (for math formulas) into `src/app/globals.css`. This step ensures that Prose UI's visual styles and typography are applied throughout the application.

```css
@import "@prose-ui/next/prose-ui.css";
@import "@prose-ui/next/katex.min.css";
```

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

### Configure MDX Components with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Sets up the `mdx-components.tsx` file to override default MDX components with Prose UI's components. This ensures Prose UI's styling and functionality are applied to MDX content.

```tsx
import { mdxComponents } from "@prose-ui/next";
import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    ...mdxComponents,
  };
}
```

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

### Inline Math Example

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/math.mdx

Demonstrates how to use single dollar signs ($...$) for inline math formulas within a paragraph. This allows mathematical expressions to be seamlessly integrated into text.

```mdx
The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ for solving equations.
```

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

### Using Frame and Image Components in Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/images.mdx

Demonstrates how to use the Frame and Image components from Prose UI to display an image with a caption. This setup leverages Next.js image optimization provided by Prose UI.

```jsx
<Frame>
  <Image src="/img/jupiter-cropped.jpg" alt="Planet Jupiter" />
  <Caption>Juno Captures Jupiter. Credits: NASA/JPL-Caltech/SwRI/MSSS, Thomas Thomopoulos © CC BY</Caption>
</Frame>
```

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

### Configure Next.js for MDX Rendering

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Modifies `next.config.ts` to enable MDX rendering with Prose UI's remark plugins. This configuration ensures Next.js processes `.md` and `.mdx` files and applies the specified remark plugins for content transformation.

```typescript
import createMDX from "@next/mdx";
import { remarkPlugins } from "@prose-ui/core";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: remarkPlugins(),
  },
});

export default withMDX(nextConfig);
```

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

### Adjust Application Layout for Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/installation.mdx

Updates `app/layout.tsx` to apply Prose UI's base styling and font variables. It wraps the application content within a `body` tag with the `prose-ui` class and ensures correct font application.

```html
<html lang="en" className={`dark ${geistSans.variable} ${geistMono.variable}`}> 
  <body className="prose-ui antialiased"> 
    <div className="mx-auto max-w-3xl px-8">{children}</div> 
  </body> 
</html>
```

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

### Block Math Example

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/math.mdx

Illustrates the use of double dollar signs ($$...$$) for block math formulas. These are rendered as standalone, centered equations, ideal for complex mathematical expressions.

```mdx
$$ \int_{a}^{b} f(x) \, dx = F(b) - F(a) $$
```

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

### Center Image and Add Caption using Frame and Image

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/overview.mdx

This example demonstrates how to use the Frame and Image React components from Prose UI to center an image and provide it with a caption. It requires the Frame, Image, and Caption components to be imported and available in the scope.

```jsx
<Frame align="center">
   <Image src="/img/image.png" alt="Abstract art"/>
   <Caption>Center aligned image</Caption>
</Frame>
```

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

### Render Math with remarkInlineMath and remarkBlockMath | Prose UI

Source: https://context7.com/vrepsys/prose-ui/llms.txt

This snippet demonstrates the `remarkInlineMath` and `remarkBlockMath` plugins for rendering LaTeX math expressions within markdown. These plugins transform math syntax into React components for display using KaTeX. The setup requires `unified`, `remark-parse`, and `remark-math`.

```typescript
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkMath from 'remark-math'
import remarkInlineMath from '@prose-ui/core/remark-inline-math'
import remarkBlockMath from '@prose-ui/core/remark-block-math'

const processor = unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkInlineMath)
  .use(remarkBlockMath)

// Inline math: $E = mc^2$
// Output: <InlineMath>E = mc^2</InlineMath>

// Block math:
// $$
// \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
// $$
// Output: <BlockMath>{'\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}'}</BlockMath>

const result = await processor.process('The formula $E = mc^2$ shows energy-mass equivalence.')
```

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

### Convert Links with remarkLink Plugin | Prose UI

Source: https://context7.com/vrepsys/prose-ui/llms.txt

This example shows how to use the `remarkLink` plugin from `@prose-ui/core/remark-link` to transform markdown links into Next.js `Link` components. It facilitates internal navigation and supports optional URL mapping for dynamic link generation. It requires `unified` and `remark-parse`.

```typescript
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkLink from '@prose-ui/core/remark-link'

const processor = unified()
  .use(remarkParse)
  .use(remarkLink, {
    mapUrl: (url) => {
      // Add version prefix to documentation links
      if (url.startsWith('/docs/')) {
        return `/v2${url}`
      }
      return url
    }
  })

// Input: [Getting Started](/docs/introduction)
// Output: <Link href="/v2/docs/introduction">Getting Started</Link>

const result = await processor.process('[API Reference](/docs/api)')
```

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

### Override Callout Component Styles

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/styling.mdx

This CSS snippet illustrates how to customize the visual appearance of the callout component in Prose UI. It allows modification of text color, font size, font weight, and line height.

```css
:root {
  --p-callout-color-text: hsl(var(--p-color-text-low));
  --p-callout-font-size: '1rem';
  --p-callout-font-weight: 400;
  --p-callout-font-height: '1.5rem';
}
```

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

### Override Accent Colors for Light and Dark Modes

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/styling.mdx

This CSS snippet shows how to override the accent color variables for both light and dark modes in Prose UI. It sets the high, default, and low accent color shades using HSL values.

```css
:root {
  --p-color-accent-high: 0, 0%, 0%;
  --p-color-accent: 0, 0%, 10%;
  --p-color-accent-low: 0, 0%, 70%;
}
:root:is(.dark) {
  --p-color-accent-high: 180, 0%, 100%;
  --p-color-accent: 180, 0%, 90%;
  --p-color-accent-low: 180, 0%, 30%;
}
```

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

### Render GFM Tables with Frame Component in Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/tables.mdx

This example demonstrates how to embed a GFM (GitHub Flavored Markdown) table within the Prose UI Frame component. The Frame component allows for adding captions and controlling the alignment of the table content. No specific external dependencies are required beyond the Prose UI library itself.

```jsx
import { Frame, Caption } from '@prose-ui/core';

function MyTableComponent() {
  return (
    <Frame align="stretch">
      | Rocket                | Height   | Payload to LEO | Stages | Manufacturer                     |
      |:----------------------|:--------:|:--------------:|:------:|:---------------------------------|
      | SpaceX Starship       | 120 m    | 150 t          | 2      | SpaceX                           |
      | NASA SLS Block 1      | 98 m     | 95 t           | 2      | NASA (Boeing as prime contractor)|
      | Blue Origin New Glenn | 98 m     | 45 t           | 2      | Blue Origin                      |
      <Caption>A comparison of three modern super-heavy-lift launch vehicles</Caption>
    </Frame>
  );
}
```

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

### Override Fonts with Geist Font Family

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/styling.mdx

This CSS snippet demonstrates how to override the default font families in Prose UI to use Vercel's Geist font family. It targets core font variables for general text, headings, and monospace fonts.

```css
:root {
  --p-font-family: var(--font-geist-sans);
  --p-font-family-heading: var(--font-geist-sans);
  --p-font-family-mono: var(--font-geist-mono);
}
```

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

### Importing Individual Prose UI Components (JavaScript)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/how-it-works.mdx

Demonstrates importing individual React components like Callout, CodeBlock, Frame, Heading, Image, Link, InlineMath, and BlockMath from the '@prose-ui/next' package for direct use outside of MDX.

```javascript
import {
  Callout,
  CodeBlock,
  Frame,
  Heading,
  Image,
  Link,
  InlineMath,
  BlockMath,
} from "@prose-ui/next"
```

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

### Basic Table using GFM Syntax

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/table.mdx

Demonstrates how to create a basic table using GitHub Flavored Markdown (GFM) syntax. This is the fundamental way to represent tabular data within Prose UI. No external dependencies are required for this basic usage.

```md
| Rocket               | Height   | Payload to LEO | Stages |
|:---------------------|:--------:|:--------------:|:------:|
| SpaceX Starship      | 120 m    | 150 t          | 2      |
| NASA SLS Block 1     | 98 m     | 95 t           | 2      |
| Blue Origin New Glenn| 98 m     | 45 t           | 2      |
```

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

### Displaying Tip Callout with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/callouts.mdx

Shows how to implement the 'tip' variant of the Callout component from Prose UI. This component is recommended for presenting quick tips, best practices, or suggestions to users. It utilizes 'variant' and 'title' props for configuration.

```javascript
<Callout variant="tip" title="Tip">
  Great for quick tips, best practices, or suggestions.
</Callout>
```

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

### Importing Prose UI CSS Styles (CSS)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/how-it-works.mdx

Shows how to import the main Prose UI stylesheet and KaTeX stylesheet into your Next.js 'globals.css' file. The KaTeX import is only needed for math formula rendering.

```css
@import '@prose-ui/next/prose-ui.css';
@import '@prose-ui/next/katex.min.css';
```

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

### Display Local Image with Markdown

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Renders a local image using standard Markdown syntax. Assumes images are in the `public` folder by default. No resizing or alignment options are available with this basic syntax.

```markdown
![Abstract art](/img/demo-image.png)
```

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

### JSX: Tip Callout

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/callout.mdx

Renders a 'tip' variant of the Callout component, offering helpful advice or recommendations to users. It provides useful suggestions or shortcuts to enhance their experience. Requires 'variant' and 'title' props.

```jsx
<Callout variant="tip" title="Tip">
  The tip callout is used to offer helpful advice or recommendations. 
  It provides users with useful suggestions or shortcuts that can enhance their experience.
</Callout>
```

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

### Importing MDX Components from Prose UI (JavaScript)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/how-it-works.mdx

This snippet shows how to import the mdxComponents array from the '@prose-ui/next' package, which contains React server components for rendering various Markdown elements.

```javascript
import { mdxComponents } from "@prose-ui/next"
```

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

### Configure remarkPlugins for MDX Transformation | Prose UI

Source: https://context7.com/vrepsys/prose-ui/llms.txt

This snippet shows how to use the `remarkPlugins` function from `@prose-ui/core` to configure remark plugins for MDX compilation. It demonstrates basic usage with default options and advanced usage with custom configurations for link URL mapping, image processing, and math rendering.

```typescript
import { remarkPlugins } from '@prose-ui/core'
import { compile } from '@mdx-js/mdx'

// Basic usage with default options
const mdxContent = await compile(markdownSource, {
  remarkPlugins: remarkPlugins(),
})

// Advanced usage with custom configuration
const mdxContent = await compile(markdownSource, {
  remarkPlugins: remarkPlugins({
    link: {
      mapUrl: (url) => url.startsWith('/docs') ? `/v2${url}` : url
    },
    image: {
      imageDir: './public',
      basePath: '/static'
    },
    math: {
      singleDollarTextMath: false
    }
  }),
})
```

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

### Importing Remark Plugins from Prose UI (TypeScript)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/how-it-works.mdx

Illustrates importing the remarkPlugins function from the '@prose-ui/core' package. This function generates remark plugins for enhanced Markdown processing.

```typescript
import { remarkPlugins } from '@prose-ui/core'
```

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

### CodeBlock Component for Syntax Highlighting

Source: https://context7.com/vrepsys/prose-ui/llms.txt

Renders syntax-highlighted code blocks using Shiki, supporting customizable themes and line numbers. It can be used directly as a component or utilized via the `codeToHtml` function for custom rendering.

```typescript
import { CodeBlock, codeToHtml } from '@prose-ui/next'

// Direct component usage
export default function Example() {
  return (
    <CodeBlock
      language="typescript"
      title="api.ts"
      showLineNumbers
    >
      {`async function fetchUser(id: string) {
  const response = await fetch(`/api/users/${id}`)
  if (!response.ok) {
    throw new Error('Failed to fetch user')
  }
  return response.json()
}`}
    </CodeBlock>
  )
}

// Custom syntax highlighting with codeToHtml
export async function CustomHighlight() {
  const code = 'const greeting = "Hello, World!"'
  const html = await codeToHtml({
    code,
    language: 'javascript'
  })

  return <div dangerouslySetInnerHTML={{ __html: html }} />
}
```

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

### Import KaTeX CSS

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/math.mdx

This CSS import is required for Prose UI to render KaTeX math formulas correctly. It should be included in your global CSS file (e.g., globals.css).

```css
@import "@prose-ui/next/katex.min.css";
```

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

### Displaying Info Callout with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/callouts.mdx

Demonstrates how to use the 'info' variant of the Callout component from Prose UI. This component is suitable for displaying general information or helpful insights to the user. It takes a 'variant' and 'title' prop, with the content placed within the component's children.

```javascript
<Callout variant="info" title="Info">
  Use for general information or helpful insights.
</Callout>
```

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

### Process Images with remarkImage Plugin | Prose UI

Source: https://context7.com/vrepsys/prose-ui/llms.txt

Demonstrates the use of the `remarkImage` plugin from `@prose-ui/core/remark-image` to automatically process markdown images. This plugin extracts image dimensions and generates blur placeholders, optimizing them for Next.js Image component. It requires `unified` and `remark-parse`.

```typescript
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkImage from '@prose-ui/core/remark-image'

// Process markdown with automatic image optimization
const processor = unified()
  .use(remarkParse)
  .use(remarkImage, {
    imageDir: './public',
    basePath: '/assets'
  })

// Input markdown: ![Screenshot](/images/hero.png)
// Output JSX: <Image src="/assets/images/hero.png" alt="Screenshot" width={1920} height={1080} blurDataURL="data:image/jpeg;base64,...">

const result = await processor.process(markdownSource)
```

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

### Image Component for Next.js Optimization

Source: https://context7.com/vrepsys/prose-ui/llms.txt

A wrapper around Next.js's Image component, providing automatic optimization, blur placeholders, and responsive sizing. It supports automatic dimension injection and can be linked to external URLs.

```typescript
import { Image } from '@prose-ui/next'

// Basic usage with automatic dimensions (injected by remark-image)
export function Gallery() {
  return (
    <Image
      src="/photos/landscape.jpg"
      alt="Mountain landscape"
      width={1200}
      height={800}
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
    />
  )
}

// Without dimensions falls back to standard img tag
export function SimpleFigure() {
  return (
    <figure>
      <Image src="/icons/logo.svg" alt="Company logo" />
      <figcaption>Our brand</figcaption>
    </figure>
  )
}

// With link wrapper
export function LinkedImage() {
  return (
    <Image
      src="/thumbnails/preview.jpg"
      alt="Preview"
      href="/full-size-image"
      width={400}
      height={300}
    />
  )
}
```

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

### JSX: Info Callout

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/callout.mdx

Renders an 'info' variant of the Callout component, designed to attract more attention than a note for highlighting important information users should be aware of. Requires 'variant' and 'title' props.

```jsx
<Callout variant="info" title="Info">
  The info callout is a blue callout designed to capture more attention from the
  user than a simple note. It highlights important information that users should
  be aware of.
</Callout>
```

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

### Align Image and Add Caption with Frame and Caption

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Demonstrates using the `Frame` and `Caption` components to control image alignment (left, center, right) and add descriptive text. Requires importing `Frame` and `Caption` components.

```jsx
<Frame align="left">
   <Image width={200} src="/img/demo-image-01.png" alt="Abstract art"/>
   <Caption>Left aligned image</Caption>
</Frame>
<Frame align="center">
   <Image width={200} src="/img/demo-image-01.png" alt="Abstract art"/>
   <Caption>Center aligned image</Caption>
</Frame>
<Frame align="right">
   <Image width={200} src="/img/demo-image-03.png" alt="Abstract art"/>
   <Caption>Right aligned image</Caption>
</Frame>
```

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

### Displaying Warning Callout with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/callouts.mdx

Explains the implementation of the 'warning' variant of the Callout component in Prose UI. This variant is specifically designed to caution users about potential issues or risks. It requires 'variant' and 'title' props to be set.

```javascript
<Callout variant="warning" title="Warning">
  Use to caution users about potential issues.
</Callout>
```

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

### MDX Components for Next.js

Source: https://context7.com/vrepsys/prose-ui/llms.txt

Provides pre-configured MDX components for rendering markdown content within Next.js applications using the App Router and React Server Components (RSC). It allows for extending default components with custom ones.

```typescript
import { mdxComponents } from '@prose-ui/next'
import { MDXRemote } from 'next-mdx-remote/rsc'

// Use in Next.js App Router with RSC
export default async function BlogPost({ source }) {
  return (
    <article>
      <MDXRemote source={source} components={mdxComponents} />
    </article>
  )
}

// Extend with custom components
const customComponents = {
  ...mdxComponents,
  Video: ({ src }) => <video src={src} controls />,
  Tweet: ({ id }) => <TwitterEmbed tweetId={id} />
}

export function CustomPost({ source }) {
  return <MDXRemote source={source} components={customComponents} />
}
```

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

### Callout Component for Alerts

Source: https://context7.com/vrepsys/prose-ui/llms.txt

An alert-style component designed to highlight important information with various visual variants like 'note', 'warning', 'danger', 'info', and 'tip'. It is intended for use within MDX content.

```typescript
import { Callout } from '@prose-ui/next'

// In MDX content
export function DocumentationPage() {
  return (
    <>
      <Callout variant="note" title="Quick Tip">
        Remember to always validate user input before processing.
      </Callout>

      <Callout variant="warning" title="Breaking Change">
        Version 2.0 introduces a new API that is not backwards compatible.
        Please review the migration guide before upgrading.
      </Callout>

      <Callout variant="danger">
        Never commit sensitive credentials to version control.
      </Callout>

      <Callout variant="info" title="New Feature">
        Dark mode is now available in user preferences.
      </Callout>

      <Callout variant="tip">
        Use keyboard shortcuts Cmd+K to quickly search documentation.
      </Callout>
    </>
  )
}
```

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

### Display External Image with Markdown

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Renders an external image using Markdown. Since dimensions are unknown, these are converted to simple `img` tags. Suitable for images hosted on other domains.

```markdown
![Photo of Saturn from Cassini orbiter](https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg)
```

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

### JSX: Note Callout

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/callout.mdx

Renders a 'note' variant of the Callout component, used for supplementary information or tips without distracting from the main content. It requires a 'variant' and 'title' prop.

```jsx
<Callout variant="note" title="Note">
  The note callout is a subtle callout used to provide supplementary information
  or tips. It helps users gain additional insights without distracting from the
  main content.
</Callout>
```

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

### Transform Code Blocks with remarkCodeBlock | Prose UI

Source: https://context7.com/vrepsys/prose-ui/llms.txt

This snippet illustrates the `remarkCodeBlock` plugin from `@prose-ui/core/remark-code-block`, which converts markdown code blocks into `CodeBlock` components. It supports syntax highlighting and optional features like titles and line numbers. Dependencies include `unified` and `remark-parse`.

```typescript
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkCodeBlock from '@prose-ui/core/remark-code-block'

const processor = unified()
  .use(remarkParse)
  .use(remarkCodeBlock)

// Input markdown with metadata:
const markdown = `
```javascript title="example.js" showLineNumbers
function greet(name) {
  console.log(`Hello, ${name}!`)
}
```
`

// Output JSX:
// <CodeBlock language="javascript" title="example.js" showLineNumbers>
//   {'function greet(name) {
//     console.log(`Hello, ${name}!`)
//   }'}
// </CodeBlock>

const result = await processor.process(markdown)
```

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

### Displaying Note Callout with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/callouts.mdx

Illustrates the usage of the 'note' variant of the Callout component in Prose UI. This variant is ideal for providing additional context or side notes within the UI. Similar to other variants, it accepts 'variant' and 'title' props.

```javascript
<Callout variant="note" title="Note">
  Perfect for adding additional context or side notes.
</Callout>
```

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

### Markdown Lists - Numbered and Bulleted

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/typography.mdx

Demonstrates the Markdown syntax for creating both numbered and bulleted lists. These are standard Markdown features for organizing content.

```markdown
1. Cook pasta
2. Add tomatoes
3. Toss pasta with sauce
```

```markdown
- Classic spaghetti with tomato basil
- Penne with creamy pesto
- Fusilli with garlic and olive oil
```

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

### Centered Table with Caption using Frame

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/table.mdx

Shows how to center a table and add a caption by wrapping it in a `<Frame>` component with `align='center'`. This allows for better visual presentation and context for the table data. The `<Caption>` component is used to provide the table's title.

```mdx
<Frame align="center">

| Rocket               | Height   | Payload to LEO | Stages |
|:---------------------|:--------:|:--------------:|:------:|
| SpaceX Starship      | 120 m    | 150 t          | 2      |
| NASA SLS Block 1     | 98 m     | 95 t           | 2      |
| Blue Origin New Glenn| 98 m     | 45 t           | 2      |

<Caption>Table inside a frame with a caption</Caption>
</Frame>
```

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

### Displaying Danger Callout with Prose UI

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/demo/callouts.mdx

Demonstrates the usage of the 'danger' variant of the Callout component in Prose UI. This variant should be used to highlight critical errors or serious warnings that require immediate user attention. It is configured using 'variant' and 'title' props.

```javascript
<Callout variant="danger" title="Danger">
  Highlight critical errors or serious warnings.
</Callout>
```

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

### JSX: Warning Callout

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/callout.mdx

Renders a 'warning' variant of the Callout component, an orange callout alerting users about potential issues or cautionary details. It draws attention to situations requiring careful consideration. Requires 'variant' and 'title' props.

```jsx
<Callout variant="warning" title="Warning">
  The warning callout is an orange callout used to alert users about potential
  issues or cautionary details. It draws attention to situations that require
  careful consideration.
</Callout>
```

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

### Frame with Stretched Table and Caption (MDX)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/frame.mdx

Shows how to use the Frame component to display a table with 'stretch' alignment, including a caption. Works within MDX files.

```mdx
<Frame align="stretch">

| Rocket               | Height   | Payload to LEO | Stages |
|:---------------------|:--------:|:--------------:|:------:|
| SpaceX Starship      | 120 m    | 150 t          | 2      |
| NASA SLS Block 1     | 98 m     | 95 t           | 2      |
| Blue Origin New Glenn| 98 m     | 45 t           | 2      |

<Caption>Stretched table</Caption>
</Frame>
```

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

### Markdown Code Block with Title and Line Numbers

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/codeblock.mdx

This snippet demonstrates how to create a Markdown code block with a title and line numbers enabled. It uses MDX syntax with specific attributes for customization. No external dependencies are required beyond the Prose UI framework.

```mdx
````mdx title="Markdown syntax" showLineNumbers
```js showLineNumbers title="Code block title"
const x = "Hello world"
```
````
```

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

### React CodeBlock Component for Code Display

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/codeblock.mdx

This snippet shows how to use the React `CodeBlock` component for displaying code with titles and line numbers. It utilizes MDX syntax and expects a `language` prop to specify the syntax highlighting. The code content is passed as a template literal string.

```mdx
```mdx title="MDX syntax" showLineNumbers
<CodeBlock language="js" title="Code block title" showLineNumbers>
    {`const x = "Hello world"`}
</CodeBlock>
```
```

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

### JSX: Danger Callout

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/callout.mdx

Renders a 'danger' variant of the Callout component, a red callout warning users of critical errors or urgent issues. Its appearance ensures users address these problems immediately. Requires 'variant' and 'title' props.

```jsx
<Callout variant="danger" title="Danger">
  The danger callout is a red callout intended to warn users of critical errors
  or urgent issues. Its striking appearance ensures users address these problems
  immediately.
</Callout>
```

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

### Inline Markdown Image within Paragraph (MDX)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Embeds a local image directly within a text paragraph using MDX syntax and standard Markdown image syntax. Suitable for simple inline image references without component-specific features.

```mdx
Here's an example ![Alt text](/img/demo-inline-image.svg) of a Markdown image within a paragraph.
```

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

### Set Image Width with Prose UI Image Component

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Utilizes the Prose UI `Image` component to display a local image and explicitly set its width in pixels. The height is automatically calculated to maintain aspect ratio. Requires the `Image` component to be imported.

```jsx
<Image width={400} src="/img/demo-image-03.png" alt="Abstract art"/>
```

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

### Frame with Center Aligned Image (JSX)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/frame.mdx

Demonstrates using the Frame component to center-align an Image with a caption. Requires the Image and Caption components.

```jsx
<Frame align="center">
   <Image width={300} src="/img/demo-image-01.png" alt="Abstract art"/>
   <Caption>Center aligned image</Caption>
</Frame>
```

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

### Markdown Blockquote Styling with JSX

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/typography.mdx

Shows how to format blockquotes using Markdown syntax, rendered with JSX for potential styling or interaction. Blockquotes are used for emphasizing quoted text.

```jsx
> In October 2024, NASA launched the Europa Clipper spacecraft to study Jupiter's moon Europa, aiming to assess its potential habitability. 
> 
> Additionally, Japan's LignoSat, the world's first wooden satellite, was sent to the International Space Station to evaluate timber's viability for future space structures.
```

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

### Heading Component for Deep Linking

Source: https://context7.com/vrepsys/prose-ui/llms.txt

Generates unique ID attributes for heading elements automatically based on their text content, facilitating deep linking and table of contents generation. It supports custom ID assignment and works seamlessly with MDX.

```typescript
import { Heading } from '@prose-ui/next'

// Automatic ID generation from text content
export function Article() {
  return (
    <article>
      <Heading level={1}>Getting Started with Prose UI</Heading>
      {/* Renders: <h1 id="getting-started-with-prose-ui">Getting Started with Prose UI</h1> */}

      <Heading level={2}>Installation</Heading>
      {/* Renders: <h2 id="installation">Installation</h2> */}

      <Heading level={2} id="custom-anchor">Custom Section</Heading>
      {/* Renders: <h2 id="custom-anchor">Custom Section</h2> */}

      <Heading level={3}>Configuration Options</Heading>
      {/* Renders: <h3 id="configuration-options">Configuration Options</h3> */}
    </article>
  )
}

// Works seamlessly with MDX component mapping
// In MDX: ## Quick Start
// Renders: <h2 id="quick-start">Quick Start</h2>
```

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

### Inline Resized Image within Paragraph (MDX)

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/image.mdx

Embeds a resized local image directly within a text paragraph using MDX syntax and the `Image` component. Useful for incorporating graphics seamlessly into prose.

```mdx
Here's an example <Image src="/img/demo-inline-image.svg" width={100} alt="Abstract art" /> of a resized inline image within a paragraph.
```

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

### Basic Markdown Code Block without Title

Source: https://github.com/vrepsys/prose-ui/blob/main/apps/website/content/docs/components/codeblock.mdx

This snippet illustrates a simple Markdown code block without a title, but with line numbers enabled. It's a straightforward way to display code snippets when a title is not necessary. The language is inferred or can be specified.

```js
```js showLineNumbers
const x = "Code block without a title"
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.