InlineCode

Inline code token: Geist Mono in the README amber, for identifiers and values in prose.

Usage

svelte

<script lang="ts">
  import { InlineCode } from "@milandekruijf/ui/svelte";
</script>

<p>Install with <InlineCode>bun add @milandekruijf/ui</InlineCode>.</p>

Examples

Code in prose

Install the package with bun add @milandekruijf/ui and import components from @milandekruijf/ui/svelte.

Tokens read as code in prose: slate.11, blue.9, and 0.18s.

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { InlineCode } from "@milandekruijf/ui/svelte";
  import { stack } from "./styles.js";

  const textClass = css({ m: 0, color: "slate.11" });
</script>

<div class={stack}>
  <p class={textClass}>
    Install the package with
    <InlineCode>bun add @milandekruijf/ui</InlineCode>
    and import components from
    <InlineCode>@milandekruijf/ui/svelte</InlineCode>.
  </p>
  <p class={textClass}>
    Tokens read as code in prose: <InlineCode>slate.11</InlineCode>,
    <InlineCode>blue.9</InlineCode>, and <InlineCode>0.18s</InlineCode>.
  </p>
</div>

Props

Prop	Type	Default	Description
children	`Snippet`	—	Text rendered as an inline code token.
class?	`string`	—	Extra classes merged after the base classes.