AppCard

Tenant dashboard grid card composing the status vocabulary.

AppCard is the dashboard grid card on MetricCard’s shell: hairline border warming on hover, color-only feedback, no motion. The mono name sits up top with a quiet corner arrow that inks in on hover, StatusBadge and PlanBadge anchor the foot with the timestamp opposite, and the whole card is one link.

book-tracker

Track your reading list with an add-book form and read/unread toggles.

readypaid2h ago

invoice-search

Search invoices by vendor, amount, and line items.

provisioningfreejust now

standup-notes

Summarize the team's standup notes into weekly digests.

errorfree3d ago

recipe-box

Store and scale family recipes with unit conversion.

stoppedfree2w ago

import { AppCard } from "./app-card";
import { apps } from "./fixtures";

export const AppCardDemo = () => (
  <div className="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
    {apps.map((app) => (
      <AppCard
        description={app.description}
        href="#"
        key={app.name}
        name={app.name}
        onClick={(event) => event.preventDefault()}
        plan={app.plan}
        status={app.status}
        updatedAt={app.updatedAt}
      />
    ))}
  </div>
);

export default AppCardDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/app-card.json

Usage

import { AppCard } from "@/components/neon-ui/app-card";

<AppCard
  href="/apps/book-tracker"
  name="book-tracker"
  status="ready"
  plan="paid"
  updatedAt="2h ago"
/>;

Wiring to Neon

The typed example maps GET /projects onto a grid: project name, a status derived from the default endpoint state, and a relative timestamp from updated_at.

Props

Extends ComponentProps<"a"> — pass href and any anchor props.

PropType

namestring

App name, shown in mono.

Typestring

status"ready" | "provisioning" | "error" | "stopped"

Lifecycle state, rendered as a StatusBadge.

Type"ready" | "provisioning" | "error" | "stopped"

plan?"free" | "paid"

Billing plan, rendered as a PlanBadge.

Type"free" | "paid"

description?string

One-line summary, clamped to two lines.

Typestring

updatedAt?string

Last activity, already formatted, e.g. "2h ago".

Typestring

wash?boolean | ReactNode

Status-colored grain rising from the bottom edge; brightens and drifts up on hover. Pass a ReactNode to replace the built-in grain.

Typeboolean | ReactNode

Defaulttrue

Animated wash

The default wash is pure CSS — the same fractal grain MetricCard draws, faded from the foot, brightening and drifting up on hover. For a live animated wash, pass any ReactNode to wash; it renders inside the same positioned, status-tinted slot. AnimatedWash is the registry’s own WebGL grain gradient (adapted from paper-design/shaders, Apache-2.0): it reads currentColor from the slot, so the status vocabulary colors it automatically, and it freezes under reduced motion:

book-tracker

Track your reading list with an add-book form and read/unread toggles.

readypaid2h ago

"use client";

import { AnimatedWash } from "@neon-ui/registry/components/animated-wash/animated-wash";
import { AppCard } from "@neon-ui/registry/components/app-card/app-card";

/**
 * The wash slot accepts any ReactNode. AnimatedWash is the registry's own
 * WebGL grain gradient (adapted from paper-design/shaders): it reads
 * currentColor from the status-tinted slot, so the same vocabulary that
 * colors the static CSS wash colors the animated one.
 */
export default function AppCardShaderDemo() {
  return (
    <div className="w-full max-w-sm">
      <AppCard
        description="Track your reading list with an add-book form and read/unread toggles."
        href="#"
        name="book-tracker"
        onClick={(event) => event.preventDefault()}
        plan="paid"
        status="ready"
        updatedAt="2h ago"
        wash={<AnimatedWash />}
      />
    </div>
  );
}

Accessibility

The card is a single anchor: one tab stop, the name as its accessible text along with the badge labels. The corner arrow is decorative; focus renders a primary border with no layout shift.