# Keyboard Key
> The keyboard key component shows which key or combination of keys performs a given action.

## Import

```js
import { Kbd } from '@gemini-suite/vera-react';
```

## Examples

```jsx
<Flex flow="column">
  <FlexItem>
    <Kbd>shift</Kbd> + <Kbd>H</Kbd>
  </FlexItem>
  <FlexItem>
    <Kbd>alt</Kbd> or <Kbd>option</Kbd>
  </FlexItem>
  <FlexItem>
    <Kbd>⌘D</Kbd>
  </FlexItem>
  <FlexItem>
    <Kbd>⌘⇧U</Kbd>
  </FlexItem>
</Flex>
```

---

## API Reference

| Name  | Type                                                      | Default | Description                                                                                                                                                                                                                                                                                  | Required |
| ----- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`  | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `kbd`   | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css` | `StitchesCss`                                             |         | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |