Skill Level

Skill card with a violet level badge, XP numerator over denominator, and a gradient progress track.

TypeScript4,320 / 5,000 XP
Lv 7
680 XP to Lv 8

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Education10 } from "@/components/beste/piece/education10";

<Education10
  skill="TypeScript"
  level={7}
  xp={4320}
  nextLevelXp={5000}
  tone="neutral"
/>

More Education pieces

View all Education
24 lessons
Design systems for shipping teams
Beste Sözen6h 42m
58%

Course Card

education1

Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.

A
Graded
Essay · The ethics of automation92 / 100Compelling thesis, strong citations. Tighten the conclusion.

Grade Card

education14

Graded assignment card with a color-tinted letter tile, score fraction, and a clipped feedback excerpt.

You passed
8/ 10
80% · Passing mark 7/10Finished in 12:42

Quiz Result

education12

Quiz outcome card with a trophy tile, pass or fail tint, score fraction, percent, and elapsed time.

14
14-day streakShow up tomorrow to keep it alive.

Learning Streak

education9

Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.

Backend engineer path12-course track · beginner to senior
Path
1Node.js fundamentals8h
2Data modeling with Postgres10h
3APIs & authentication14h
4Production operations16h
Total 48 hours

Learning Path

education25

Multi-course path card listing numbered steps, per-step hours, and a primary Path tag in the header.

Prof. Lira Vasquez
Prof. Lira VasquezSenior instructor · React track
Top-rated
24,182 students4.9 average

Instructor Card

education21

Teacher profile with a gradient avatar wearing an amber award badge, subject line, and rating row.