Code

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
  }'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div className="flex flex-col gap-4">
  <div>
    <Code
      copyButton={<CopyButton className="bg-transparent border border-grayA-6 rounded-md hover:bg-grayA-2" value="curl -XPOST 'https://api.unkey.dev/v1/ratelimits.limit' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer <UNKEY_ROOT_KEY>' \
  -d '{
    &quot;namespace&quot;: &quot;demo_namespace&quot;,
    &quot;identifier&quot;: &quot;user_123&quot;,
    &quot;limit&quot;: 10,
    &quot;duration&quot;: 10000
  }'"/>}
      visibleButton={<VisibleButton setIsVisible={setIsVisible} title="Key Snippet"/>}
    >
      {`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
        }'`}
    </Code>
  </div>
</div>

Variant Styles

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

Default Variant

Ghost Variant

Legacy Variant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div className="flex flex-col gap-4">
  <div>
    <div className="flex flex-wrap items-center gap-4">
      <Code variant="default">
        Default Variant
      </Code>
      <Code variant="ghost">
        Ghost Variant
      </Code>
      <Code variant="legacy">
        Legacy Variant
      </Code>
    </div>
  </div>
</div>

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

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