A curated collection of production-ready, vanilla JavaScript UI components. Each component is self-contained, accessible, and framework-free — just open the HTML file or copy the code into your project.
Originally created for iCodeThis challenges, these components evolved into reusable, professional-grade UI elements suitable for real-world projects.
| Component | Category | Description |
|---|---|---|
| card-hover-effect | Effects | Pointer-following hover animation for interactive cards |
| chip-navigation | Navigation | Horizontal scrolling chip tabs linked to page sections with scroll sync |
| content-toggle | Controls | Multi-panel toggle with keyboard navigation and fade transitions |
| feature-carousel | Carousels | Pointer-based drag carousel with synced cards, dots, and mobile card swiping |
| logo-carousel | Carousels | Continuously looping logo strip that slows on hover |
| mobile-menu-toggle | Navigation | Hamburger button with slide-in navigation panel |
| password-field | Forms | Password input with visibility toggle and stay-signed-in switch |
- No Dependencies – Pure vanilla JavaScript/CSS/HTML, no build tools or frameworks required
- Self-Contained – Each component is independent and can be used standalone
- Accessible – ARIA attributes, keyboard navigation, and semantic HTML
- Responsive – Modern CSS techniques (flexbox, grid, clamp) for all screen sizes
- Performance-Conscious – Uses transforms, requestAnimationFrame, and passive listeners
- Production-Ready – Respects user preferences (prefers-reduced-motion), includes error handling
These assets are handy for rapidly prototyping UI elements during the challenges:
- Pravatar – placeholder avatar images.
- Picsum – royalty-free placeholder photography.
- SVGL – curated SVG icon library.
- Tabler Icons – versatile open-source SVG icon set.