ContentProvider

Context-based density system for content layout

Compact

Usage

import { ContentProvider, useContentDensity } from '@tryvienna/ui'

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="User Details">
      <MetadataList items={sampleItems} />
    </ContentSection>
    <ContentSection title="Account Info">
      <MetadataList
        items={[
          { label: 'Plan', value: 'Pro' },
          { label: 'Storage', value: '50 GB' },
        ]}
      />
    </ContentSection>
  </ContentProvider>
</div>

Examples

Compact

Compact

<div className="w-96">
  <ContentProvider density="compact">
    <ContentSection title="User Details">
      <MetadataList items={sampleItems} />
    </ContentSection>
    <ContentSection title="Account Info">
      <MetadataList
        items={[
          { label: 'Plan', value: 'Pro' },
          { label: 'Storage', value: '50 GB' },
        ]}
      />
    </ContentSection>
  </ContentProvider>
</div>

Default

Default

<div className="w-96">
  <ContentProvider density="default">
    <ContentSection title="User Details">
      <MetadataList items={sampleItems} />
    </ContentSection>
    <ContentSection title="Account Info">
      <MetadataList
        items={[
          { label: 'Plan', value: 'Pro' },
          { label: 'Storage', value: '50 GB' },
        ]}
      />
    </ContentSection>
  </ContentProvider>
</div>

Relaxed

Relaxed

<div className="w-96">
  <ContentProvider density="relaxed">
    <ContentSection title="User Details">
      <MetadataList items={sampleItems} />
    </ContentSection>
    <ContentSection title="Account Info">
      <MetadataList
        items={[
          { label: 'Plan', value: 'Pro' },
          { label: 'Storage', value: '50 GB' },
        ]}
      />
    </ContentSection>
  </ContentProvider>
</div>

Variants

Name	Options	Default
density	compact | default | relaxed	compact

API Reference

ContentProvider

Prop	Type	Default	Description
density	ContentDensity	-

useContentDensity

Data Attributes

Component	data-slot
ContentProvider	"content-provider"
useContentDensity	"use-content-density"