Developer profile with a boxy mono avatar, github handle, stack chips, contributions, and streak flame.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card28 } from "@/components/beste/component/card28";
<Card28
name="Jules Park"
handle="jules.dev"
stack={["TypeScript","Go","Postgres","Terraform"]}
contributions="1,284 commits this year"
streak="12-day streak"
initials="JP"
image="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=100&auto=format&fit=crop"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| The dismiss button | Takes the card off the page unless `permanent` is set, and calls `onDismiss` so the page can remember. |
|---|
The import and the props worth knowing about, in one place.
import { Card28 } from "@/components/beste/piece/card28";
<Card28
name="Jules Park"
handle="jules.dev"
stack={[
"TypeScript",
"Go",
"Postgres",
"Terraform"
]}
contributions="1,284 commits this year"
streak="12-day streak"
initials="JP"
image="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=100&auto=format&fit=crop"
/>Avatar with name, role, and a presence dot in emerald, amber, or slate.
Designing the tooling that ships millions of components every week.
User profile card with a gradient avatar, role, location, a short bio, and a trailing social icon button.
Writing small notes about large systems.
Compact social hover card with avatar, handle, short bio, and a three-column posts/following/followers strip.
Our team went from pitching mockups to shipping prod features in the same sprint. The switch paid for itself in one quarter.
Compact testimonial with a leading quote glyph, body paragraph, and an avatar byline underneath.