Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Meeting Notes Card for Vue

A card titled Meeting Notes, with a summary line, a numbered list of five decisions, and three attendee avatars in the footer.

UI library: Ark UI

The title is Meeting Notes, with a line about a client transcript. The body has a summary sentence and a numbered list of five items, ending in a follow-up next Tuesday. Three avatars sit in the footer.

Gather one meeting's outcome, and who was there, on a project page. A Table fits if the notes are many meetings, not one. In Vue, Ark UI does not store the notes.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Card anatomy: root, header, title, description, action, content, footer

Usage

<Card class="w-full max-w-[1050px]">
  <CardHeader>
    <CardTitle>Meeting Notes</CardTitle>
    <CardDescription>Transcript from the meeting with the client.</CardDescription>
  </CardHeader>
  <CardContent class="flex flex-col gap-4">
    <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
    <ol class="flex list-inside list-decimal flex-col gap-2">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ol>
  </CardContent>
  <CardFooter>
    <AvatarGroup>
      <Avatar v-for="attendee in attendees" :key="attendee.name">
        <AvatarImage :alt="attendee.name" :height="32" :src="attendee.avatar" :width="32" />
        <AvatarFallback>{{ attendee.initials }}</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  </CardFooter>
</Card>

FAQ

How wide is this card?

Up to 1050px: w-full max-w-[1050px] on Card, so it fills its container and shrinks on small screens. Use a smaller max-w-* for a dashboard tile.

How is the note list marked up?

CardContent is a flex flex-col gap-4 column: a summary paragraph, then an ol with list-inside list-decimal and five items rendered from the items array.

How do the attendee avatars overlap?

They sit in AvatarGroup, which overlaps them and draws a ring in the background color around each one. Add AvatarGroupCount after the avatars to show +3 when there are more people than you list.

What does each avatar show?

AvatarImage with the person's name as alt, and AvatarFallback with their initials, shown while the picture loads or if it fails.

How do I show my own notes and people?

Replace the items and attendees arrays. Each attendee needs a name, an avatar URL and initials.

Can I add a date or an action to the header?

Yes. Put the date in CardDescription, and add CardAction inside CardHeader for a button such as Share or Edit, which sits at the top on the end side.

API Reference

Card

No extra props in this demo. The rest is on the Card page.

Avatar

Sets v-for="attendee in attendees", key="attendee.name", alt="attendee.name", height="32", src="attendee.avatar" and width="32". The rest is on the Avatar page.

All 4 card examples