Code

The Code component provides a consistent way to display code snippets within your application. It supports both inline and block code display with customizable styling options and integrated button functionality.

Features

• Multiple variants (default, ghost, legacy)
• Integrated copy and visibility buttons
• Consistent monospace font
• Customizable styling
• Accessible by default
• Responsive design
• Focus states for better interaction

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.

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={<o 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.

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>

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

Ghost

• Transparent background
• No border
• Minimal visual impact

Legacy

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

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

Best Practices

• Use the default variant for code snippets with buttons
• Use the ghost variant when you need minimal visual impact
• Use the legacy variant for backward compatibility
• Add appropriate padding around the code component
• Consider using syntax highlighting for complex code blocks
• Ensure sufficient contrast between code and background
• Use semantic HTML structure for better accessibility
• Position buttons appropriately using the buttonsClassName prop

Accessibility

The Code component is built with accessibility in mind:

• Proper ARIA attributes
• Keyboard focus management
• High contrast text
• Semantic HTML structure
• Screen reader support
• Focus states for interactive elements