CleenUI · Data Display · InfoLabels

InfoLabels

Compact key-value display for metadata rows in detail views and side panels.

storybook.cleenui.com · data-display-infolabels--default
Open in new window

About InfoLabels

InfoLabels renders a list of label/value pairs. Useful anywhere static metadata needs to display cleanly — record details, status panels, account info, profile summaries.

Variants include inline (label and value on one line), stacked (label above value), and table (definition-list style). Values can be plain text, links, badges, or any JSX.

When to use it

  • Detail panels on a record screen.
  • Account and subscription info displays.
  • Profile metadata blocks.
  • Status summaries on dashboard cards.

Common props

Prop
Type
Description
items
{ label: string, value: ReactNode }[]
Label/value pairs.
layout
"inline" | "stacked" | "table"
Visual layout.
labelWidth
string
Label column width (inline/table modes).
size
"sm" | "md"
Typography size variant.
divider
boolean
Render dividers between items.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.