Student Roster

Ranked student list with rank digits, avatar initials, and emerald score pills on the right.

Top of the cohort
1
Priya Shah
Priya Shah98
2
Noor Ahmed
Noor Ahmed94
3
Jordan Reyes
Jordan Reyes91
4
Beste Sözen
Beste Sözen89

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

Import & use
import { Education22 } from "@/components/beste/piece/education22";

<Education22
  heading="Top of the cohort"
  students={[
    {
      "name": "Priya Shah",
      "initials": "PS",
      "score": "98",
      "imageSrc": "https://images.unsplash.com/photo-1606122017369-d782bbb78f32?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzF8fHBvcnRyYWl0fGVufDB8fDB8fHww",
      "alt": "Priya Shah"
    },
    {
      "name": "Noor Ahmed",
      "initials": "NA",
      "score": "94",
      "imageSrc": "https://images.unsplash.com/photo-1611695434398-4f4b330623e6?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjZ8fHBvcnRyYWl0fGVufDB8fDB8fHww",
      "alt": "Noor Ahmed"
    },
    {
      "name": "Jordan Reyes",
      "initials": "JR",
      "score": "91",
      "imageSrc": "https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODJ8fHBvcnRyYWl0fGVufDB8fDB8fHww",
      "alt": "Jordan Reyes"
    },
    {
      "name": "Beste Sözen",
      "initials": "BS",
      "score": "89",
      "imageSrc": "https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fHBvcnRyYWl0fGVufDB8fDB8fHww",
      "alt": "Beste Sözen"
    }
  ]}
/>

More Education pieces

View all Education
Elara Martin
Student IDElara MartinGrade 7 · 7BRedwood Middle School
STD-24-00281

Student ID

education29

ID-card layout with an indigo photo panel on the left and a name, grade, school, and validity footer.

Full-stack TypeScript · Spring cohort
Students12,480
Rating4.8
UpdatedLast week

Enrollment Stats

education6

Course metadata strip summarizing student count, star rating, and last updated in a three-column grid.

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.

Noor Ahmed
Noor AhmedStudent · Cohort 12
Resolved

In lesson 6, the dependency array skips the `setCount` setter. Isn't it a stale closure risk?

4 replies12

Discussion Thread

education16

Student Q&A card with an avatar header, resolved pill, clipped question body, and reply and like counts.

The office hours alone were worth the tuition. I came in wanting to learn Next.js and left with a new role.

Andrea Kim
Andrea KimCohort 12 · Graduated Mar 2026

Student Testimonial

education26

Graduate testimonial with five-star rating, a body paragraph, and an avatar-cohort footer.

Composing tokens with Tailwind18 min
03

Lesson Row

education2

Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.