Examples
Practical examples and code snippets
Examples
Real-world examples to help you get started quickly.
Basic Page Structure
Here's a complete example of a well-structured documentation page:
---
title: My Feature
description: Learn about this amazing feature
icon: Sparkles
---
# My Feature
<Callout type="info">
This feature requires version 2.0 or higher.
</Callout>
## Overview
Brief introduction to the feature.
## Usage
Use tabs to show different usage patterns.
## See Also
<Cards>
<Card title="Related Feature" href="/docs/related" />
</Cards>Component Examples
Cards Grid
Create a grid of clickable cards:
Code:
<Cards>
<Card title="Getting Started" href="/docs/getting-started" />
<Card title="Configuration" href="/docs/configuration" />
<Card title="API Reference" href="/docs/api-reference" />
<Card title="Troubleshooting" href="/docs/troubleshooting" />
</Cards>Callout Variants
Info: Use this for helpful tips and additional information.
Warning: Use this to alert users about potential issues.
Error: Use this for critical information or errors.
Success: Use this to indicate successful completion or best practices.
Code:
<Callout type="info">
Info message
</Callout>
<Callout type="warning">
Warning message
</Callout>Installation Guide
Prerequisites: Ensure you have Node.js 18 or higher and npm, pnpm, or yarn installed.
Install the package using your preferred package manager (npm, pnpm, or yarn).
Configure your project by adding the necessary configuration files.
Installation commands:
# npm
npm install your-package
# pnpm
pnpm add your-package
# yarn
yarn add your-packageCode:
<Steps>
<Step>
Step 1 content
</Step>
<Step>
Step 2 content
</Step>
</Steps>Code Block Examples
With Syntax Highlighting
interface User {
id: number;
name: string;
email: string;
roles: Role[];
}
async function fetchUser(id: number): Promise<User> {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) {
throw new Error('Failed to fetch user');
}
return response.json();
}Multiple Languages
Here's how to implement a counter in different frameworks:
React:
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}Vue:
<template>
<button @click="count++">
Count: {{ count }}
</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>Svelte:
<script>
let count = 0;
</script>
<button on:click={() => count++}>
Count: {count}
</button>Angular:
@Component({
selector: 'app-counter',
template: `
<button (click)="increment()">
Count: {{ count }}
</button>
`
})
export class CounterComponent {
count = 0;
increment() {
this.count++;
}
}Table Example
Feature comparison table:
| Feature | Free | Pro | Enterprise |
|---|---|---|---|
| Basic Features | ✅ | ✅ | ✅ |
| Advanced Analytics | ❌ | ✅ | ✅ |
| Custom Branding | ❌ | ✅ | ✅ |
| Priority Support | ❌ | ❌ | ✅ |
| SSO / SAML | ❌ | ❌ | ✅ |
| SLA Guarantee | ❌ | ❌ | ✅ |
Collapsible Sections
Advanced Configuration Options
Custom Theme
export const theme = {
colors: {
primary: '#7C3AED',
secondary: '#F59E0B',
},
fonts: {
body: 'Inter, sans-serif',
heading: 'Cal Sans, sans-serif',
},
};Plugin System
plugins: [
myCustomPlugin(),
anotherPlugin({ option: true }),
]Migration Guide
Backup your current configuration
Update dependencies to latest version
Run the migration script
Test your application thoroughly
Migration command:
npm run migrateCombining Components
Here's an example combining multiple components:
Tutorial: Follow these steps to set up your first project.
Quick Start:
Run the CLI to create your project
Start the development server
# Quick start
npx create-my-app
npm run devManual Setup:
Install dependencies
Create configuration file
Start development server
# Manual setup
npm install my-package
# Create your config.ts file
npm run devDone! Your project is now set up and ready to use.