ID

Overview

The ID component provides a specialized way to display and format ID values throughout your application. It's designed to handle technical content like API keys, user IDs, or other identifier strings with consistent styling, truncation options, and width control for optimal display.

Usage

import { ID } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <ID value="uk_1234567890abcdef" />
      <ID value="user_987654321" truncate />
      <ID value="api_key_long_string" width="w-32" />
    </div>
  );
}

Examples

Value Truncation

Examples showing different truncation options for long ID values.

1
2
3
4
5

<Row>
  <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} />
  <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={6} />
  <Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={12} />
</Row>

Width Control

Examples demonstrating width control for different display contexts.

1

<Id value={"api_zTLSnw1YTqUHRwJTgKWrg"} truncate={20} />

Features

• Value Display: Consistent formatting for ID values
• Truncation Support: Optional truncation for long values
• Width Control: Configurable width for different display contexts
• Consistent Styling: Monospace font and consistent appearance
• Accessibility: Proper ARIA attributes and screen reader support
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes

Props

Structure

The ID component is a simple, self-contained component that renders as a single span element with:

1. Value Display - The main ID value with optional truncation
2. Styling Container - Consistent styling and width control
3. Accessibility Features - ARIA attributes and screen reader support

Styling

The component includes default styling with:

• Monospace font for consistent ID display
• Consistent padding and spacing
• Truncation with ellipsis for long values
• Dark mode support with appropriate color schemes
• Focus states for accessibility
• Customizable through className and width props

Custom Styling

You can customize the appearance using the className and width props:

<ID
  value="custom_id_value"
  width="w-48"
  className="custom-id-class"
  truncate={true}
/>

Accessibility

The ID component is built with accessibility in mind:

• Semantic HTML: Uses appropriate HTML elements for ID display
• ARIA Attributes: Proper ARIA labels for screen readers
• Screen Reader Support: Announces ID values appropriately
• High Contrast: Maintains proper contrast ratios
• Focus Management: Clear focus indicators when interactive