Manicat UI

Card

A contained group of related content and actions.

surfacelayout
Preview
Card preview

Quiet motion

Springs for anything that moves on screen.

Cards carry a title, an optional status and any content. With details set, the card opens into a larger view in place.

Updated 2 hours ago

When to use

  • Browsable items in a grid, such as projects, listings, or posts.
  • Items that should open into a larger quick look dialog without leaving the page, via details.
  • Content with media, an owner byline, and a status line that updates in place.

When not to use

  • Use expandable-card for inline disclosure without a dialog.
  • Use stat-card or metric-card for numbers.
  • Use dialog when the content has no card to grow from.

shadcn CLI

Also installs (1)

  • manicat-foundation
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A contained group of related content and actions.",
  "categories": [
    "data"
  ],
  "dependencies": [
    "@radix-ui/react-dialog",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/card/card.tsx",
      "type": "registry:component",
      "target": "@components/manicat/card/card.tsx"
    },
    {
      "path": "registry/components/card/card.module.css",
      "type": "registry:component",
      "target": "@components/manicat/card/card.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/card",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/card",
    "markdown": "https://uiarc.dev/components/card/markdown",
    "tags": [
      "surface",
      "layout"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { Card } from "@/components/manicat/card/card";

export function CardExample() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <Card title="Quiet motion" description="Springs for anything that moves on screen." status="Updated 2 hours ago">
        <p className="text-sm text-(color:--text-muted)">
          Cards carry a title, an optional status and any content. With details set, the card opens into a larger view in
          place.
        </p>
      </Card>
    </div>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Roadmap card A card with a title, a status line and any content inside.

Roadmap card A card with a title, a status line and any content inside. preview

Quiet motion

Springs for anything that moves on screen.

Shipped12 components
Updated 2 hours ago

Keyboard interactions

KeysAction
Enter / SpaceOn the title, opens the quick look when details is set.
EscapeCloses the quick look and returns focus to the title.
TabStays trapped inside the open quick look.

Accessibility

  • Renders an article with an h3 title; the quick look uses Radix Dialog with the title and description wired as its label and description.
  • Only the title becomes a button, so nested actions stay separately focusable.
  • Status changes are read through a role="status" region.
  • Give media images alt text or an empty alt when decorative, and an aria-label to icon-only actions.

Motion

  • Hover lifts the card 2px and slowly zooms the media.
  • The quick look shares layout ids with the card, so surface, photo, title, and byline travel on one spring; details fade in after.
  • Reduced motion drops the lift, zoom, and morph, and the dialog simply fades.

Responsive behavior

  • The card fills its grid cell with min-width 0; the quick look panel is min(30rem, 100vw minus a gutter) wide and capped at the viewport height.
  • Hover lift and media zoom run only for a mouse; touch and pen never lift.

Performance

  • The quick look shares layout ids with the card, so the morph animates several elements; the dialog mounts only while open.
  • The overlay uses a 7px backdrop blur, which can cost frames on low-end devices over busy pages.

Notes for AI

  • Use for browsable items in a grid: projects, listings, posts. Use expandable-card for inline disclosure without a dialog, and stat-card or metric-card for numbers.
  • Add details only when there is real extra content; without it the card is a static article.
  • Keep status short and change it in place to get the rolling update.