A developer profile whose contributions rise as an isometric skyline, one tower per day, with hover and arrow-key inspection of each day. Beside it sit streak counters, a language bar and pinned repositories.
npx shadcn@latest add https://hyperblur.dev/r/profile-dev-skyline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-dev-skyline.tsx.
import { ProfileDevSkyline } from "@/components/hyperblur/profile-dev-skyline"
<ProfileDevSkyline onCellSelect={(cell) => console.log(cell)} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Teodor Vasquez" | Display name. Also gives the avatar initials. |
| handle | string | "@tvasquez" | Handle under the name. |
| role | string | "Systems engineer at Brightline" | Role chip. |
| bio | string | Short bio. | |
| weeks | number | 30 | Weeks shown in the skyline. |
| startDate | string | "2026-04-06" | First day (a Monday) as YYYY-MM-DD, used for labels. |
| seed | number | 7 | Seed for the built-in sample data. |
| contributions | number[] | Daily counts, weeks times 7 values, Monday first. Replaces the sample data. | |
| languages | { name: string; share: number; color: string }[] | 4 languages | Language bar segments in percent. |
| repos | { name: string; description: string; stars: string; language: string }[] | 3 repos | Pinned repositories. |
| followLabel | string | "Follow" | Follow button label. |
| onFollow | () => void | Called when follow is toggled. | |
| onCellSelect | (cell: { date: string; count: number }) => void | Called when a day is hovered or reached by keyboard. | |
| accent | string | "#38bdf8" | Tower and highlight color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |