CoreUI is in beta - APIs and components may change.
CoreUI
Base Components

Kbd

A very simple component for displaying keyboard key styling.


⌘K

Installation

Create a kbd.tsx file and paste the following code into it.

components/ui/kbd.tsx
// CoreUI Kbd v0.0.0import * as React from 'react';import { cn } from '@/utils/cn';function Kbd({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {  return (    <div      className={cn(        'flex h-5 items-center gap-0.5 whitespace-nowrap rounded bg-bg-white-0 px-1.5 text-subheading-xs text-text-soft-400 ring-1 ring-inset ring-stroke-soft-200',        className,      )}      {...rest}    />  );}export { Kbd as Root };

API Reference

Kbd.Root

This component is based on the <div> element and supports all of its props.

On this page