VaneUI

VaneUI

DocumentationGitHub

Basic Components

Kbd

Displays keyboard keys and shortcuts with monospace font, border, and a raised 3D effect. Ideal for documenting keyboard shortcuts.

SourceEdit this page

Displays keyboard keys and shortcuts with monospace font, border, and a raised 3D effect. Ideal for documenting keyboard shortcuts.

Basic Usage

Display keyboard keys with the Kbd component.

CtrlShiftEnterEscTab
react-icon
<Row flexWrap>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>Enter</Kbd>
  <Kbd>Esc</Kbd>
  <Kbd>Tab</Kbd>
</Row>

Key Combinations

Combine multiple Kbd elements to show keyboard shortcuts.

Ctrl

+

C

Copy

Ctrl

+

V

Paste

Ctrl

+

Shift

+

P

Command Palette

Alt

+

Tab

Switch Window

react-icon
<Col>
  <Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>C</Kbd><Text sm secondary>Copy</Text></Row>
  <Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>V</Kbd><Text sm secondary>Paste</Text></Row>
  <Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>Shift</Kbd><Text>+</Text><Kbd>P</Kbd><Text sm secondary>Command Palette</Text></Row>
  <Row><Kbd>Alt</Kbd><Text>+</Text><Kbd>Tab</Kbd><Text sm secondary>Switch Window</Text></Row>
</Col>

Sizes

Kbd elements in different sizes: xs, sm, md (default), lg, xl.

Ctrl

xs

Ctrl

sm

Ctrl

md

Ctrl

lg

Ctrl

xl

react-icon
<Row flexWrap itemsEnd>
  <Col itemsCenter>
    <Kbd xs>Ctrl</Kbd>
    <Text sm secondary>xs</Text>
  </Col>
  <Col itemsCenter>
    <Kbd sm>Ctrl</Kbd>
    <Text sm secondary>sm</Text>
  </Col>
  <Col itemsCenter>
    <Kbd>Ctrl</Kbd>
    <Text sm secondary>md</Text>
  </Col>
  <Col itemsCenter>
    <Kbd lg>Ctrl</Kbd>
    <Text sm secondary>lg</Text>
  </Col>
  <Col itemsCenter>
    <Kbd xl>Ctrl</Kbd>
    <Text sm secondary>xl</Text>
  </Col>
</Row>

Appearances

Different color appearances for keyboard keys.

PriBraAccSecTerSucDanWarInfLin
react-icon
<Row flexWrap>
  <Kbd>Pri</Kbd>
  <Kbd brand>Bra</Kbd>
  <Kbd accent>Acc</Kbd>
  <Kbd secondary>Sec</Kbd>
  <Kbd tertiary>Ter</Kbd>
  <Kbd success>Suc</Kbd>
  <Kbd danger>Dan</Kbd>
  <Kbd warning>War</Kbd>
  <Kbd info>Inf</Kbd>
  <Kbd link>Lin</Kbd>
</Row>

In Text Context

Kbd elements blend naturally within text content.

Press Ctrl + S to save your work.

Use Esc to close the dialog.

Hit F5 to refresh the page.

react-icon
<Col>
  <Text>Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save your work.</Text>
  <Text>Use <Kbd sm>Esc</Kbd> to close the dialog.</Text>
  <Text>Hit <Kbd info>F5</Kbd> to refresh the page.</Text>
</Col>

In Heading Context

Kbd uses an em-based geometry pipeline ā€” its font-size, padding, and border-radius all scale proportionally to the surrounding text. The same <Kbd> keeps its keycap look at body, subheading, section heading, and page title sizes.

Press Ctrl + S to save.

Subheading: hit Esc to close.

Section: use Tab to focus

āŒ˜ + K

react-icon
<Col>
  <Text>Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save.</Text>
  <Title>Subheading: hit <Kbd>Esc</Kbd> to close.</Title>
  <SectionTitle>Section: use <Kbd>Tab</Kbd> to focus</SectionTitle>
  <PageTitle><Kbd>āŒ˜</Kbd> + <Kbd>K</Kbd></PageTitle>
</Col>

Shortcut Table

Display a set of keyboard shortcuts in a structured layout.

Undo

Ctrl

+

Z

Redo

Ctrl

+

Shift

+

Z

Find

Ctrl

+

F

Save

Ctrl

+

S

Select All

Ctrl

+

A
react-icon
<Col>
  <Row justifyBetween><Text>Undo</Text><Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>Z</Kbd></Row></Row>
  <Row justifyBetween><Text>Redo</Text><Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>Shift</Kbd><Text>+</Text><Kbd>Z</Kbd></Row></Row>
  <Row justifyBetween><Text>Find</Text><Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>F</Kbd></Row></Row>
  <Row justifyBetween><Text>Save</Text><Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>S</Kbd></Row></Row>
  <Row justifyBetween><Text>Select All</Text><Row><Kbd>Ctrl</Kbd><Text>+</Text><Kbd>A</Kbd></Row></Row>
