REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

Code / CodeBlock

Displays inline code snippets or multi-line code blocks.

Example

Preview

Code

Props

Code / CodeBlock Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the code element.

variant

'subtle' | 'outline' | 'solid'

'subtle'

The visual style variant of the code element.

CodeBlock Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the code block container.

variant

'subtle' | 'outline' | 'solid'

'subtle'

The visual style variant of the code block.

Usage Guidelines

When to use

Use Code for inline code references and CodeBlock for multi-line code examples.

Best practices

•

Use Code for inline snippets within text and CodeBlock for multi-line examples.

•

Use the subtle variant for documentation and solid for emphasis.

•

Provide a monospace font stack in your theme for consistent code rendering.

Accessibility

Code content is readable by screen readers. Use accessibilityRole="text" for inline code references.

Related Components

Kbd

Displays a keyboard shortcut or key combination.

Text

A typographic component for rendering text with built-in size, weight, and decoration variants.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License