Components & UI Demo

This page demonstrates the documentation components available in Spreadu Docs. Scroll through to see the Clerk-style table of contents tracking your position on the right side.

Content Components

Fumadocs provides a rich set of components for structuring documentation content.

Callouts

Use callouts to highlight important information with different severity levels.

Cards

Cards help organize related content into a visual grid. They support links, icons, and descriptions.

Tabs

Tabs let you group content into switchable panels. They persist selection across the page.

brew install spreadu-cli
spreadu init my-album

winget install spreadu-cli
spreadu init my-album

curl -fsSL https://get.spreadu.com | sh
spreadu init my-album

Interactive Components

Components that let users interact with the content.

Steps

Steps guide users through sequential processes with numbered indicators.

Accordions

Accordions collapse content into expandable sections, useful for FAQs.

File Tree

Display project structures with an interactive file tree component.

Code & Data

Components for displaying code snippets, tables, and structured data.

Code Blocks

Syntax-highlighted code blocks with copy button and titles.

import { createAlbum } from "@spreadu/api";

const album = await createAlbum({
  name: "Summer Vacation 2026",
  dimensions: {
    width: 300,
    height: 300,
    unit: "mm",
  },
  template: "classic-square",
});

console.log(`Album created: ${album.id}`);

:root {
  --album-bg: oklch(0.98 0.01 240);
  --spread-border: oklch(0.85 0 0);
  --photo-shadow: 0 2px 8px oklch(0 0 0 / 0.1);
}

Tables

Standard markdown tables with enhanced styling.

Type Table

Document API parameters with a structured type table component.

Markdown Formatting

Standard markdown elements with Fumadocs typography styles.

Text Styles

Standard markdown formatting works out of the box:

• Bold text for emphasis
• Italic text for subtle emphasis
• inline code for technical terms
• Strikethrough for deprecated content
• Links for navigation

Blockquotes

"The best photo album is the one you actually finish designing."

— Spreadu Team

Lists

Unordered lists for feature overviews:

• Drag and drop photos onto spreads
• Auto-layout using smart templates
• Manual fine-tuning with precision controls
  • Rotation and cropping
  • Filters and adjustments
  • Text overlays

Ordered lists for step-by-step instructions:

1. Select photos from your library
2. Choose a spread template
3. Arrange photos on the canvas
4. Adjust spacing and alignment
5. Add captions and decorative elements
6. Preview and export

Keyboard Shortcuts

Common keyboard shortcuts in the Spreadu editor: