Component Showcase

Typography

Headings

This is an h2 heading above, and this is an h3 heading. Both get automatic id attributes for deep linking and Table of Contents integration.

Paragraph

Regular paragraph text uses text-text-secondary with relaxed leading. You can use bold text, italic text, and inline code within paragraphs.

Images

Standard markdown images render with rounded corners and a subtle border:

Image Carousel

Use the ImageCarousel component for multiple images with navigation:

Video

Embed tutorial videos with the TutorialVideo component:

Code

Inline Code

Use backticks for inline code: const x = 42, file paths like ~/Library/Application Support/Tuka, keyboard shortcuts like ⌘ + Shift + 5, and component names like <ImageCarousel />.

HTML-style tags also render as inline code: <video>, <canvas>, <StepList>.

Code Blocks

Bash:

brew install --cask tuka
tuka --version

TypeScript:

interface Recording {
  id: string;
  duration: number;
  format: "mp4" | "gif";
  resolution: [number, number];
}

function exportRecording(rec: Recording): Promise<string> {
  return process.export(rec);
}

JSON:

{
  "name": "tuka",
  "version": "2.0.0",
  "platform": "darwin",
  "features": ["recording", "editing", "export"]
}

Callouts

Step Lists

1. Open Tuka from your Applications folder.

2. Select a recording source from the picker.

3. Click Record to start capturing.

4. When finished, click Stop and edit your recording.

Blockquote

"Tuka changed how I create tutorials. What used to take hours now takes minutes." — A happy user

Lists

Unordered

• Screen recording with system audio
• Window capture with custom backgrounds
• Region selection with preset sizes
• Mobile device recording via USB

Ordered

1. Install Tuka from the website
2. Grant screen recording permissions
3. Choose your recording source
4. Hit record and create

Tables

Mermaid Diagrams

Use standard ```mermaid code blocks to render diagrams.

Flowchart

Sequence Diagram

State Diagram