Markdown

[My Link](https://github.github.com/gfm)

This also works: https://github.github.com/gfm.

import { Component } from './component';

<Component name="Hello" />

<Cards>
  <Card
    href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
    title="Fetching, Caching, and Revalidating"
  >
    Learn more about caching in Next.js
  </Card>
</Cards>

import { HomeIcon } from 'lucide-react';

<Cards>
  <Card icon={<HomeIcon />} href="/" title="Home">
    Go back to home
  </Card>
</Cards>

<Cards>
  <Card title="Fetching, Caching, and Revalidating">
    Learn more about `fetch` in Next.js.
  </Card>
</Cards>

<Callout>Hello World</Callout>

<Callout title="Title">Hello World</Callout>

<Callout title="Title" type="error">
  Hello World
</Callout>

# Hello `World`

# Heading [!toc]

This heading will be hidden from TOC.

# Another Heading [toc]

This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:

<MyComp />

# heading [#my-heading-id]

# heading [toc] [#my-heading-id]

---
title: Hello World
---

## Title

```js
console.log('Hello World');
```

```js title="My Title"
console.log('Hello World');
```

```tsx
<div>Hello World</div>  // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

```js
// [\!code word:config]
const config = {
  reactStrictMode: true,
};
```

```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<Tabs items={['Tab 1', 'Tab 2']}>
  <Tab value='Tab 1'>
    ```ts
    console.log('A');
    ```
  </Tab>
  <Tab value=

![Image](/image.png)