Card

Use Card to group related information, actions, and descriptions into a surface with clear spatial hierarchy.

Preview

Card primitives give you a stable surface for headers, content blocks, supporting copy, and action rows.

Ship a consistent docs and component experience across React and Vue.

Use cards for summaries, settings surfaces, marketing CTAs, and denser information blocks that need a clear frame.

Registry install

pnpm dlx shadcn@latest add https://react.tileui.zmorg.cn/r/card.json

import { Card, CardHeader, CardTitle, CardContent } from '@tile-ui/react';