Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Student Academic GPA Profile Block for Ark UI

A student profile as a GPA what-if: five courses each with a grade menu on a four-point scale, the semester and cumulative GPA worked out in the open from the credits and the transcript, a bar with a tick at the dean's list line and a reset to the planned grades.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what a grade does before it is earned, with this student academic profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the student: initials, name, programme and college, and a badge with the semester's credits, worked out from the courses. Five courses follow, each a row with its code and credits and a Native Select of grades from A to F, each with its points on a four-point scale. The semester GPA and the cumulative GPA are worked out in the open from the grades you pick, the credits and the points already on the transcript, with the cumulative figure shown against what it was before. A bar draws the semester GPA against the four-point scale, with a tick at the dean's list line of 3.60 and a short phrase beside it ("0.14 to go", or "On the list, 0.01 above"). A ghost Button resets the grades to the plan. A line at the foot says nothing is recorded. It's built from Native Select, Button, Badge, Avatar and Guides with CSS only. The student, the college, the courses and the transcript are invented. For a student portal, an advising page or any profile with a grade what-if.

FAQ

How do I use my own courses and scale?

Edit COURSES (a code, a title and credits), GRADES (each grade with its points in tenths, so 3.7 is 37), PLANNED (the grades the semester starts at), PRIOR (the credits and tenths of points already on the transcript) and DEAN (the line, in hundredths). Every figure is worked out from those, in whole tenths so the sums never drift.

How are the two GPAs worked out?

The semester GPA is the sum of credits times grade points over the semester's credits. The cumulative GPA adds the prior points and credits first. Both are rounded to hundredths for display, and the dean's list check uses the rounded figure you see, so the page never says "0.00 to go" next to a figure under the line. The change against the prior cumulative GPA is shown with a sign.

What does Reset to plan do?

It puts every course back to its planned grade and says so in the status line. When the grades already match the plan it stays in place, marked unavailable, and answers "The grades already match the plan." instead of doing nothing silently.

Is it accessible, and what about right-to-left?

Each grade menu is a native select labelled with its course, so it works with the keyboard and the phone's own picker. The bar is decoration: the figures and the dean's list phrase carry the result in text, and the status line, a polite live region present from the start, speaks the new GPAs after each change. Figures are isolated and kept left to right so digits keep their order in a right-to-left layout.

How does it look on a phone?

The course rows keep the menu at the end of the row and the name at the start, the figures stay side by side and the bar spans the width. Reserved widths on the figures and the phrase mean nothing shifts when a grade changes the digits.

What stays local, and how do I wire it to real data?

It is a what-if: picking grades changes only the page, and nothing is recorded or sent. The student, the college, the courses and the transcript are invented. To wire it up, load the courses and the transcript totals from your student system into the constants, and keep the helpers; to save a plan, post the chosen grades to your own endpoint from the menu handler.

All 100 profile blocks