Product Engineer
Stackhacker UIDesigns and ships reusable Nuxt and shadcn-vue blocks for product teams.
Overview
Work experience
A compact career-history list with app-owned organization visuals.
Design Systems Lead
Northstar LabsLed a component platform across marketing, docs, and dashboard surfaces.
Independent Interface Designer
Freelance
Partnered with early-stage teams on brand systems and product launches.
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/work-experience.json"
Usage
<script setup lang="ts">
import { ExternalLink } from 'lucide-vue-next'
import { WorkExperience, type WorkExperienceItem } from '@/components/work-experience'
const items: WorkExperienceItem[] = [
{
id: 'stackhacker',
dateLabel: '2024 - Present',
role: 'Product Engineer',
organization: 'Stackhacker UI',
href: 'https://ui.stackhacker.io',
target: '_blank',
description: 'Designs and ships reusable Nuxt and shadcn-vue blocks.'
}
]
</script>
<template>
<WorkExperience title="Work experience" :items="items">
<template #organization="{ item }">
<ExternalLink v-if="item.href" class="size-3.5" aria-hidden="true" />
</template>
</WorkExperience>
</template>WorkExperience vs ChangelogTimeline
WorkExperience is for compact career-history and resume surfaces: dates, roles, organizations, and optional organization links. It does not render release bodies, latest markers, loading states, or retry states.
Use ChangelogTimeline for content timelines and release histories. Use WorkExperience when the job is career history and your app already owns display-ready dates, organization data, and any brand visuals.
App-Owned Organization Data
Your app owns date formatting, organization links, logo/icon rendering, brand colors, localization, and profile data. Pass organization visuals through the scoped organization slot instead of relying on Nuxt Icon strings or inline brand colors.
Examples
Default
Work experience
A compact career-history list with app-owned organization visuals.
Product Engineer
Stackhacker UIDesigns and ships reusable Nuxt and shadcn-vue blocks for product teams.
Design Systems Lead
Northstar LabsLed a component platform across marketing, docs, and dashboard surfaces.
Independent Interface Designer
Freelance
Partnered with early-stage teams on brand systems and product launches.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional section title. |
description | string | — | Optional supporting section copy. |
items | WorkExperienceItem[] | null | [] | Work-history items supplied by your app. |
class | string | — | Additional CSS classes for the section. |
Types
interface WorkExperienceItem {
id?: string
dateLabel: string
role: string
organization: string
href?: string
target?: HTMLAnchorElement['target']
rel?: string
description?: string
}Slots
| Slot | Props | Description |
|---|---|---|
organization | { item: WorkExperienceItem, index: number } | Optional organization logo, icon, or external-link affordance. |