fma-ds

Panel Card

A panel on a Card — a dashboard chart or table, or one resource and its status (a contract, the current plan) — with a standard header and a body that handles its own states.

originalMITexperimentalChangelogRegistry JSON

Overview

PanelCardHeader

  • `title`: a heading, headingLevel 2 by default.
  • `icon`: shown in a soft IconTile.
  • `description` and `status`: a Badge next to the title.
  • `help`: opened by an ⓘ button in a popover, so it works with touch and keyboard.
  • `updatedAt`: a Date or timestamp, formatted with Intl in the react-aria locale; isRefreshing shows a spinner next to it while the content stays on screen.
  • `toolbar`: a slot for the card's own controls, which wraps below the title on narrow cards.

PanelCardBody

Shows the first state that applies — isLoading (skeleton, first load only), isError (message plus "Try again" with onRetry), isEmpty (Empty) — or its children. emptyState/errorState replace the built-in messages (e.g. a missing resource with the action that adds it).

What goes where

  • Body: charts, tables, stat-cards and description-list; problems with the resource go in an Alert there, not in the card colors.
  • `CardFooter`: actions.

PanelCard's i18n.labels reaches every built-in text.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/panel-card

    Files land in components/fma-ds/panel-card/panel-card.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1