---
title: Card
description: A container that groups related content and actions.
---
import Source from './_generated/card.mdx';

A surface container that groups related content and actions — tonal elevation on Material, frosted
glass on iOS.

<DemoFrame component="card" />

## Installation

```bash
npx touchcn add card
```

## Usage

<CodeGroup>

```html Angular
<tcn-card>
  <h3>Weekly summary</h3>
  <p>You closed 12 tasks this week.</p>
</tcn-card>
```

```tsx React
import { TcnCard } from '@/components/ui/card';

<TcnCard>
  <h3>Weekly summary</h3>
  <p>You closed 12 tasks this week.</p>
</TcnCard>
```

```vue Vue
<script setup lang="ts">
import { TcnCard } from '@/components/ui/card';
</script>

<template>
  <TcnCard>
    <h3>Weekly summary</h3>
    <p>You closed 12 tasks this week.</p>
  </TcnCard>
</template>
```

</CodeGroup>

## Props

`TcnCard` forwards all standard `<div>` attributes; content is projected as children.

<Source />