Unkey
Components

Code

A versatile code component for displaying inline and block code snippets with customizable styling and integrated buttons.

Overview

The Code component provides a consistent way to display code snippets within your application. It's designed to handle both inline and block code displays, with customizable styling options and integrated button functionality for an enhanced user experience.

Usage

import { Code, CopyButton, VisibleButton } from "@unkey/ui";
 
function MyComponent() {
  return (
    <Code
      copyButton={<CopyButton value="const hello = 'world';" />}
      visibleButton={<VisibleButton isVisible={true} setIsVisible={() => {}} />}
    >
      const hello = "world";
    </Code>
  );
}

Examples

Default Variant with Buttons

The default variant provides a subtle background with a border and integrated buttons for copying and visibility toggling.

curl -XPOST 'https://api.unkey.dev/v1/ratelimits.limit' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer ********' \
  -d '{
    "namespace": "demo_namespace",
    "identifier": "user_123",
    "limit": 10,
    "duration": 10000
  }'

Variant Styles

The Code component supports different visual styles for various use cases.

Default Variant
Ghost Variant
Legacy Variant

Features

  • Multiple Variants: Three different visual styles (default, ghost, legacy)
  • Integrated Buttons: Built-in support for copy and visibility buttons
  • Consistent Typography: Monospace font for code readability
  • Customizable Styling: Extensive styling options through className props
  • Accessibility: Built-in accessibility support with proper ARIA attributes
  • Responsive Design: Adapts to different screen sizes
  • Focus States: Proper focus management for keyboard navigation

Props

PropTypeDefaultDescription
variant"default" | "ghost" | "legacy""default"The visual style of the code component
classNamestringundefinedAdditional CSS classes for the wrapper div
buttonsClassNamestringundefinedAdditional CSS classes for the buttons container
preClassNamestringundefinedAdditional CSS classes for the pre element
copyButtonReact.ReactNodeundefinedCopy button component to display
visibleButtonReact.ReactNodeundefinedVisibility toggle button component

The component also accepts all standard HTML pre element props.

Variants

Default

  • Subtle background with border
  • White background in light mode, black in dark mode
  • Gray border for visual separation
  • Ideal for code snippets with buttons

Ghost

  • Transparent background
  • No border
  • Minimal visual impact
  • Perfect for inline code or subtle code display

Legacy

  • Primary text color
  • Subtle background
  • Hover effects with primary border
  • Rounded corners
  • Backward compatibility option

Structure

The Code component is composed of a main container with optional button integration:

  1. Code - The main wrapper component
  2. Buttons Container - Optional area for copy and visibility buttons
  3. Pre Element - The actual code content container

Styling

The Code component includes:

  • Monospace font for code readability
  • Consistent padding and border radius
  • Focus states for keyboard navigation
  • Hover effects for better interaction
  • Dark mode support
  • Responsive design
  • Flexible button positioning

Custom Styling

You can customize the appearance using className props:

<Code 
  variant="default"
  className="custom-wrapper-class"
  buttonsClassName="custom-buttons-class"
  preClassName="custom-pre-class"
>
  Your code here
</Code>

Accessibility

The Code component is built with accessibility in mind:

  • ARIA Attributes: Proper ARIA labels and roles for screen readers
  • Keyboard Navigation: Full keyboard support for all interactions
  • Focus Management: Clear focus indicators and logical tab order
  • High Contrast: Maintains proper contrast ratios
  • Semantic HTML: Uses appropriate HTML elements and roles
  • Screen Reader Support: Announces code content appropriately

On this page