ManziloManzilo Docs

Component Showcase

All available fumadocs-ui components with live examples

A reference page showing every available component for use in Manzilo business docs.

Callout

Use callouts to highlight important information.

This is a default info callout.

Info

Useful for tips, notes, and supplementary information.

Warning

Use for important warnings that need attention.

Error

Use for critical errors or blockers.

Cards

Use cards for navigation or feature overviews.

Steps

Guide users through multi-step processes.

First step — Start with the most important action.

Second step — Build on the first step.

Third step — Complete the process.

Tabs

Show alternative versions of content side by side.

  • Currency: AED
  • Rent cycle: Cheques (PDC)
  • Registration: Ejari (DLD)

Accordion

Collapsible sections for FAQ-style content.

Files

Display file and folder structures.

pitch-deck.pdf

TypeTable

Document API parameters or data schemas.

PropTypeDefault
collectionPath
string
-
accessType
"token" | "public" | "password"
-
password
string
undefined
expiresAt
number
undefined

Tables

Standard markdown tables are fully styled.

NameTypeRequiredDescription
collectionPathstringYesThe path prefix for this token
accessType"token" | "public" | "password"YesHow the collection is accessed
passwordstringNoRequired when accessType is "password"
expiresAtnumberNoUnix timestamp for expiry

Code Blocks

Syntax-highlighted code blocks with copy button.

share-token.ts
const result = await createShareToken({
  collectionPath: "/investor-data-room",
  accessType: "password",
  password: "secret123",
  expiresAt: Date.now() + 7 * 24 * 60 * 60 * 1000, // 7 days
});
 
console.log(result.token); // 32-char hex token
curl example
curl -X POST https://your-deployment.convex.cloud/api/docs/validate-token \
  -H "Content-Type: application/json" \
  -d '{"token": "abc123...", "path": "/investor-data-room"}'

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Inline formatting

Text can be bold, italic, inline code, or strikethrough.

Links: Visit fumadocs

Blockquotes are also styled — great for pulling out key quotes or policy statements.

Lists

Unordered:

  • Item one
  • Item two
    • Nested item
    • Another nested item
  • Item three

Ordered:

  1. First item
  2. Second item
  3. Third item

On this page