Job Listing Component
Animated React job listing cards with filter tags, smooth entrance animations, and accessible focus states for career pages.
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.