diff --git a/components/command-menu.js b/components/command-menu.js
new file mode 100644
index 00000000..8de7601e
--- /dev/null
+++ b/components/command-menu.js
@@ -0,0 +1,291 @@
+import { Global } from '@emotion/react'
+import { useState, useEffect, useMemo } from 'react'
+import { Command } from 'cmdk'
+import { Box, Flex } from 'theme-ui'
+import { Down, Left, Search, Up } from '@carbonplan/icons'
+import { Badge } from '@carbonplan/components'
+import { useRouter } from 'next/router'
+
+import contents from '../data/contents.json'
+
+const COLUMNS = 4
+
+const Item = ({ date, type, page, summary, title }) => {
+ const router = useRouter()
+ return (
+
+ [4, 5, 5, 6].map((i) => `calc(${theme.space[i]}px - 3px)`),
+ },
+
+ "&[aria-disabled='true']": {
+ color: 'secondary',
+ cursor: 'not-allowed',
+ },
+ }}
+ onSelect={() => router.push(`https://carbonplan.org/${page}`)}
+ value={page}
+ >
+
+
+ {title}
+
+
+ {type}
+
+
+
+ {summary}
+
+
+ )
+}
+
+const CommandMenu = () => {
+ const [open, setOpen] = useState(false)
+ const [search, setSearch] = useState('')
+
+ // Toggle the menu when ⌘K is pressed
+ useEffect(() => {
+ const down = (e) => {
+ if (e.key === 'k' && e.metaKey) {
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener('keydown', down)
+ return () => document.removeEventListener('keydown', down)
+ }, [])
+
+ const filteredItems = useMemo(() => {
+ const regexp = new RegExp(search.trim(), 'i')
+
+ if (!search.trim()) {
+ return []
+ }
+ return contents
+ .filter((c) => c.title)
+ .filter(
+ ({ title, summary, page }) =>
+ title?.match(regexp) ||
+ page.replace('-', ' ').match(regexp) ||
+ summary?.match(regexp)
+ )
+ }, [search])
+
+ return (
+ <>
+ ({
+ '[cmdk-overlay]': {
+ width: '100vw',
+ height: '100vh',
+ backgroundColor: theme.colors.primary,
+ opacity: 0.5,
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ zIndex: 2000,
+ },
+ })}
+ />
+
+
+
+
+
+
+
+
+
+ {search ? 'No results found.' : ''}
+
+
+ {
+ /* TODO: replace with fetched contents.json files */
+ filteredItems.map((c) => (
+