Component

ResourcesPanel

List project resources such as live links, source, docs, files, and videos in a compact sidebar.

Usage

Import the component entry and start with its smallest complete example.

Import

import { ResourcesPanel } from "@chitrank2050/monoline-ui/resources-panel"

Basic usage

<ResourcesPanel
  meta="v2.4.1 · MIT"
  title="Resources · 8"
  items={[
    {
      kind: "live",
      label: "Live app",
      href: "https://monolineui.io",
      host: "monolineui.io",
      primary: true,
    },
    {
      kind: "source",
      label: "Source code",
      href: "https://github.com/monoline/insights",
      host: "github.com/monoline/insights",
    },
  ]}
/>

<ResourcesPanel title="Links" items={resources} footer={null} />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

ResourcesPanel groups source, package, documentation, design, or media links in one place.

Avoid when

The links are primary site navigation or the URLs have no clear user-facing labels.

Accessibility

ResourcesPanel is an aside containing a list of native links. Decorative icons stay hidden, and the complementary landmark needs a descriptive title.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgPanel density and row scale

titlestringExact header label (defaults to Resources)

metaReactNodeRight-aligned header metadata

itemsResourcesPanelItem[]Dynamic resource rows

footerReactNode | nullFooter override; null hides the footer

footerLabelReactNodeCustom footer text when footer is not set

linkComponentComponentTypeNext Link or router link adapter

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-resources-panel-padding-xCSS varInline row and header padding

--ml-resources-panel-icon-sizeCSS varResource icon box size

--ml-resources-panel-label-textCSS varRow label type scale

--ml-resources-panel-host-textCSS varRow host metadata type scale

--borderCSS varPanel and row separators

Implementation

The source used by the example above, including any state it needs.

import { ResourcesPanel } from "@chitrank2050/monoline-ui/resources-panel"

export function ProjectResources({ resources }) {
  return (
	    <ResourcesPanel
	      meta="v2.4.1 · MIT"
	      title={`Resources · ${resources.length}`}
	      items={resources}
	      footerLabel="8 total resources"
	    />
  )
}

Compare related components or review the package and theme setup.

01ComponentLink ListComponent · ReferenceReference→02ComponentCode BlockComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview