diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
new file mode 100644
index 000000000..ccf19bcfa
--- /dev/null
+++ b/quartz/components/AliasList.tsx
@@ -0,0 +1,65 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+ const aliases = fileData.frontmatter?.aliases
+ if (aliases && aliases.length > 0) {
+ return (
+
+
Aliases
+
+ {aliases.map((alias: string) => (
+ -
+
+ {alias}
+
+
+ ))}
+
+
+ )
+ } else {
+ return null
+ }
+}
+
+AliasList.css = `
+.aliases {
+ margin: 1rem 0;
+}
+
+.aliases h4 {
+ margin: 0 0 0.5rem 0;
+ font-size: 0.9rem;
+ color: var(--gray);
+ font-weight: 600;
+}
+
+.aliases-list {
+ list-style: none;
+ display: flex;
+ padding-left: 0;
+ gap: 0.4rem;
+ margin: 0;
+ flex-wrap: wrap;
+}
+
+.aliases-list > li {
+ display: inline-block;
+ white-space: nowrap;
+ margin: 0;
+ overflow-wrap: normal;
+}
+
+.alias-item {
+ border-radius: 6px;
+ background-color: var(--lightgray);
+ color: var(--dark);
+ padding: 0.2rem 0.4rem;
+ margin: 0 0.1rem;
+ font-size: 0.8rem;
+ border: 1px solid var(--border);
+}
+`
+
+export default (() => AliasList) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index cece8e614..f2c9eea38 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -23,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
import Comments from "./Comments"
import Flex from "./Flex"
import ConditionalRender from "./ConditionalRender"
+import AliasList from "./AliasList"
export {
ArticleTitle,
@@ -50,4 +51,5 @@ export {
Comments,
Flex,
ConditionalRender,
+ AliasList,
}