Nuxt UI v4 is officially released!

Components

Keyboard Key

GitHub
Display a keyboard key in a text block.

Usage

Use the default slot to set the text of the Kbd.

K

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can also use the value prop:

K
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

As explained in the Shortcuts page, you can use the metaSymbol property of the useShortcuts composable to display the meta key according to the user's OS.

K
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the Kbd.

U

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

ui
{ base?: string; padding?: string; size?: DeepPartial<{ xs: string; sm: string; md: string; }, any>; rounded?: string; font?: string; background?: string; ring?: string; default?: DeepPartial<{ size: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
KbdSize
config.default.size
"sm""xs""md"
value
string
null

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

InputMenu

Display an autocomplete input with real-time suggestions.

Link

Render a NuxtLink but with superpowers.