Card
A contained group of related content and actions.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- 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.
- 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.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Card } from 'animui/card';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Card } from "animui/card";import { Avatar } from "animui/avatar"; export function ProjectCard() { return ( <Card title="Harbour redesign" description="New booking flow and room pages." media={<img src="/harbour.jpg" alt="" />} avatar={<Avatar name="Maya Chen" size="sm" />} meta="Maya Chen" status="Updated 2 hours ago" details={<p>Scope, milestones, and open questions.</p>} /> );}Card
A content card with optional media, byline, and action that can grow into a quick look dialog.
PropTypeDefaultDescription
titleRequiredstring–Card heading. Becomes the dialog trigger when details is set.descriptionstring–Supporting line under the title.mediaReactNode–Image or visual at the top. Zooms slightly on hover.actionReactNode–Trailing footer control, such as a button.avatarReactNode–Small leading visual in the footer, such as the owner's avatar.metaReactNode–Who the card belongs to, shown in the byline.statusstring–Short status under the meta, such as "Updated 2 hours ago". Changes roll in word by word and are announced politely.detailsReactNode–Quick look content. When set, the card opens into a larger Radix dialog.openboolean–Controlled quick look state.defaultOpenbooleanfalseInitial quick look state when uncontrolled.onOpenChange(open: boolean) => void–Called when the quick look opens or closes.childrenReactNode–Extra body content between the description and footer....propsHTMLAttributes<HTMLElement>–Forwarded to the root article.- EnterorSpace
- On the title, opens the quick look when details is set.
- Escape
- Closes the quick look and returns focus to the title.
- Tab
- Stays trapped inside the open quick look.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.
