Card

A contained group of related content and actions.

$npx shadcn@latest add @silicon-ui/card

surfacelayout

Installation

$npx shadcn@latest add @silicon-ui/card

Install the dependencies.
$npm install @radix-ui/react-dialog lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/card/card.tsx
- components/silicon-ui/card/card.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { Card } from "@/components/silicon-ui/card/card";

Prop	Type	Default
`title*`	`string`	—
`description`	`string`	—
`media`	`ReactNode`	—
`action`	`ReactNode`	—
`avatar` A small leading visual for the footer, such as the owner's avatar.	`ReactNode`	—
`meta` Who the card belongs to, such as the owner's name.	`ReactNode`	—
`status` A short status under the meta, such as "Updated 2 hours ago". Changed words rise in and are announced politely.	`string`	—
`details` Content for a quick look. When set, the whole card opens and grows into a larger view; Escape or the close control morphs it back.	`ReactNode`	—
`open`	`boolean`	—
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	—

Also accepts the props of HTMLAttributes<HTMLElement>.