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
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
Prop | Type | Default | Description |
---|---|---|---|
variant | "default" | "ghost" | "legacy" | "default" | The visual style of the code component |
className | string | undefined | Additional CSS classes for the wrapper div |
buttonsClassName | string | undefined | Additional CSS classes for the buttons container |
preClassName | string | undefined | Additional CSS classes for the pre element |
copyButton | React.ReactNode | undefined | Copy button component to display |
visibleButton | React.ReactNode | undefined | Visibility 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:
- Code - The main wrapper component
- Buttons Container - Optional area for copy and visibility buttons
- 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:
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