Course Certificate Display
Certificate showcase card presenting the course name, issuing institution, completion date, a row of skill badges earned, and a monospace credential ID, alongside decorative Verify and Download buttons.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/course-certificate-display.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/education/education13.tsx instead.
Usage
The file also exports education13Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Education13, education13Demo } from "@/components/blocks/education/education13"; export default function Page() { return <Education13 {...education13Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; variant?: BadgeVariant } | none | Pill above the heading; only rendered when badge or heading is truthy. |
| heading | ReactNode | undefined | Optional section heading above the certificate card. |
| courseName | string | none | Name of the completed course. |
| institution | string | none | Issuing institution name. |
| recipientName | string | none | Name of the person the certificate was issued to. |
| completionDate | string | none | Completion date, already formatted (e.g. "June 2, 2026"). |
| skills | string[] | [] | Skill badges earned, rendered as a tag row. |
| credentialId | string | none | Unique credential identifier, rendered in monospace. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- Fully static: this is a Server Component, so neither the "Verify credential" nor "Download PDF" button has an onClick or any other event handler attached; they're purely decorative, matching every other CTA-without-a-backend elsewhere in the Blocks categories.
- The dashed border and centered layout are meant to visually read as a printable certificate, not an interactive dashboard card.
- skills only renders its tag row when the array is non-empty.
- completionDate is a plain pre-formatted string prop; no date parsing or formatting happens inside the component.
More Education Blocks
View all →academy-course-cards
Academy Course Cards
Academy section with an eyebrow, a two-column heading, and three course cards that float a lesson checklist above a category label, title, and lesson count.
institutional-quick-facts
Institutional Quick Facts
Quick facts grid displaying key institutional statistics with a large value, label, and short description per tile.
global-partnerships-grid
Global Partnerships Grid
Global partnerships section showcasing partner institutions with location details and yearly exchange statistics.
mission-and-vision-statement
Mission and Vision Statement
Side-by-side mission and vision text blocks with an inspirational leadership quote below.
social-media-links-grid
Social Media Links Grid
Social media connection section with platform cards showing handle and follower count.
education-social-proof
Education Social Proof
Social proof section pairing key stats (rating, enrollment, completion rate) with a featured student testimonial.