Nexd and MDX

Nexd is fully built on top of MDX, offering full support for standard Markdown syntax along with custom components for enhanced functionality.

Markdown Components

Code Blocks

Code blocks are powered by the rehype expressive code plugin. You can explore more in their documentation: Expressive Code Docs.

```bash frame="none"
npm i <pkg>
```

npm i <pkg>

Admonitions

Admonitions provide callout boxes with five variants: note, tip, info, warning, and danger.

Example

:::note
This is a note
:::

Nested Admonitions

::::warning
This is a warning

    :::danger
        This is a dangerous tip
    :::

::::

Tabs

Tabs allow switching between multiple components, such as code snippets, UI elements, or different views of content, with only one visible at a time.

:::tabs[npm, pnpm, yarn]

```bash frame="none"
npm install <pkg>
```

```bash frame="none"
pnpm install <pkg>
```

```bash frame="none"
yarn add <pkg>
```

:::

npm install <pkg>

pnpm install <pkg>

yarn add <pkg>

Browser Windows

Browser windows are suitable for displaying code output.

:::browser
This is a browser window
:::

Directory Trees

Easily visualize directory structures:

::tree[./src/app/, Nexd]

Nexd
├── (app)/
│   ├── layout.tsx
│   └── page.tsx
├── (docs)/
│   └── docs/
│       ├── [[...slug]]/
│       │   └── page.tsx
│       └── layout.tsx
├── globals.css
├── layout.tsx
├── not-found.tsx
└── sitemap.ts

If you need to visualize a custom tree instead of an existing directory, feel free to use <VirtualTree tree={tree} />.