# Value Renderers
URL: /docs/web/components/value-renderers

Read-only value display system for table cells, detail views, and kanban cards. 44 renderer types with automatic dispatch via DynamicValue.

**Demo:**

```tsx
'use client';
// @custom-demo

import { type ReactNode } from 'react';

import { ApprovalStatusValue } from '@docyrus/ui/components/value-renderers/approval-status-value';
import { AvatarValue } from '@docyrus/ui/components/value-renderers/avatar-value';
import { ButtonValue } from '@docyrus/ui/components/value-renderers/button-value';
import { CheckboxValue } from '@docyrus/ui/components/value-renderers/checkbox-value';
import { CodeValue } from '@docyrus/ui/components/value-renderers/code-value';
import { ColorValue } from '@docyrus/ui/components/value-renderers/color-value';
import { ConversationChannelValue } from '@docyrus/ui/components/value-renderers/conversation-channel-value';
import { CurrencyCodeValue } from '@docyrus/ui/components/value-renderers/currency-code-value';
import { DateRangeValue } from '@docyrus/ui/components/value-renderers/date-range-value';
import { DateValue } from '@docyrus/ui/components/value-renderers/date-value';
import { DateTimeValue } from '@docyrus/ui/components/value-renderers/datetime-value';
import { DocEditorValue } from '@docyrus/ui/components/value-renderers/doc-editor-value';
import { DurationValue } from '@docyrus/ui/components/value-renderers/duration-value';
import { EmailValue } from '@docyrus/ui/components/value-renderers/email-value';
import { FileStorageFolderValue } from '@docyrus/ui/components/value-renderers/file-storage-folder-value';
import { FileValue } from '@docyrus/ui/components/value-renderers/file-value';
import { FormulaValue } from '@docyrus/ui/components/value-renderers/formula-value';
import { IconValue } from '@docyrus/ui/components/value-renderers/icon-value';
import { IdentityValue } from '@docyrus/ui/components/value-renderers/identity-value';
import { ImageValue } from '@docyrus/ui/components/value-renderers/image-value';
import { InlineDataValue } from '@docyrus/ui/components/value-renderers/inline-data-value';
import { JsonValue } from '@docyrus/ui/components/value-renderers/json-value';
import { ListValue } from '@docyrus/ui/components/value-renderers/list-value';
import { LocationValue } from '@docyrus/ui/components/value-renderers/location-value';
import { MoneyValue } from '@docyrus/ui/components/value-renderers/money-value';
import { MultiSelectValue } from '@docyrus/ui/components/value-renderers/multi-select-value';
import { NumberValue } from '@docyrus/ui/components/value-renderers/number-value';
import { PercentValue } from '@docyrus/ui/components/value-renderers/percent-value';
import { PhoneValue } from '@docyrus/ui/components/value-renderers/phone-value';
import { RatingValue } from '@docyrus/ui/components/value-renderers/rating-value';
import { RelatedFieldValue } from '@docyrus/ui/components/value-renderers/related-field-value';
import { RelationValue } from '@docyrus/ui/components/value-renderers/relation-value';
import { RichTextValue } from '@docyrus/ui/components/value-renderers/rich-text-value';
import { SelectValue } from '@docyrus/ui/components/value-renderers/select-value';
import { StatusValue } from '@docyrus/ui/components/value-renderers/status-value';
import { SwitchValue } from '@docyrus/ui/components/value-renderers/switch-value';
import { TaskListValue } from '@docyrus/ui/components/value-renderers/task-list-value';
import { TextValue } from '@docyrus/ui/components/value-renderers/text-value';
import { TimeValue } from '@docyrus/ui/components/value-renderers/time-value';
import { TodoValue } from '@docyrus/ui/components/value-renderers/todo-value';
import { UrlValue } from '@docyrus/ui/components/value-renderers/url-value';
import { UserMultiValue } from '@docyrus/ui/components/value-renderers/user-multi-value';
import { UserValue } from '@docyrus/ui/components/value-renderers/user-value';

import {
  APPROVAL_OPTIONS,
  CATEGORY_OPTIONS,
  DEMO_FIELDS,
  DEMO_RECORD,
  DEPARTMENT_OPTIONS,
  LIST_OPTIONS,
  PRIORITY_OPTIONS,
  RELATION_OPTIONS,
  SKILL_OPTIONS,
  STATUS_OPTIONS,
  TAG_OPTIONS,
  USER_OPTIONS
} from '@/data/value-renderers-data';

function SectionHeader({ children }: { children: string }) {
  return (
    <h3 className="border-b pb-1.5 text-sm font-semibold tracking-wide text-muted-foreground uppercase">
      {children}
    </h3>
  );
}

function ValueCard({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className="flex min-w-0 flex-col gap-1 overflow-hidden rounded-lg border border-border bg-card p-3">
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      <div className="min-h-6 min-w-0 overflow-hidden">{children}</div>
    </div>
  );
}

export function ValueRenderersDemo() {
  return (
    <div className="w-full space-y-8">
      {/* Text & Content */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
          
          
          
          
        </div>
      </section>

      {/* Numbers */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
          
          
        </div>
      </section>

      {/* Selection */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
          
          
          
          
        </div>
      </section>

      {/* Date & Time */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
        </div>
      </section>

      {/* Toggle */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
        </div>
      </section>

      {/* Users & Relations */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
        </div>
      </section>

      {/* Contact */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
        </div>
      </section>

      {/* Visual */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
        </div>
      </section>

      {/* Files & Media */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
        </div>
      </section>

      {/* Structure */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
        </div>
      </section>

      {/* System */}
      <section className="space-y-4">
        
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          
          
          
          
          
        </div>
      </section>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-value-renderers
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import { DynamicValue } from '@docyrus/ui/components/value-renderers';
import type { IField, DocyrusValueProps } from '@docyrus/ui/components/value-renderers';

const fields: IField[] = [
  { id: '1', name: 'Full Name', slug: 'full_name', type: 'field-text' },
  { id: '2', name: 'Priority', slug: 'priority', type: 'field-select' },
  { id: '3', name: 'Status', slug: 'status', type: 'field-status' },
];

const record = {
  full_name: 'Erhan ERDOGAN',
  priority: 'high',
  status: 'in_progress',
  __status_description: 'Working on API',
};

const enumOptions = [
  { id: 'low', name: 'Low', color: '#22c55e' },
  { id: 'medium', name: 'Medium', color: '#f59e0b' },
  { id: 'high', name: 'High', color: '#ef4444' },
];

function RecordDetail() {
  return (
    <div>
      {fields.map((field) => (
        
      ))}
    </div>
  );
}
```