</Col>

Kbd Props

PropCategoryDefaultDescription
accent

Appearance

Accent color appearance (rose)

brand

Appearance

Brand color appearance (blue)

danger

Appearance

Danger color appearance (red)

info

Appearance

Info color appearance (cyan)

inherit

Appearance

Inherit appearance from parent ā€” suppresses own data-appearance/data-variant, uses parent's CSS variables

link

Appearance

Link color appearance (blue, for hyperlinks)

primary

Appearance

āœ“

Primary color appearance (gray)

secondary

Appearance

Secondary color appearance (gray)

success

Appearance

Success color appearance (green)

tertiary

Appearance

Tertiary color appearance

warning

Appearance

Warning color appearance (amber)

disabled

Disabled

Disable the component ā€” reduces opacity, changes cursor to not-allowed, and prevents interaction

flex1

Flex

Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)

flexAuto

Flex

Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)

flexNone

Flex

Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)

heading

Font Family

Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)

mono

Font Family

āœ“

Monospace font family

sans

Font Family

Sans-serif font family (default)

serif

Font Family

Serif font family

italic

Font Style

Italic font style

notItalic

Font Style

Not italic (normal) font style

black

Font Weight

Black font weight (900)

bold

Font Weight

Bold font weight (700)

extrabold

Font Weight

Extra bold font weight (800)

extralight

Font Weight

Extra light font weight (200)

light

Font Weight

Light font weight (300)

medium

Font Weight

Medium font weight (500)

normal

Font Weight

Normal font weight (400)

semibold

Font Weight

āœ“

Semibold font weight (600)

thin

Font Weight

Thin font weight (100)

inheritSize

Inherit Size

Inherit font-size and line-height from the nearest parent typography element

noInheritSize

Inherit Size

Keep own font-size; do not inherit from parent

noPadding

Padding

Disable internal padding

padding

Padding

āœ“

Enable internal padding

paddingX

Padding

Enable only horizontal padding

paddingY

Padding

Enable only vertical padding

pill

Shape

Fully rounded corners (circular)

rounded

Shape

āœ“

Medium rounded corners (default)

sharp

Shape

No rounded corners (square)

noShrink

Shrink

Prevent the flex item from shrinking below its content size (= `shrink-0`)

lg

Size

Large size

md

Size

āœ“

Medium size (default)

sm

Size

Small size

xl

Size

Extra large size

xs

Size

Extra small size

textCenter

Text Align

Align text to center

textJustify

Text Align

Justify text

textLeft

Text Align

Align text to left

textRight

Text Align

Align text to right

lineThrough

Text Decoration

Add strikethrough/line-through decoration across text

noUnderline

Text Decoration

Remove text decoration (no underline, strikethrough, etc.)

overline

Text Decoration

Add overline decoration above text

underline

Text Decoration

Add underline decoration below text

capitalize

Text Transform

Capitalize first letter of each word

lowercase

Text Transform

Transform text to lowercase

normalCase

Text Transform

Normal text case (no transformation)

uppercase

Text Transform

Transform text to uppercase

filled

Variant

Filled variant - solid background with contrasting text color

ghost

Variant

Ghost variant - transparent background, no border, appearance-colored text, tinted hover background

outline

Variant

āœ“

Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) ā€” documented on Common Props
PropCategoryDefaultDescription
border

Border

āœ“

Enable border on all sides

borderB

Border

Enable border on bottom

borderL

Border

Enable border on left

borderR

Border

Enable border on right

borderT

Border

Enable border on top

borderX

Border

Enable border on left and right

borderY

Border

Enable border on top and bottom

noBorder

Border

Disable all borders

cursorDefault

Cursor

Default cursor - standard arrow

cursorMove

Cursor

Move cursor - indicates draggable element

cursorNone

Cursor

No cursor - hides the cursor

cursorNotAllowed

Cursor

Not-allowed cursor - indicates disabled state

cursorPointer

Cursor

Pointer cursor - indicates clickable element

cursorText

Cursor

Text cursor - indicates selectable text

cursorWait

Cursor

Wait cursor - indicates loading/processing

block

Display

Block display - takes full width, new line

contents

Display

Contents display - element's box is removed, children display as if parent didn't exist

flex

Display

Flex display - flexbox container

grid

Display

Grid display - CSS grid container

hidden

Display

Hidden display - element is not visible

inline

Display

āœ“

Inline display - flows with text

inlineBlock

Display

