# Nextra MDX Features Showcase
This page demonstrates the various MDX components and markdown features available in Nextra. Each section links to the official documentation for more details.
> Reference: [Nextra Guide](https://nextra.site/docs/guide/)
---
## Importing Components
All Nextra components are imported from `nextra/components`:
```jsx
import { Callout, Steps, Tabs, Cards, FileTree } from 'nextra/components';
```
---
## Callout Component
> Reference: [Callout Documentation](https://nextra.site/docs/built-ins/callout)
Callouts highlight important information with different visual styles.
import { Callout } from 'nextra/components';
**Default Callout**: No type specified defaults to a neutral style.
**Info Callout**: Use this for general informational notes.
**Important Callout**: Use this to alert users about important information.
**Warning Callout**: Use this to alert users about potential issues.
**Error Callout**: Use this for critical warnings or errors.
### GitHub Alert Syntax Alternative
> Reference: [GitHub Alert Syntax](https://nextra.site/docs/guide/github-alert-syntax)
You can also use GitHub-style alerts in `.md` and `.mdx` files:
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
---
## Steps Component
> Reference: [Steps Documentation](https://nextra.site/docs/built-ins/steps)
The Steps component displays sequential instructions with automatic numbering.
import { Steps } from 'nextra/components';
### Install Dependencies
First, install the required packages using your package manager:
```bash
npm install nextra nextra-theme-docs
```
### Configure Next.js
Update your `next.config.mjs` to use the Nextra theme:
```js
import nextra from 'nextra';
const withNextra = nextra({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx',
});
export default withNextra();
```
### Create Content
Add your MDX files to the `src/content` directory and start writing!
---
## Tabs Component
> Reference: [Tabs Documentation](https://nextra.site/docs/built-ins/tabs)
Tabs organize content into switchable panels.
import { Tabs } from 'nextra/components';
```bash npm install nextra ```
```bash yarn add nextra ```
```bash pnpm add nextra ```
```bash bun add nextra ```
---
## Cards Component
> Reference: [Cards Documentation](https://nextra.site/docs/built-ins/cards)
Cards create visually appealing navigation or feature showcases.
import { Cards } from 'nextra/components';
### Single Card Example
---
## FileTree Component
> Reference: [FileTree Documentation](https://nextra.site/docs/built-ins/filetree)
The FileTree component visualizes project structure.
import { FileTree } from 'nextra/components';
---
## GitHub Flavored Markdown Features
> Reference: [Markdown Guide](https://nextra.site/docs/guide/markdown)
### Tables
| Feature | Supported | Documentation |
| -------- | --------- | --------------------------------------------------- |
| Callouts | â
Yes | [Link](https://nextra.site/docs/built-ins/callout) |
| Steps | â
Yes | [Link](https://nextra.site/docs/built-ins/steps) |
| Tabs | â
Yes | [Link](https://nextra.site/docs/built-ins/tabs) |
| Cards | â
Yes | [Link](https://nextra.site/docs/built-ins/cards) |
| FileTree | â
Yes | [Link](https://nextra.site/docs/built-ins/filetree) |
### Task Lists
- [x] Install Nextra
- [x] Configure Next.js
- [x] Create MDX content
- [ ] Deploy to production
- [ ] Add custom components
### Strikethrough
You can use ~~strikethrough~~ text by wrapping it in double tildes.
### Autolinks
URLs are automatically converted to links: https://nextra.site
### Custom Heading IDs
You can create custom heading anchors:
## Custom Anchor [#my-custom-anchor]
Link to this heading using `#my-custom-anchor`.
---
## Code Blocks with Syntax Highlighting
> Reference: [Syntax Highlighting](https://nextra.site/docs/guide/syntax-highlighting)
### JavaScript Example
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome to Nextra`;
}
greet('Developer');
```
### TypeScript Example
```typescript
interface User {
id: number;
name: string;
email: string;
}
function createUser(data: Omit): User {
return {
id: Math.random(),
...data,
};
}
```
### JSON Example
```json
{
"name": "nextra",
"version": "3.0.0",
"description": "Next.js static site generator",
"keywords": ["documentation", "mdx", "next.js"]
}
```
### Code Block with Filename
```tsx filename="app/layout.tsx"
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### Code Block with Line Highlighting
```js {3,5-7}
function fibonacci(n) {
if (n <= 1) return n;
let a = 0,
b = 1;
for (let i = 2; i <= n; i++) {
[a, b] = [b, a + b];
}
return b;
}
```
---
## Advanced Features
### Inline Code
Use backticks for `inline code` within paragraphs.
### Blockquotes
> "Documentation is a love letter that you write to your future self."
> â Damian Conway
### Lists
**Unordered:**
- First item
- Second item
- Nested item
- Another nested item
- Third item
**Ordered:**
1. First step
2. Second step
3. Third step
### Horizontal Rules
Use `---` to create horizontal dividers (as seen throughout this document).
---
## Next Steps
For more information, visit the [official Nextra
documentation](https://nextra.site/docs).