Basic Components

Code

Renders inline code snippets in a themed monospace surface. Use for code examples, commands, file paths, or technical terms within prose; renders as an anchor when given href.

Source Edit this page

Renders inline code snippets with syntax highlighting. Perfect for displaying code examples, commands, file paths, or technical terms within text content.

Basic Usage

Inline code snippets with default styling. Code is align-middle, so it sits centered with the surrounding text. Pass href to render Code as <a> instead of <code> — a focus-visible outline auto-enables when href is set.

Run npm install to install packages.

Declare a constant with const x = 'value'.

<Col>
  <Text>Run <Code>npm install</Code> to install packages.</Text>
  <Text>Declare a constant with <Code>{"const x = 'value'"}</Code>.</Text>
</Col>

Sizes

Code elements in different sizes - xs, sm, md, lg, xl.

Size xs: console.log('Hello')

Size sm: console.log('Hello')

Size md: console.log('Hello')

Size lg: console.log('Hello')

Size xl: console.log('Hello')

<Col>
  <Row><span>Size xs: <Code xs>{"console.log('Hello')"}</Code></span></Row>
  <Row><span>Size sm: <Code sm>{"console.log('Hello')"}</Code></span></Row>
  <Row><span>Size md: <Code md>{"console.log('Hello')"}</Code></span></Row>
  <Row><span>Size lg: <Code lg>{"console.log('Hello')"}</Code></span></Row>
  <Row><span>Size xl: <Code xl>{"console.log('Hello')"}</Code></span></Row>
</Col>

Appearances

Different code color variants for syntax highlighting.

primary codebrand codeaccent codesecondary codetertiary codesuccess codedanger codewarning codeinfo codelink codeinherit code

<Row flexWrap>
  <Code primary>primary code</Code>
  <Code brand>brand code</Code>
  <Code accent>accent code</Code>
  <Code secondary>secondary code</Code>
  <Code tertiary>tertiary code</Code>
  <Code success>success code</Code>
  <Code danger>danger code</Code>
  <Code warning>warning code</Code>
  <Code info>info code</Code>
  <Code link>link code</Code>
  <Code inherit>inherit code</Code>
</Row>

Code in Context

Code elements used within text content.

To create a new React component, use function Component() {} or the arrow function syntax const Component = () => {}.

Install the package with npm i @vaneui/ui and then import it using import { Button } from "@vaneui/ui".

The useState hook returns an array with two elements: the current state value and a setter function like [state, setState].

<Col>
  <Text>
    To create a new React component, use <Code>{"function Component() {}"}</Code> or
    the arrow function syntax <Code>{"const Component = () => {}"}</Code>.
  </Text>
  <p>
    Install the package with <Code primary>npm i @vaneui/ui</Code> and then
    import it using <Code secondary>{'import { Button } from "@vaneui/ui"'}</Code>.
  </p>
  <Text>
    The <Code info>useState</Code> hook returns an array with two elements:
    the current state value and a setter function like <Code info>[state, setState]</Code>.
  </Text>
</Col>

Keyboard Shortcuts

Code elements for displaying keyboard shortcuts and commands.

Ctrl+C

Cmd+V

<Row flexWrap>
  <Text primary>
    <Code>Ctrl</Code>+<Code>C</Code>
  </Text>
  or
  <Text primary>
    <Code primary>Cmd</Code>+<Code primary>V</Code>
  </Text>
</Row>

In Heading Context

Code uses an em-based geometry pipeline — at the default md size it renders at ~87.5% of the surrounding text's font-size, with padding and border-radius scaling proportionally. The same <Code> looks right inside body copy, a subheading, a section heading, or a page title.

Body text with npm install inline.

Subheading: run `npm run build` first.

Section: `useState` hook

`@vaneui/ui`

<Col>
  <Text>Body text with <Code>npm install</Code> inline.</Text>
  <Title>Subheading: run <Code>npm run build</Code> first.</Title>
  <SectionTitle>Section: <Code>useState</Code> hook</SectionTitle>
  <PageTitle><Code>@vaneui/ui</Code></PageTitle>
</Col>

Filled & Outline Variants

Code defaults to outline variant. Use filled for stronger visual emphasis.

Default outline: npm install then npm run build

Filled: git commit then git push

Colored filled: 200 OK 500 Error deprecated

<Col>
  <Text>Default outline: <Code>npm install</Code> then <Code>npm run build</Code></Text>
  <Text>Filled: <Code filled>git commit</Code> then <Code filled>git push</Code></Text>
  <Text>Colored filled: <Code success filled>200 OK</Code> <Code danger filled>500 Error</Code> <Code warning filled>deprecated</Code></Text>
</Col>

Shapes

Code supports rounded (default), pill, and sharp border-radius styles.

roundedpillsharp

<Row flexWrap>
  <Code rounded>rounded</Code>
  <Code pill>pill</Code>
  <Code sharp>sharp</Code>
</Row>

As Link

Add href to render the Code element as an <a> tag. A keyboard focus-visible outline auto-renders so the link is reachable via Tab; opt out with noFocusVisible.

Install @vaneui/ui from npm.

The useState hook returns a value and a setter.

See the install guide for setup steps.

<Col>
  <Text>Install <Code href="https://npmjs.com/package/@vaneui/ui" target="_blank" rel="noopener noreferrer">@vaneui/ui</Code> from npm.</Text>
  <Text>The <Code href="#useState" info>useState</Code> hook returns a value and a setter.</Text>
  <Text>See the <Code href="#install" filled success>install guide</Code> for setup steps.</Text>
</Col>

Next.js Link Integration

Use the tag prop to render Code as a Next.js Link for client-side navigation.

import Link from 'next/link';
import { Code, Text } from '@vaneui/ui';

<Text>
  Read the <Code href="/docs/getting-started" tag={Link}>getting started guide</Code> for setup steps.
</Text>

Code Props

Prop	Category	Default	Description
`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

Prop	Category	Default	Description
`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)

Subheading: run npm run build first.

Section: useState hook

@vaneui/ui

Subheading: run `npm run build` first.

Section: `useState` hook

`@vaneui/ui`