Code Snippet Pro

Code block with a title or tabs, line numbers and a copy button. Dark and light themes are fixed, so they read the same in either page mode.

Storybook Figma

Preview

Install

Part of Pixels Pro. Add your licence key to .npmrc, then install.

BASH

npm i @pixelsds-pro/react @pixelsds/react react-aria-components

Usage

JSX

import { CodeSnippet } from '@pixelsds-pro/react';

export default function Example() {
  return <CodeSnippet />;
}

Every example above, with its props and full source, is in the Storybook. Built from Pixels tokens, so it follows your brand colour, dark mode and right-to-left.