Code

Inline code chip for identifiers and short fragments in running text.

import { Code } from "@ps1ui/core";

Basic

useState()

<Code>useState()</Code>

In running text

Call useState() to add local state, or useReducer() when the transitions get complex.

<Text>
  Call <Code>useState()</Code> to add local state, or{" "}
  <Code>useReducer()</Code> when the transitions get complex.
</Text>

On a surface

Run pnpm dev to start the dev server, then edit packages/site/src/pages/index.astro.

<Card>
  <Text>
    Run <Code>pnpm dev</Code> to start the dev server, then edit{" "}
    <Code>packages/site/src/pages/index.astro</Code>.
  </Text>
</Card>

Long identifiers wrap

See packages/core/src/components/CodeBlock/CodeBlock.tsx for the full implementation.

<div style={{ maxWidth: "12.5rem" }}>
  <Text>
    See <Code>packages/core/src/components/CodeBlock/CodeBlock.tsx</Code>{" "}
    for the full implementation.
  </Text>
</div>

Props

All native <code> attributes are also accepted.