Skip to content

Code

Inline or block code formatting for identifiers, expressions, and short snippets — semantic <code> with <pre> wrapping when needed.

stable
since v0.1.0
3.7 kB
typography
code

Preview

tsx

import { Code } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Code>const x = 1</Code>;
}

Variants

Two variants: inline (default) renders a bare <code> and slots into prose; block wraps <code> inside <pre> so multi-line snippets retain whitespace.

Preview

tsx

import { Code } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Code variant="inline">npm install @arshad-shah/cynosure-react</Code>
      <Code variant="block">{`function greet(name) {
  return \`Hello, \${name}!\`;
}`}</Code>
    </div>
  );
}

Sizes

Pick sm for dense inline usage or md (default) for body-aligned snippets.

Preview

tsx

import { Code } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
      <Code size="sm">size="sm"</Code>
      <Code size="md">size="md"</Code>
    </div>
  );
}

Color schemes

colorScheme tints the surface and border — neutral (default), accent, success, and danger cover the common roles (e.g. red for deprecated identifiers, green for new APIs).

Preview

tsx

import { Code } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Code colorScheme="neutral">neutral</Code>
      <Code colorScheme="accent">accent</Code>
      <Code colorScheme="success">success</Code>
      <Code colorScheme="danger">danger</Code>
    </div>
  );
}

Inline in prose

Code slots cleanly inside a Text paragraph for identifiers and short expressions.

Preview

tsx

import { Code, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Text>
      Install the package with <Code>npm install @arshad-shah/cynosure-react</Code> and import
      components from <Code>@arshad-shah/cynosure-react</Code>.
    </Text>
  );
}

API

PropTypeDefaultDescription

size

"sm"|"md"

"md"

Font-size step for the monospace glyphs.

variant

"inline"|"block"

"inline"

`"inline"` renders a bare `<code>`; `"block"` wraps in `<pre><code>` so multi-line snippets preserve whitespace and line breaks.

colorScheme

"neutral"|"accent"|"success"|"danger"

"neutral"

Background / foreground palette token for the chip.

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

children

ReactNode

—

Code text content.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<"content" | SizeValue>

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

Accessibility

Renders the native <code> element so screen readers identify the content as code.
variant="block" wraps <code> in <pre> so newlines and indentation are preserved for both visual and assistive consumers.
Avoid color-only signals — pair colorScheme="danger" with descriptive surrounding copy.
For multi-line code with syntax highlighting reach for the dedicated CodeBlock component once available; Code variant="block" is intentionally style-only.

Recipes

Inline Code reads best wrapped inside a Text or paragraph element.
Keep inline snippets short — break longer code into a variant="block" snippet or a full code block.
Combine with Kbd to differentiate keyboard input from code output in tutorials.
Use colorScheme="success" or "danger" sparingly to flag newly added or deprecated APIs in changelogs.