patterns

ProjectCard

Flat clickable tile for project lists. No preview, name-driven. Background MATCHES the page surface — projects are not 'elevated objects', they ARE the page's content.

Same chrome as the Supertest projects page. Renders a `h-44` rounded tile with title, optional subtitle, mono tabular-nums footer (counts / stats), and an absolutely-positioned kebab menu in the corner. Whole tile is the click target. Use a 1/2/3/4-column responsive grid (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4`) for the list page itself — DSListPage is for tables only.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/project-card.json

Or import from the workspace package:

import { ProjectCard } from "@8maverik8/design";

import { DropdownMenuItem, DropdownMenuSeparator } from "@8maverik8/design";

Examples

Default

<ProjectCard
  title="Кухня на даче"
  href="/w/personal/projects/abc"
  footer={<><span className="text-foreground">7</span><span className="mx-1 text-muted-foreground/50">/</span><span>12</span><span className="ml-1.5">мебель</span></>}
  menu={
    <>
      <DropdownMenuItem><LayoutDashboard /> Открыть</DropdownMenuItem>
      <DropdownMenuItem><Settings /> Настройки</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant="destructive"><Trash2 /> Удалить</DropdownMenuItem>
    </>
  }
/>

Without kebab

<ProjectCard title="Шкаф для прихожей" subtitle="Эскиз. 3 правки за сегодня." href="/..." />

Anatomy

Tile`h-44 rounded-xl border bg-background`. Hover wash `bg-foreground/[0.04]`. Focus ring on tab-in.
TitleBold name, truncated, reserves `pr-8` for the kebab.
Subtitle (optional)Muted two-line description below the title.
Footer (optional)Mono / tabular-nums slot, right-aligned. Use for counts or last-edited time.
Kebab (optional)`size-7` button in the top-right corner. Opens a DropdownMenu when `menu` is set.

Guidelines

Use ProjectCard for project lists. Use EntityCard for furniture / spaces / templates where a preview matters.Projects are identified by name; entities by visual.
Wrap ProjectCard in another card. Don't put DSPageShell's body padding around the grid.The tile already paints its own surface. Stacking cards reads as a bug.
Pass a router `linkComponent` (e.g. Next/Link) for client-side navigation.Default renders a native `<a>` which forces a full reload; passing a router Link keeps SPA navigation.
Add severity chips, status pills, or progress bars on the tile.ProjectCard is intentionally monochrome and minimal — visual signal is the title and the count. Status decoration drifts.