Skip to main content
Quartz comes with a comprehensive set of built-in components. This page documents all available components, their options, and usage examples.

​
Explorer

A file tree navigation component that displays your vault’s folder structure.
quartz/components/Explorer.tsx
export interface Options {
  title?: string
  folderDefaultState: "collapsed" | "open"
  folderClickBehavior: "collapse" | "link"
  useSavedState: boolean
  sortFn: (a: FileTrieNode, b: FileTrieNode) => number
  filterFn: (node: FileTrieNode) => boolean
  mapFn: (node: FileTrieNode) => void
  order: OrderEntries[]
}
Configuration Options:
​
title
string
default:"Explorer"
Custom title for the explorer section
​
folderDefaultState
'collapsed' | 'open'
default:"collapsed"
Whether folders should be collapsed or open by default
​
folderClickBehavior
'collapse' | 'link'
default:"link"
What happens when you click a folder:
  • collapse - Toggles folder open/closed
  • link - Navigates to folder page
​
useSavedState
boolean
default:"true"
Remember folder open/closed state between page visits
​
sortFn
function
Custom sorting function for files and folders. Default sorts folders first, then alphabetically.
​
filterFn
function
Filter which files/folders to show. Default hides the “tags” folder.
​
mapFn
function
Transform file tree nodes before display
Usage Example:
quartz.layout.ts
Component.Explorer({
  title: "File Explorer",
  folderDefaultState: "open",
  folderClickBehavior: "collapse",
  useSavedState: true,
  filterFn: (node) => node.name !== "private",
})
Full-text search with preview functionality.
quartz/components/Search.tsx
export interface SearchOptions {
  enablePreview: boolean
}
Configuration Options:
​
enablePreview
boolean
default:"true"
Show content preview in search results
Usage Example:
quartz.layout.ts
Component.Search({
  enablePreview: true,
})

​
Graph

Interactive visualization of page connections and links.
quartz/components/Graph.tsx
export interface D3Config {
  drag: boolean
  zoom: boolean
  depth: number
  scale: number
  repelForce: number
  centerForce: number
  linkDistance: number
  fontSize: number
  opacityScale: number
  removeTags: string[]
  showTags: boolean
  focusOnHover?: boolean
  enableRadial?: boolean
}

interface GraphOptions {
  localGraph: Partial<D3Config> | undefined
  globalGraph: Partial<D3Config> | undefined
}
Configuration Options: The Graph component has separate configs for local (current page) and global (all pages) views.
​
localGraph.depth
number
default:"1"
How many hops away from the current page to show
​
localGraph.scale
number
default:"1.1"
Zoom level for the graph
​
localGraph.repelForce
number
default:"0.5"
How strongly nodes push away from each other
​
localGraph.centerForce
number
default:"0.3"
How strongly nodes are pulled toward the center
​
localGraph.linkDistance
number
default:"30"
Target distance between connected nodes
​
globalGraph.enableRadial
boolean
default:"true"
Enable radial layout for global graph
Usage Example:
quartz.layout.ts
Component.Graph({
  localGraph: {
    depth: 2,
    scale: 1.2,
    repelForce: 0.8,
    showTags: true,
  },
  globalGraph: {
    depth: -1, // Show all nodes
    enableRadial: true,
    focusOnHover: true,
  },
})

​
TableOfContents

Automatic table of contents from page headings.
quartz/components/TableOfContents.tsx
interface Options {
  layout: "modern" | "legacy"
}
Configuration Options:
​
layout
'modern' | 'legacy'
default:"modern"
Visual style:
  • modern - Collapsible with smooth interactions
  • legacy - Simple <details> element
Usage Example:
quartz.layout.ts
Component.TableOfContents({
  layout: "modern",
})
Hierarchical navigation trail showing the current page’s location.
quartz/components/Breadcrumbs.tsx
interface BreadcrumbOptions {
  spacerSymbol: string
  rootName: string
  resolveFrontmatterTitle: boolean
  showCurrentPage: boolean
}
Configuration Options:
​
spacerSymbol
string
default:"❯"
Symbol between breadcrumb items
​
rootName
string
default:"Start"
Display name for the root/home page
​
resolveFrontmatterTitle
boolean
default:"true"
Use frontmatter title for folder names (may impact performance)
​
showCurrentPage
boolean
default:"true"
Include the current page in breadcrumbs
Usage Example:
quartz.layout.ts
Component.Breadcrumbs({
  spacerSymbol: ">",
  rootName: "Home",
  showCurrentPage: false,
})
Shows all pages that link to the current page.
quartz/components/Backlinks.tsx
interface BacklinksOptions {
  hideWhenEmpty: boolean
}
Configuration Options:
​
hideWhenEmpty
boolean
default:"true"
Hide the backlinks section when there are no backlinks
Usage Example:
quartz.layout.ts
Component.Backlinks({
  hideWhenEmpty: false,
})

​
Content Components

​
ArticleTitle

Displays the page title as an <h1> heading. No configuration options.
quartz.layout.ts
Component.ArticleTitle()

​
PageTitle

Site title that links back to home. No configuration options.
quartz.layout.ts
Component.PageTitle()

​
ContentMeta

