ComponentsJob Listing Component
Job Listing Component
Job listing component with animation when showing more information
Supabase
I/UX Designer / $85,000 - $95,000
San Francisco, CA | Full-time
Resend
UI Developer / $75,000 - $85,000
Remote | Contract
Turso
Graphic Designer / $60,000 - $70,000
Hybrid / New York, NY | Part-time
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/job-listing-component.json"
Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/job-listing-component-demo.json"
How to use
Demo.tsx
import React from "react"
import JobListingComponent, {
Job,
Resend,
Supabase,
Turso,
} from "@/components/smoothui/ui/JobListingComponent"
const jobs: Job[] = [
{
company: "Supabase",
title: "I/UX Designer",
logo: <Supabase />,
job_description:
"We are looking for a creative and driven UI/UX Designer to join our team. You will be responsible for designing and implementing user interfaces for our web and mobile applications.",
salary: "$85,000 - $95,000",
location: "San Francisco, CA",
remote: "No",
job_time: "Full-time",
},
{
company: "Resend",
title: "UI Developer",
logo: <Resend className="fill-black dark:fill-white" />,
job_description:
"Seeking an experienced UI Developer to work on our latest project. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, and a keen eye for detail.",
salary: "$75,000 - $85,000",
location: "Remote",
remote: "Yes",
job_time: "Contract",
},
{
company: "Turso",
title: "Graphic Designer",
logo: <Turso />,
job_description:
"We are in search of a talented Graphic Designer with UI experience to help create stunning visuals for our clients. This role involves collaboration with the design team and clients to deliver high-quality work.",
salary: "$60,000 - $70,000",
location: "New York, NY",
remote: "Hybrid",
job_time: "Part-time",
},
]
const JobListingComponentDemo = () => <JobListingComponent jobs={jobs} />
export default JobListingComponentDemo
Props
Prop | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
jobs | Job[] | Array of job objects to display in the listing. Object shape:
| |||||||||||||||||||||||||||
className? | string | Optional additional class names for the root container. | |||||||||||||||||||||||||||
onJobClick? | (job: Job) => void | Optional callback fired when a job is clicked. |