Inline-block display - inline but with block properties

inlineFlex

Display

Inline-flex display - inline flexbox container

inlineGrid

Display

Inline-grid display - inline grid container

table

Display

Table display - behaves like table element

tableCell

Display

Table-cell display - behaves like td element

column

Flex Direction

Flex direction column (vertical)

columnReverse

Flex Direction

Flex direction column-reverse

row

Flex Direction

Flex direction row (horizontal)

rowReverse

Flex Direction

Flex direction row-reverse

focusVisible

Focus Visible

Enable focus-visible outline

noFocusVisible

Focus Visible

Disable focus-visible outline

gap

Gap

Enable gap spacing between children

noGap

Gap

Disable gap spacing

hAuto

Height

Set height to auto

hFit

Height

āœ“

Set height to fit-content

hFull

Height

Set height to 100%

hScreen

Height

Set height to 100vh (viewport height), removes max-height constraint

desktopHide

Hide

Hide element on desktop devices and below (max-desktop: 80rem)

mobileHide

Hide

Hide element on mobile devices and below (max-mobile: 48rem)

tabletHide

Hide

Hide element on tablet devices and below (max-tablet: 64rem)

itemsBaseline

Items

Align items to baseline

itemsCenter

Items

Align items to center

itemsEnd

Items

Align items to end (bottom/right)

itemsStart

Items

Align items to start (top/left)

itemsStretch

Items

Stretch items to fill container

justifyAround

Justify

Distribute items with space around them

justifyBaseline

Justify

Align items along their baseline on main axis

justifyBetween

Justify

Distribute items with space between them

justifyCenter

Justify

Center items along the main axis

justifyEnd

Justify

Pack items toward the end of the main axis

justifyEvenly

Justify

Distribute items with equal space around them

justifyStart

Justify

Pack items toward the start of the main axis

justifyStretch

Justify

Stretch items to fill the main axis

overflowAuto

Overflow

Auto overflow - show scrollbars if needed

overflowClip

Overflow

Clip overflow - hard clip without scrollbars

overflowHidden

Overflow

Hidden overflow - clip content without scrollbars

overflowScroll

Overflow

Scroll overflow - always show scrollbars

overflowVisible

Overflow

Visible overflow - content extends beyond bounds

overflowXAuto

Overflow

Auto overflow on X-axis only

overflowXClip

Overflow

Clip overflow on X-axis only

overflowXHidden

Overflow

Hidden overflow on X-axis only

overflowXScroll

Overflow

Scroll overflow on X-axis only

overflowXVisible

Overflow

Visible overflow on X-axis only

overflowYAuto

Overflow

Auto overflow on Y-axis only

overflowYClip

Overflow

Clip overflow on Y-axis only

overflowYHidden

Overflow

Hidden overflow on Y-axis only

overflowYScroll

Overflow

Scroll overflow on Y-axis only

overflowYVisible

Overflow

Visible overflow on Y-axis only

absolute

Position

Absolute positioning

fixed

Position

Fixed positioning

relative

Position

Relative positioning

static

Position

Static positioning

sticky

Position

Sticky positioning

responsive

Responsive

Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap

reverse

Reverse

Reverse the order of children

noRing

Ring

Disable focus ring

ring

Ring

Enable focus ring

noShadow

Shadow

Disable drop shadow

shadow

Shadow

Enable drop shadow

noTransition

Transition

Disable transitions for instant state changes

transition

Transition

āœ“

Enable smooth transitions between states

transparent

Transparent

Disable background color - makes component background transparent

whitespaceBreakSpaces

Whitespace

Break words to prevent overflow

whitespaceNormal

Whitespace

Normal wrapping - default browser behavior

whitespaceNowrap

Whitespace

āœ“

No wrap - text stays on single line

whitespacePre

Whitespace

Preserve whitespace and line breaks

whitespacePreLine

Whitespace

Preserve line breaks, collapse spaces, wrap text

whitespacePreWrap

Whitespace

Preserve whitespace, wrap text

wAuto

Width

Set width to auto

wFit

Width

āœ“

Set width to fit-content

wFull

Width

Set width to 100%

wScreen

Width

Set width to 100vw (viewport width), removes max-width constraint

flexNoWrap

Wrap

Force flex items to stay on single line (may overflow)

flexWrap

Wrap

Allow flex items to wrap to new lines when container is too narrow

flexWrapReverse

Wrap

Wrap flex items in reverse order (last items wrap first)

More in Basic Components

ButtonBadgeChipCheckboxLabelCodeDividerInputImgIconIconButtonMark

On this page

KbdBasic UsageKey CombinationsSizesAppearancesIn Text ContextIn Heading ContextShortcut TableKbd Props