Shows publication date and optional reading time.
quartz/components/ContentMeta.tsx
interface ContentMetaOptions {
  showReadingTime: boolean
  showComma: boolean
}
Configuration Options:
​
showReadingTime
boolean
default:"false"
Display estimated reading time
​
showComma
boolean
default:"true"
Show comma separator between date and reading time
Usage Example:
quartz.layout.ts
Component.ContentMeta({
  showReadingTime: true,
})

​
TagList

Displays tags from page frontmatter. No configuration options.
quartz.layout.ts
Component.TagList()

​
RecentNotes

Lists the most recently modified or published pages.
quartz/components/RecentNotes.tsx
interface Options {
  title?: string
  limit: number
  linkToMore: SimpleSlug | false
  showTags: boolean
  filter: (f: QuartzPluginData) => boolean
  sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
}
Configuration Options:
​
title
string
default:"Recent Notes"
Section heading
​
limit
number
default:"3"
Maximum number of notes to display
​
linkToMore
string | false
default:"false"
Slug to link for viewing all notes
​
showTags
boolean
default:"true"
Display tags for each note
​
filter
function
Filter which pages to include
​
sort
function
Custom sorting function
Usage Example:
quartz.layout.ts
Component.RecentNotes({
  title: "Latest Posts",
  limit: 5,
  linkToMore: "posts" as SimpleSlug,
  showTags: true,
  filter: (page) => page.frontmatter?.draft !== true,
})

​
Utility Components

​
Darkmode

Toggle button for light/dark theme. No configuration options.
quartz.layout.ts
Component.Darkmode()

​
ReaderMode

Toggle button for reader mode (focused reading view). No configuration options.
quartz.layout.ts
Component.ReaderMode()

​
Comments

Giscus-powered comments section.
quartz/components/Comments.tsx
type Options = {
  provider: "giscus"
  options: {
    repo: `${string}/${string}`
    repoId: string
    category: string
    categoryId: string
    themeUrl?: string
    lightTheme?: string
    darkTheme?: string
    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
    strict?: boolean
    reactionsEnabled?: boolean
    inputPosition?: "top" | "bottom"
    lang?: string
  }
}
Configuration Options:
​
options.repo
string
required
GitHub repository in format owner/repo
​
options.repoId
string
required
Repository ID from Giscus configuration
​
options.category
string
required
Discussion category name
​
options.categoryId
string
required
Category ID from Giscus configuration
​
options.mapping
string
default:"url"
How to map pages to discussions
Usage Example:
quartz.layout.ts
Component.Comments({
  provider: "giscus",
  options: {
    repo: "username/repo",
    repoId: "R_kgDOH...",
    category: "General",
    categoryId: "DIC_kwDOH...",
    mapping: "pathname",
    reactionsEnabled: true,
  },
})
Comments can be disabled per-page using frontmatter: comments: false
Site footer with links and copyright.
quartz/components/Footer.tsx
interface Options {
  links: Record<string, string>
}
Configuration Options:
​
links
Record<string, string>
Object mapping link text to URLs
Usage Example:
quartz.layout.ts
Component.Footer({
  links: {
    GitHub: "https://github.com/username",
    Twitter: "https://twitter.com/username",
    RSS: "/index.xml",
  },
})

​
Spacer

Adds vertical spacing. Typically used with MobileOnly.
quartz.layout.ts
Component.MobileOnly(Component.Spacer())

​
DesktopOnly / MobileOnly

Wrapper components that show content only on desktop or mobile.
quartz.layout.ts
Component.DesktopOnly(Component.TableOfContents())
Component.MobileOnly(Component.Spacer())

​
Flex

Flexbox layout container for arranging components.
quartz/components/Flex.tsx
type FlexConfig = {
  components: {
    Component: QuartzComponent
    grow?: boolean
    shrink?: boolean
    basis?: string
    order?: number
    align?: "start" | "end" | "center" | "stretch"
    justify?: "start" | "end" | "center" | "between" | "around"
  }[]
  direction?: "row" | "row-reverse" | "column" | "column-reverse"
  wrap?: "nowrap" | "wrap" | "wrap-reverse"
  gap?: string
}
Usage Example:
quartz.layout.ts
Component.Flex({
  components: [
    {
      Component: Component.Search(),
      grow: true,
    },
    { Component: Component.Darkmode() },
    { Component: Component.ReaderMode() },
  ],
  direction: "row",
  gap: "1rem",
})

​
ConditionalRender

Conditionally render a component based on page properties.
quartz/components/ConditionalRender.tsx
type ConditionalRenderConfig = {
  component: QuartzComponent
  condition: (props: QuartzComponentProps) => boolean
}
Usage Example:
quartz.layout.ts
Component.ConditionalRender({
  component: Component.Breadcrumbs(),
  condition: (page) => page.fileData.slug !== "index",
})

​
Page Components

These are full-page templates used by Quartz’s emitter plugins:
  • Content - Standard single-page template
  • TagContent - Tag index page showing all pages with a tag
  • FolderContent - Folder index page
  • NotFound - 404 error page
You typically don’t configure these directly; they’re used internally by Quartz.

Components Overview

Learn about Quartz’s component architecture

Custom Components

Create your own custom components

Build docs developers (and LLMs) love

Get started for freeTalk to us