Typography

Code

Monospaced code. Inline by default; `block` wraps it in a scrollable `pre`.

Server safeSource

Import

import { Code } from '@the_viveksingh/vivek-ui'

Inline

Inline code keeps the surrounding line height, so a paragraph containing it does not grow taller than its neighbours.

Install it with npm i @the_viveksingh/vivek-ui, then import the stylesheet.

Inline code keeps the surrounding line height, so a paragraph containing Code does not grow taller than its neighbours.

<Text>
  Install it with <Code>npm i @the_viveksingh/vivek-ui</Code>, then import the stylesheet.
</Text>

Block

block switches to a pre element that scrolls horizontally rather than wrapping.

import { Button } from '@the_viveksingh/vivek-ui'

export default function App() {
  return <Button>Ship it</Button>
}

<Code block>{snippet}</Code>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Code
Prop	Type	Default	Description
`block`	`boolean`	—	Render as a fenced block (`pre > code`) instead of inline.
`size`	`'sm' \| 'md'`	—	—

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Code carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.