 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Icon>
          <Text size="6" weight="bold">
            FC
          </Text>
        </ResourceHeader.Icon>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>Foo Corp</ResourceHeader.Title>
          <ResourceHeader.Id>org_01ABCDEF123456789</ResourceHeader.Id>
        </Flex>
      </ResourceHeader.Content>
      <ResourceHeader.Actions>
        <Button color="purple">Actions</Button>
      </ResourceHeader.Actions>
    </ResourceHeader.Root>
  );
}

API Reference

The ResourceHeader component is composed of several subcomponents that work together. The Root component provides a loading context that its children use to display skeletons automatically.

Root

The outer container. Wraps children in a Flex with align="center" and justify="between". Provides the loading context to all child subcomponents.

Prop	Type	Default
`loading`	`boolean`	`false`
`children`	`React.ReactNode`

Extends all Flex props.

Content

Left-side container for the icon/avatar and title stack. Uses gap="5".

Extends all Flex props.

Icon

Displays an IconPanel at size "4" (56px). Renders a skeleton when loading.

Prop	Type	Default
`children`	`React.ReactNode`	required
`variant`	`"classic" \| "solid"`	`"classic"`

Avatar

Displays a user avatar at size "3" (64px). Renders a circular skeleton when loading.

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

Title

Renders a Heading as h2 at size "5". Renders a skeleton when loading.

Extends all Heading props except size and as.

Id

Copyable resource ID using CopyChip with Code. Renders a skeleton when loading.

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

Accessories

Container for additional elements like status badges or email chips. Hidden when loading.

Extends all Flex props.

Actions

Container for action buttons positioned on the right side. Hidden when loading.

Extends all Flex props.

Examples

Title Only

A minimal header with just a title.

Session

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Title>Session</ResourceHeader.Title>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

Title with ID

A title paired with a copyable resource ID.

user.created

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>user.created</ResourceHeader.Title>
          <ResourceHeader.Id>event_01ABCDEF123456789</ResourceHeader.Id>
        </Flex>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

With Icon (Text Initials)

Use the Icon subcomponent with text content for organization-style headers.

Acme Inc

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Icon>
          <Text size="6" weight="bold">
            AB
          </Text>
        </ResourceHeader.Icon>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>Acme Inc</ResourceHeader.Title>
          <ResourceHeader.Id>org_01ABCDEF123456789</ResourceHeader.Id>
        </Flex>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

With Icon (Provider)

Use variant="solid" with a ProviderIcon for integration-style headers.

GitHub Integration

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Icon variant="solid">
          <ProviderIcon provider="github" size="4" />
        </ResourceHeader.Icon>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>GitHub Integration</ResourceHeader.Title>
          <ResourceHeader.Id>int_01ABCDEF123456789</ResourceHeader.Id>
        </Flex>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

With Avatar

Use the Avatar subcomponent for user-centric headers.

Jane Doe

jane@example.com

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Avatar fallback="J" />
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>Jane Doe</ResourceHeader.Title>
          <Flex align="center" gap="4">
            <ResourceHeader.Id>user_01ABCDEF123456789</ResourceHeader.Id>
            <ResourceHeader.Accessories>
              <Text color="gray" size="2">
                jane@example.com
              </Text>
            </ResourceHeader.Accessories>
          </Flex>
        </Flex>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

With Accessories

Use the Accessories subcomponent for status badges or metadata.

Okta Directory

Active

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Icon variant="solid">
          <ProviderIcon provider="okta" size="4" />
        </ResourceHeader.Icon>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>Okta Directory</ResourceHeader.Title>
          <Flex align="center" gap="4">
            <ResourceHeader.Id>directory_01ABCDEF123456789</ResourceHeader.Id>
            <ResourceHeader.Accessories>
              <Status color="green">Active</Status>
            </ResourceHeader.Accessories>
          </Flex>
        </Flex>
      </ResourceHeader.Content>
    </ResourceHeader.Root>
  );
}

With Actions

Use the Actions subcomponent for buttons on the right side of the header.

Webhook Endpoint

 function Example() {
  return (
    <ResourceHeader.Root>
      <ResourceHeader.Content>
        <ResourceHeader.Title>Webhook Endpoint</ResourceHeader.Title>
      </ResourceHeader.Content>
      <ResourceHeader.Actions>
        <Button>Send Test Event</Button>
        <Button color="purple">Actions</Button>
      </ResourceHeader.Actions>
    </ResourceHeader.Root>
  );
}

Loading State

Set loading on the Root to show skeletons for Icon, Title, and Id. Accessories and Actions are hidden during loading.

 function Example() {
  return (
    <ResourceHeader.Root loading>
      <ResourceHeader.Content>
        <ResourceHeader.Icon>
          <Text size="6" weight="bold">
            FC
          </Text>
        </ResourceHeader.Icon>
        <Flex direction="column" gap="1">
          <ResourceHeader.Title>Foo Corp</ResourceHeader.Title>
          <ResourceHeader.Id>org_01ABCDEF123456789</ResourceHeader.Id>
        </Flex>
      </ResourceHeader.Content>
      <ResourceHeader.Actions>
        <Button color="purple">Actions</Button>
      </ResourceHeader.Actions>
    </ResourceHeader.Root>
  );
}