 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

API Reference

Root

The root container for the resource header. Provides a loading context to all children.

Prop	Type	Default
`loading`	`boolean`	`false`

Content

Groups the icon/avatar and text content.

Icon

Displays an icon using IconPanel. Renders a skeleton when loading.

Prop	Type	Default
`variant`	`"classic" \| "solid"`	`"classic"`

Avatar

Displays a user avatar with a text fallback. Renders a skeleton when loading.

Prop	Type	Default
`src`	`string`
`fallback`	`string`

TextColumn

Wraps the title and metadata row in a vertical stack with consistent spacing.

MetaRow

Wraps the ID and accessories in a horizontal row with consistent spacing.

Title

Renders a heading for the resource name.

Id

Renders a copyable ID chip. Renders a skeleton when loading.

Prop	Type	Default
`label`	`string`	`"ID"`

Accessories

Container for additional metadata next to the ID. Hidden when loading.

Actions

Container for action buttons. Hidden when loading.

Examples

With ID

Title and ID only, with no left accessory (icon or avatar).

Acme Corporation

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

With Avatar

Use ResourceHeader.Avatar for user resources.

Jane Cooper

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Avatar
      src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
      fallback="J"
    />
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Jane Cooper</ResourceHeader.Title>
      <ResourceHeader.Id label="User ID">
        user_01H2XJKL3M4N5P6Q7R8S
      </ResourceHeader.Id>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

With Avatar Fallback

When no src is provided, the avatar displays the fallback text.

Jane Cooper

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Avatar fallback="J" />
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Jane Cooper</ResourceHeader.Title>
      <ResourceHeader.Id label="User ID">
        user_01H2XJKL3M4N5P6Q7R8S
      </ResourceHeader.Id>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
</ResourceHeader.Root>

With Accessories

Use ResourceHeader.MetaRow and ResourceHeader.Accessories to display additional metadata alongside the ID.

Acme Corporation

Enterprise

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.MetaRow>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
        <ResourceHeader.Accessories>
          <Badge color="gray">Enterprise</Badge>
        </ResourceHeader.Accessories>
      </ResourceHeader.MetaRow>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

Loading State

Set loading on the root to show skeletons for all children.

 <ResourceHeader.Root loading>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <ResourceHeader.TextColumn>
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </ResourceHeader.TextColumn>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

Icon Variants

Classic Variant

Solid Variant

 <Flex direction="column" gap="6">
  <ResourceHeader.Root>
    <ResourceHeader.Content>
      <ResourceHeader.Icon variant="classic">
        <CubeIcon />
      </ResourceHeader.Icon>
      <ResourceHeader.TextColumn>
        <ResourceHeader.Title>Classic Variant</ResourceHeader.Title>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
      </ResourceHeader.TextColumn>
    </ResourceHeader.Content>
  </ResourceHeader.Root>

  <ResourceHeader.Root>
    <ResourceHeader.Content>
      <ResourceHeader.Icon variant="solid">
        <CubeIcon />
      </ResourceHeader.Icon>
      <ResourceHeader.TextColumn>
        <ResourceHeader.Title>Solid Variant</ResourceHeader.Title>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
      </ResourceHeader.TextColumn>
    </ResourceHeader.Content>
  </ResourceHeader.Root>
</Flex>