Data display

Make complex information easy to read.

Component

Consistent formatting for labeled values.

Interactive playground

LIVE PREVIEW

Project name

Atlas dashboard

Generated code

import { DataField } from '@vrum/ui';

<DataField
  label={"Project name"}
  value={"Atlas dashboard"}
  layout={"horizontal"}
/>

Prop	Type	Default	Description
`icon`	`React.ReactNode \| LucideIcon`	none	icon configuration.
`label*`	`string`	none	Field label.
`value*`	`React.ReactNode`	none	Displayed value.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Field orientation.
`className`	`string`	none	Additional CSS classes.