Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Card examples · Standard

Meeting Notes Card for React

A card with meeting notes, a numbered list of action items and the attendees' avatars in the footer.

Framework
UI library

Meeting notes scattered across tools? This React card gathers them: a title and a description, a summary line, a numbered list of what was decided, and the attendees as overlapping avatars in the footer. Use it in a project dashboard, a team wiki or anywhere you show the outcome of a meeting and who was there.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit 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.

All 4 card examples