Skip to main content
ninna-ui

Code

Code component is used to display inline code snippets with customizable colors and sizes. It renders a styled <code> element with proper monospace font.

import { Code } from "@ninna-ui/primitives"
pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Code component to display inline code snippets.

import { Code } from "@ninna-ui/primitives";


export default function Example() {
  return (
    <p>
      Run <Code>npm install</Code> to install dependencies.
    </p>
  );
}

Basic

Default code rendering within text.

Run npm install @ninna-ui/primitives to get started.

Colors

Code with different color variants for semantic meaning.

neutralprimarysecondaryaccentinfosuccesswarningdanger

Sizes

Code with different text sizes.

xs sizesm sizebase sizelg sizexl size

Use Cases

Real-world examples of Code component usage.

Documentation

Use the useState hook to manage local state in your components.

Import it from React: import { useState } from 'react'

CLI Commands

Install dependencies: npm install

Start development server: npm run dev

Build for production: npm run build

File Paths

Configuration file is located at ./config/settings.json

Components are in ./src/components/

Error Messages

Error: TypeError: Cannot read property 'map' of undefined

Success Messages

Build completed: ✓ 42 modules transformed

API Reference

Complete list of props for the Code component.

Props

PropTypeDefaultDescription
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''neutral'Color variant of the code
size'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl''sm'Text size of the code
classNamestring-Additional CSS classes

Accessibility

  • Semantic HTML: Uses native code element for proper semantics
  • Monospace font: Uses monospace font for code readability
  • Color contrast: All color variants meet WCAG AA contrast requirements
  • Screen readers: Code content is read naturally by screen readers