Documentation Template Sample

Introduction

This is a sample documentation page demonstrating the Tutorial template features. You can use this format to document your projects, APIs, or design system components.

Features

Our markdown documentation supports several custom blocks and standard markdown features:

1. Warning Blocks

2. Danger Blocks

Code Examples

We use Shiki for syntax highlighting. Here is a TypeScript example:

interface ComponentProps {
  title: string;
  isActive: boolean;
  onToggle: () => void;
}

export function MyComponent({ title, isActive, onToggle }: ComponentProps) {
  return (
    <div className={`p-4 border-2 ${isActive ? 'border-black' : 'border-gray-300'}`}>
      <h2>{title}</h2>
      <button onClick={onToggle}>Toggle State</button>
    </div>
  );
}

Typography & Elements

You can use standard markdown elements like:

• Bold text and italic text
• External Links
• Blockquotes:

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

Tables

Component	Status	Description
Button	✅ Ready	Core interactive element
Card	✅ Ready	Container for content
Modal	🚧 WIP	Overlay dialog

---

This concludes the documentation sample.