Layer Card - Kumo

Worker requests

8.4M

+12% from last week

Installation

Barrel

Granular

Usage


export default function Example() {
  return (
    <LayerCard className="w-[250px]">
      <LayerCard.Secondary>Documentation</LayerCard.Secondary>
      <LayerCard.Primary>Learn how to use Kumo components</LayerCard.Primary>
    </LayerCard>
  );
}

LayerCard also supports a simple surface-style mode for cases where you do not need a secondary header row. In those cases, render content directly inside LayerCard instead of wrapping it in LayerCard.Primary.


export default function Example() {
  return (
    <LayerCard className="w-[250px] p-4">
      Learn how to use Kumo components
    </LayerCard>
  );
}

Examples

Basic Card

Worker requests

8.4M

+12% from last week

Surface-style Card

For simple card containers, render content directly inside LayerCard without LayerCard.Primary.

Worker requests

8.4M

+12% from last week

Multiple Cards

Worker requests

8.4M

+12% from last week

Filter Toolbar with Small Tabs

Combine Tabs size="sm" with Input size="sm" inside a LayerCard for compact filter toolbars. Both share the same h-6.5 (26px) height.

Worker requests

8.4M

+12% from last week

Test IDs

LayerCard.Primary and LayerCard.Secondary accept all standard HTML attributes, including data-testid for testing.

Worker requests

8.4M

+12% from last week

API Reference

Props table: LayerCard