Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
DataList

DataList is a data display component for rendering structured key-value pairs in a consistent format.

​
Import

import { DataList } from 'radix-native-ui';

​
Usage

import { DataList } from 'radix-native-ui';

<DataList>
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>John Doe</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>john@example.com</DataList.Value>
  </DataList.Item>
</DataList>

​
Components

​
DataList.Root

The root container component.

​
DataList.Item

Individual item row.

​
DataList.Label

Label for the data item.

​
DataList.Value

Value for the data item.

​
Props

​
DataList.Root

​
DataList.Item

​
DataList.Label

​
DataList.Value

​
Examples

​
Basic DataList

<DataList>
  <DataList.Item>
    <DataList.Label>Status</DataList.Label>
    <DataList.Value>Active</DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Role</DataList.Label>
    <DataList.Value>Administrator</DataList.Value>
  </DataList.Item>
</DataList>

​
Sizes

<DataList size={1}>
  <DataList.Item>
    <DataList.Label>Small</DataList.Label>
    <DataList.Value>Value</DataList.Value>
  </DataList.Item>
</DataList>

<DataList size={2}>
  <DataList.Item>
    <DataList.Label>Medium</DataList.Label>
    <DataList.Value>Value</DataList.Value>
  </DataList.Item>
</DataList>

<DataList size={3}>
  <DataList.Item>
    <DataList.Label>Large</DataList.Label>
    <DataList.Value>Value</DataList.Value>
  </DataList.Item>
</DataList>

​
With Badge

<DataList>
  <DataList.Item>
    <DataList.Label>Status</DataList.Label>
    <DataList.Value>
      <Badge color="green">Active</Badge>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Plan</DataList.Label>
    <DataList.Value>
      <Badge color="blue">Pro</Badge>
    </DataList.Value>
  </DataList.Item>
</DataList>

​
User Profile

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Account Details</Heading>
    <DataList>
      <DataList.Item>
        <DataList.Label>Full Name</DataList.Label>
        <DataList.Value>John Doe</DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label>Email</DataList.Label>
        <DataList.Value>john@example.com</DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label>Phone</DataList.Label>
        <DataList.Value>+1 (555) 123-4567</DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label>Member Since</DataList.Label>
        <DataList.Value>January 2024</DataList.Value>
      </DataList.Item>
    </DataList>
  </Flex>
</Card>

​
With Truncated Values

<DataList>
  <DataList.Item>
    <DataList.Label>API Key</DataList.Label>
    <DataList.Value>
      <Text truncate>sk-1234567890abcdefghijklmnopqrstuvwxyz</Text>
    </DataList.Value>
  </DataList.Item>
  <DataList.Item>
    <DataList.Label>Webhook URL</DataList.Label>
    <DataList.Value>
      <Text truncate>https://api.example.com/webhooks/very-long-endpoint</Text>
    </DataList.Value>
  </DataList.Item>
</DataList>
  • Card - Card component
  • Flex - Flexbox layout
  • Badge - Badge component