### Individual Import

You can import individual renderers to reduce bundle size:

```tsx
import { TextValue } from '@docyrus/ui/components/value-renderers/text-value';
import { SelectValue } from '@docyrus/ui/components/value-renderers/select-value';
import { StatusValue } from '@docyrus/ui/components/value-renderers/status-value';
```

## Renderer Types

### Text & Content

| Type | Component | Description |
|------|-----------|-------------|
| `field-text` | `TextValue` | Plain text display |
| `field-textarea` | `TextValue` | Multi-line text (shared renderer) |
| `field-display` | `TextValue` | Display-only text (shared renderer) |
| `field-code` | `TextValue` | Code snippet display (shared renderer) |
| `field-codeEditor` | `CodeValue` | Code block with monospace font |
| `field-htmlEditor` | `RichTextValue` | Rendered HTML content |
| `field-emailEditor` | `RichTextValue` | Email template preview |
| `field-docEditor` | `DocEditorValue` | Document content preview |
| `field-json` | `JsonValue` | JSON display with formatting |
| `field-formula` | `FormulaValue` | Formula expression display |
| `field-relatedField` | `RelatedFieldValue` | Related field value display |

### Numbers

| Type | Component | Description |
|------|-----------|-------------|
| `field-number` | `NumberValue` | Formatted number display |
| `field-money` | `MoneyValue` | Currency-formatted amount |
| `field-percent` | `PercentValue` | Percentage display |
| `field-duration` | `DurationValue` | Duration in HH:MM:SS format |
| `field-rating` | `RatingValue` | Star rating display |
| `field-currency` | `CurrencyCodeValue` | Currency code with symbol |

### Selection

