Job Listing Component
Animated React job listing cards with filter tags, smooth entrance animations, and accessible focus states for career pages.
Resend
Senior Frontend Engineer / $120k - $180k
Hybrid / San Francisco | Full-time
We're looking for a senior frontend engineer to help us build the future of email infrastructure. You'll work on our React-based dashboard and help scale our platform.
Turso
Backend Developer / $100k - $150k
Remote | Full-time
Join our team to build the next generation of edge database technology. You'll work with Rust and help optimize our distributed database system.
Supabase
Developer Advocate / $90k - $130k
Remote | Full-time
Help developers around the world discover and adopt Supabase. You'll create content, speak at conferences, and build community around our open-source platform.
Installation
npx smoothui-cli add job-listing-componentFeatures
- Animated card entrance and hover
- Filter/tags friendly layout
- Accessible focus states
- Responsive grid/list views
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
Escape | Closes the expanded job detail overlay |
Screen Reader
- Job cards use layout animations via
layoutIdfor smooth shared element transitions. - The expanded detail view uses a click-outside handler to dismiss, and
Escapekey support for keyboard users. - SVG logo icons (Resend, Turso, Supabase) include
titleelements for screen reader identification.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, layout animations and layoutId transitions are disabled, backdrop opacity animations are instant, and tap scale effects are removed.
Props
Interactive Image Selector
Animated React image selector grid with toggle selection, animated ring effects, keyboard support, and custom caption renderers.
Number Flow
Smooth animated number transitions for React dashboards, counters, and KPIs. Features rolling digit animations, locale formatting, and customizable easing.