Back
Work Experience
Professional work experience timeline component with support for multiple companies, positions, employment periods, skills tags, and expandable/collapsible sections.
Next.jsUI Components
What's Included
Multiple Companies with Logos
Multiple Positions per Company
Employment Period & Type
Skills Tags per Position
Expandable/Collapsible Sections
Current Employer Badge
Responsive Timeline Layout
Installation
terminal
$ pnpm dlx shadcn@latest add https://jb.desishub.com/r/work-experience.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the work experience component.
pnpm dlx shadcn@latest add https://jb.desishub.com/r/work-experience.json2
Install dependencies
Add the required Tailwind typography plugin.
pnpm add @tailwindcss/typography3
Configure your experience data
Define your work experience entries with companies, positions, and skills.
const experiences = [
{
company: "Acme Corp",
logo: "/logos/acme.png",
positions: [
{
title: "Senior Developer",
period: "2023 - Present",
type: "Full-time",
skills: ["React", "TypeScript", "Node.js"],
description: "Leading frontend development..."
}
]
}
]4
Use the component
Import and render the work experience timeline.
import { WorkExperience } from '@/components/work-experience'
export default function ResumePage() {
return <WorkExperience experiences={experiences} />
}Free
Open source component
Free to use · MIT License
CategoryUI Components
PlatformsNext.js
Features7
Resources