| Type | Component | Description |
|------|-----------|-------------|
| `field-select` | `SelectValue` | Badge with color/icon |
| `field-radioGroup` | `SelectValue` | Badge display (shared renderer) |
| `field-enum` | `SelectValue` | Badge display (shared renderer) |
| `field-multiSelect` | `MultiSelectValue` | Multiple badges |
| `field-tagSelect` | `MultiSelectValue` | Tag badges (shared renderer) |
| `field-status` | `StatusValue` | Status badge with description + follow-up date |
| `field-approvalStatus` | `ApprovalStatusValue` | Approval workflow badge |
| `field-list` | `ListValue` | List item badge |

### Date & Time

| Type | Component | Description |
|------|-----------|-------------|
| `field-date` | `DateValue` | Localized date display |
| `field-dateTime` | `DateTimeValue` | Localized date + time display |
| `field-time` | `TimeValue` | Localized time display |
| `field-dateRange` | `DateRangeValue` | Date range with separator |

### Toggle

| Type | Component | Description |
|------|-----------|-------------|
| `field-checkbox` | `CheckboxValue` | Check/X icon indicator |
| `field-switch` | `SwitchValue` | On/Off text indicator |

### Users & Relations

| Type | Component | Description |
|------|-----------|-------------|
| `field-userSelect` | `UserValue` | User avatar with name |
| `field-userMultiSelect` | `UserMultiValue` | Stacked user avatars |
| `field-relation` | `RelationValue` | Related record link |

### Contact

| Type | Component | Description |
|------|-----------|-------------|
| `field-email` | `EmailValue` | Email link with icon |
| `field-phone` | `PhoneValue` | Phone with country code |
| `field-url` | `UrlValue` | URL link with hostname |

### Visual

| Type | Component | Description |
|------|-----------|-------------|
| `field-color` | `ColorValue` | Color swatch supporting hex and Tailwind color tokens |
| `field-icon` | `IconValue` | Rendered Docyrus icon string such as `huge ai-brain-03` |

### Files & Media

| Type | Component | Description |
|------|-----------|-------------|
| `field-file` | `FileValue` | File name with icon |
| `field-image` | `ImageValue` | Single image thumbnail or gallery thumbnail group |
| `field-avatar` | `AvatarValue` | Avatar thumbnail |

### Structure

| Type | Component | Description |
|------|-----------|-------------|
| `field-taskList` | `TaskListValue` | Checklist progress |
| `field-todo` | `TodoValue` | Todo item count |
| `field-inlineData` | `InlineDataValue` | Inline data row count |
| `field-locationSelect` | `LocationValue` | Address with map pin |

### System

| Type | Component | Description |
|------|-----------|-------------|
| `field-identity` | `IdentityValue` | Identity hash display |
| `field-autonumber` | `IdentityValue` | Auto-number display |
| `field-button` | `ButtonValue` | Action button label |
| `field-conversationChannel` | `ConversationChannelValue` | Channel name |
| `field-fileStorageFolder` | `FileStorageFolderValue` | Folder name |

## API Reference

### DynamicValue

Dispatcher component that renders the correct value renderer based on `field.type`.

Notes:

- `ColorValue` accepts hex values and Tailwind-style tokens such as `emerald-500`.
- `IconValue` expects a Docyrus icon string, for example `huge ai-brain-03`.
- `ImageValue` accepts either a single `{ file_name, signed_url }` object or an array of those objects for gallery-style output.

```tsx

```

### DocyrusValueProps

All value renderer components share this interface:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `field` | `IField` | — | Field configuration from the data source |
| `value` | `unknown` | — | The field value to display |
| `record` | `Record<string, unknown>` | — | Full record for accessing companion columns |
| `enumOptions` | `EnumOption[]` | `[]` | Options for select-based fields |
| `className` | `string` | — | Additional CSS class |

### IField

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | Unique field identifier |
| `name` | `string` | Display label |
| `slug` | `string` | Record key for accessing the value |
| `type` | `IFieldType` | Field type — determines which renderer is used |
| `defaultValue` | `string \| null` | Default value |
| `validations` | `string[] \| null` | Validation rules |
| `readOnly` | `boolean \| null` | Read-only flag |

### EnumOption

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string` | Option identifier |
| `name` | `string` | Display label |
| `color` | `string` | Color indicator (hex) |
| `icon` | `string` | Docyrus icon name |
| `slug` | `string` | Slug value |
| `sort_order` | `number` | Display order |