Alerts
Modern CSS Alerts and Toasts
Three patterns that usually need JavaScript, done with current HTML and CSS instead.
22 sets, each in CSS, Bootstrap 5 and Tailwind 4
@starting-style gives an element a style to transition from on its first render, so dialogs, popovers, toasts and dropdowns can fade or slide in with CSS alone, even straight out of display: none when paired with transition-behavior: allow-discrete.
Every component here uses it in production-ready code. Browsers without support simply show the element without the entry animation, and all motion switches off under prefers-reduced-motion.
Breadcrumbs
Modern CSS Breadcrumbs
Breadcrumb behaviour that usually needs a dropdown script, done with current CSS and HTML.
Shopping Carts
Slide-out Cart Drawers
Two cart panels that open over the page instead of sending people to a separate cart.
Chat UI
Modern CSS Chat UI
A chat that does with CSS what most chat widgets do with JavaScript, shown in a wide and a narrow slot.
Coming Soon Pages
Dark Neon Coming Soon Page
A dark synthwave coming soon page for an online radio station, and the modern-CSS set in this pack.
Drag and Drop
Native HTML Drag and Drop
The no-library route, built on the browser's own HTML Drag and Drop API, with notes on how it works.
Dropdown Menus
Modern CSS Dropdown Menus
Dropdowns with no JavaScript at all, built on the popover attribute and CSS anchor positioning.
Form Wizards
CSS-only Form Wizards
Two multi-step forms that run without any JavaScript. Accordion steps, completion from :has(), books a lakeside cabin in three steps built from…
Galleries
Filterable CSS Image Galleries
Two gallery features that usually need JavaScript, done in CSS.
Menus
Bottom Sheet Action Menu
A mobile-style action sheet that slides up from the bottom of the screen over a dimmed page.
Modals
Modern CSS Modals
Three modal dialogs that open, close and animate with HTML and CSS alone, for a ceramics studio's workspace.
Multiselects
Customizable Select Menus
Rich dropdowns that are still a plain select element, built on the new customizable select.
Newsletter Forms
Modern CSS Newsletter Forms
Four newsletter forms that use current CSS for what usually needs JavaScript.
Notifications
Modern CSS Notifications
A bell panel and two toasts that work without any component JavaScript.
Product Cards
Modern CSS Product Cards
Product cards that do with CSS what is usually done with JavaScript.
Search Bars
Command Palette Search
A command palette in the style of modern web apps, built with current platform features instead of a modal library.
Sidebars
Off-Canvas Sidebars
Sidebars that leave the screen on small devices and slide back in when asked.
Sidebars
Modern CSS Sidebars
Two sidebars that use current CSS and HTML for behaviour that usually needs JavaScript.
Social Media Icons
Modern CSS Social Share Icons
Share and social icon patterns that usually need a JavaScript library, built with current CSS instead.
Tooltips
Rich Tooltips and Popovers
Tooltips that carry more than a word, and a popover for content you can act on.
Tooltips
Modern CSS Tooltips
Tooltips built on the newest platform features instead of a positioning library.
Video Players
Modern CSS Video Players
One player markup that does in CSS what most player libraries do in JavaScript, shown in a wide container, a 320 pixel…