> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/dip/cmdk/llms.txt
> Use this file to discover all available pages before exploring further.
# Vercel example
> Dark, minimal theme inspired by the Vercel command menu.
The Vercel example reproduces the clean, dark command menu found in the Vercel dashboard. It features a paged navigation model — pressing a shortcut or selecting an item pushes a new "page" onto a stack, and pressing `Backspace` on an empty input pops back. A subtle `scale(0.96)` bounce animation plays on `Enter` or when navigating between pages.
```tsx theme={null}
import React from 'react'
import { Command } from 'cmdk'
export function VercelCMDK() {
const ref = React.useRef(null)
const [inputValue, setInputValue] = React.useState('')
const [pages, setPages] = React.useState(['home'])
const activePage = pages[pages.length - 1]
const isHome = activePage === 'home'
const popPage = React.useCallback(() => {
setPages((pages) => {
const x = [...pages]
x.splice(-1, 1)
return x
})
}, [])
const onKeyDown = React.useCallback(
(e: KeyboardEvent) => {
if (isHome || inputValue.length) {
return
}
if (e.key === 'Backspace') {
e.preventDefault()
popPage()
}
},
[inputValue.length, isHome, popPage],
)
function bounce() {
if (ref.current) {
ref.current.style.transform = 'scale(0.96)'
setTimeout(() => {
if (ref.current) {
ref.current.style.transform = ''
}
}, 100)
setInputValue('')
}
}
return (
{
if (e.key === 'Enter') {
bounce()
}
if (isHome || inputValue.length) {
return
}
if (e.key === 'Backspace') {
e.preventDefault()
popPage()
bounce()
}
}}
>