Resource List

Compact entity lists with structured status, content and metadata but no tabular header.

Purpose

Use Resource List for compact entity collections such as contacts, tasks, leads or files that do not need a tabular header and strict columns.

Entity rows

Acme Co.Enterprise plan

Active

NorthwindTrial workspace

Trial

import { ResourceList, ResourceListContent, ResourceListItem, ResourceListTitle } from "@/components/ui/resource-list";

export function Example() {
  return (
    <ResourceList>
      <ResourceListItem interactive>
        <ResourceListContent><ResourceListTitle>Acme Co.</ResourceListTitle></ResourceListContent>
      </ResourceListItem>
    </ResourceList>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/resource-list

Import

import {
  ResourceList,
  ResourceListContent,
  ResourceListDescription,
  ResourceListIndicator,
  ResourceListItem,
  ResourceListMeta,
  ResourceListTitle,
} from "@/components/ui/resource-list";

Need the machine-readable source metadata? View registry JSON.

Usage

Use Resource List for compact entity rows. Use indicators for category accents and text for the actual meaning.

import { ResourceList, ResourceListContent, ResourceListItem, ResourceListTitle } from "@/components/ui/resource-list";

export function Example() {
  return (
    <ResourceList>
      <ResourceListItem interactive>
        <ResourceListContent><ResourceListTitle>Acme Co.</ResourceListTitle></ResourceListContent>
      </ResourceListItem>
    </ResourceList>
  );
}

Examples

Variants, density, item states and indicators are props of the same primitives.

Soft variant

variant="soft" wraps the rows in a tinted container for soft selection surfaces.

Call the decision makerAcme Co.

today

Visit on siteNorthwind

09:30

Send the follow-up mailLinear Labs

tomorrow

<ResourceList variant="soft">
  <ResourceListItem active>
    <ResourceListIndicator shape="dot" tone="success" />
    <ResourceListContent>
      <ResourceListTitle>Visit on site</ResourceListTitle>
      <ResourceListDescription>Northwind</ResourceListDescription>
    </ResourceListContent>
    <ResourceListMeta>09:30</ResourceListMeta>
  </ResourceListItem>
</ResourceList>

Compact density

density="compact" tightens gaps, row padding and meta size for sidebars and popovers.

Call the decision makerAcme Co.

today

Visit on siteNorthwind

09:30

Send the follow-up mailLinear Labs

tomorrow

<ResourceList density="compact">
  <ResourceListItem>
    <ResourceListIndicator shape="ring" tone="warning" />
    <ResourceListContent>
      <ResourceListTitle>Call the decision maker</ResourceListTitle>
      <ResourceListDescription>Acme Co.</ResourceListDescription>
    </ResourceListContent>
    <ResourceListMeta>today</ResourceListMeta>
  </ResourceListItem>
</ResourceList>

Item states

ActiveMarks the current row via aria-current

SelectedSelection state independent of the active row

DisabledNot interactive, reduced opacity

<ResourceList>
  <ResourceListItem active>...</ResourceListItem>
  <ResourceListItem selected>...</ResourceListItem>
  <ResourceListItem disabled>...</ResourceListItem>
  <ResourceListItem interactive render={<button type="button" />}>
    ...
  </ResourceListItem>
</ResourceList>

Indicators

Shapes and tones are decorative accents; a labeled icon indicator becomes an image role.

Dot

chart-1

Ring

warning

Diamond

info

Bar

success

Icon

labeled

<ResourceListIndicator tone="chart-1" />
<ResourceListIndicator shape="ring" tone="warning" />
<ResourceListIndicator shape="diamond" tone="info" />
<ResourceListIndicator shape="bar" tone="success" />
<ResourceListIndicator icon={<CheckIcon aria-hidden="true" />} label="Done" tone="success" />

Interactive list

Interactive items render as buttons and drive local selection state.

const [selectedId, setSelectedId] = useState("jin");

<ResourceList>
  {contactItems.map((contact) => (
    <ResourceListItem
      interactive
      key={contact.id}
      onClick={() => setSelectedId(contact.id)}
      render={<button type="button" />}
      selected={selectedId === contact.id}
    >
      <ResourceListIndicator tone={contact.tone} />
      <ResourceListContent>
        <ResourceListTitle>{contact.name}</ResourceListTitle>
      </ResourceListContent>
      <ResourceListMeta>{contact.meta}</ResourceListMeta>
    </ResourceListItem>
  ))}
</ResourceList>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

ResourceList accepts density="default" | "compact" and variant="default" | "soft".
Compose ResourceListItem, ResourceListIndicator, ResourceListContent, ResourceListTitle, ResourceListDescription and ResourceListMeta.
ResourceListItem accepts interactive, selected, active, disabled and Base UI's render prop for a semantic button or link.
ResourceListIndicator supports muted, success, warning, info, error and chart-1 through chart-5, plus bar, diamond, dot and ring shapes.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Resource List uses quiet hover, active and selected state changes without row lift or entry animation.
Indicator and selection changes do not alter row measurements; reduced motion requires no extra behavior.

Accessibility

Interactive rows must render as semantic buttons or links and retain visible keyboard focus.
Color indicators are supplementary. Provide status text, an icon label or another non-color explanation.
Keep title, description and metadata in their named slots so reading order stays predictable.

Implementation Guidance

Use Table for genuine column comparison and Resource List for lighter entity scanning.
Use all available indicator tones through the documented tone prop instead of adding local colors.
Do not simulate interactive rows with click handlers on non-focusable containers.