Accordions
Basic Accordions
Three plain accordion treatments that fit most pages. Bordered cards give each question its own white card with an 11px radius and…
Every set from our UI packs, each built three ways: plain CSS, Bootstrap 5 and Tailwind 4. Live demos, copyable code, accessibility checked, free to use.
Accordions
Accordion Open/Close Markers
Four ways to show whether an accordion panel is open, all on the same bordered-card layout.
Accordions
FAQ Accordion Layouts
Three page layouts for a frequently asked questions section, each built from the same bordered accordion cards.
Accordions
Exclusive Accordion
An accordion where opening one panel closes the others, shown next to an independent accordion so the difference is easy to try.
Accordions
Rich Accordion Panels
Accordions for content that is more than a line of text. Icon and subtitle puts a tinted icon tile and a two-line…
Accordions
Nested Accordion and Sidebar
Two accordion patterns for documentation and navigation. Nested places a second accordion inside an open panel: the inner items use a lighter…
Accordions
Dark Accordions
Three accordion treatments for dark interfaces such as dashboards, developer tools and dark-mode sites, with a cyan accent.
Accordions
Animated Accordions
Three ways to add motion to an accordion without a JavaScript animation library.
Alerts
Status Alerts
Twelve alerts in three weights, each in the four statuses every interface needs: info, success, warning and danger.
Alerts
Alerts with Actions and Lists
Alerts that ask the reader to do something. The error summary sits at the top of a pottery workshop booking form, says…
Alerts
Site-wide Banners
Three banners that speak to everyone on a site, each shown at the top or corner of a small coffee shop page.
Alerts
Docs Callouts
Callouts for documentation, shown inside a page of fictional docs for a static site builder called Quarry.
Alerts
Toast Positions and Variants
Four more toast patterns. The position picker is a segmented control of six radio buttons, top left to bottom right, that moves…
Alerts
Dark Alerts and Toasts
Alerts and toasts for dark dashboards and developer tools, where light-theme alerts turn into glaring blocks.
Alerts
Modern CSS Alerts and Toasts
Three patterns that usually need JavaScript, done with current HTML and CSS instead.
Breadcrumbs
Classic Breadcrumb Separators
The four separator styles most sites use, each on a white bar: a thin slash, a chevron, an arrow with indigo links,…
Breadcrumbs
Arrow Step Breadcrumbs
Three breadcrumbs where every level is a shape rather than a word between separators.
Breadcrumbs
Pill and Tag Breadcrumbs
Breadcrumbs made of chips, for interfaces that already use rounded controls.
Breadcrumbs
Breadcrumbs with Icons
Three ways to add icons without hurting the text trail. Home icon replaces the first level with a house glyph, the most…
Breadcrumbs
Collapsing Breadcrumbs
Three answers to the long path problem. Collapsed middle keeps the first level, the parent and the current page, and folds the…
Breadcrumbs
Page Header Breadcrumbs
Breadcrumbs as part of a complete page header, which is where most of them live.
Breadcrumbs
Dark Breadcrumbs
Breadcrumbs tuned for dark interfaces, where a light theme trail turns grey on grey.
Breadcrumbs
Modern CSS Breadcrumbs
Breadcrumb behaviour that usually needs a dropdown script, done with current CSS and HTML.
Carousels
Hero Image Carousels
Two hero carousels for the top of a page. Full-bleed hero with captions shows four travel slides with a photo, a dark…
Carousels
Product and Card Sliders
Sliders that show several cards at once. Product slider, four per view is a shop row with a small heading, a Shop…
Carousels
Testimonial Sliders
Two ways to rotate customer quotes. Centred quote with arrows and dots is a white card with five stars, an italic serif…
Carousels
Logo Marquees
Endless scrolling rows built with CSS alone. Single row with faded edges is the classic trusted-by strip: eight customer logos, each a…
Carousels
Thumbnail Gallery Carousels
Photo galleries with a large image and thumbnails to pick from.
Carousels
Autoplay Slides with Progress
Full-width slides that show how far along you are. Autoplay with story-style progress is an outdoor clothing campaign with four slides and…
Carousels
Dark Carousels
Carousels for dark interfaces such as streaming, music and photography sites.
Carousels
No-JavaScript Carousels
Three carousels that need no JavaScript at all, built on newer CSS.
Checkboxes & Radios
Basic Checkboxes
Four custom checkbox shapes that cover most forms: a square box that draws its tick, a rounded square, a circular checkbox and…
Checkboxes & Radios
Checkbox Cards
Checkboxes where the whole card is the click target. The set has bordered option cards with a title and a one-line description,…
Checkboxes & Radios
Checkbox Lists
Layouts for longer lists of checkboxes. A bordered list stacks options as full-width rows divided by hairlines, with a hover tint, for…
Checkboxes & Radios
Basic Radio Buttons
Four radio button treatments for one-of-many choices. The classic dot keeps a light ring and scales a blue dot into it when…
Checkboxes & Radios
Radio Button Cards
One-of-many choices presented as cards. The plan picker shows three pricing cards with a name, a price and a line of detail;…
Checkboxes & Radios
Dark Checkboxes & Radios
Checkboxes and radio buttons built for dark surfaces, where a light-theme control loses its border and reads as a smudge.
Checkboxes & Radios
Custom Radio & Checkbox Marks
Choice controls that carry some character. A heart toggle is a checkbox whose emoji heart is greyed out until the item is…
Coming Soon Pages
Minimal Coming Soon Page
A single-screen coming soon page that says one thing and asks for one thing: a serif headline, two lines of context and…
Coming Soon Pages
Countdown Launch Page
A launch page built around a live countdown: four white tiles for days, hours, minutes and seconds on a soft indigo and…
Coming Soon Pages
Maintenance Page with Status
A scheduled maintenance page that answers the three questions users arrive with: what is happening, when it will be back, and what…
Coming Soon Pages
Under Construction Page
A bold under construction page on safety yellow with hazard tape along the top and bottom edges and a faint blueprint grid.
Coming Soon Pages
Product Launch Page
A pre-order style launch page for a physical product, with a hero and a row of feature teasers.
Coming Soon Pages
Split Coming Soon Page
A two-column coming soon page with the message on one side and a full-height image on the other.
Coming Soon Pages
App Pre-Launch Page
A pre-launch page for a mobile app, with a phone mock-up beside the pitch.
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.
Dropdown Menus
Action Dropdown Menus
Three action menus of the kind every app needs, each opened from a menu button.
Dropdown Menus
Account Dropdown Menus
Three account menus for the top right corner of an app. Avatar menu with a profile header sits in a small app…
Dropdown Menus
Nested Dropdown Submenus
Dropdowns with submenus that work with a mouse and with the keyboard.
Dropdown Menus
Navbar Dropdown Menus
Dropdowns inside a site navbar, built for navigation rather than commands.
Dropdown Menus
Overflow and Context Menus
Menus that belong to a single item on the page. Overflow menus on list rows is a team members list where each…
Dropdown Menus
Dark Dropdown Menus
Three dropdowns for dark interfaces. Command menu with shortcuts is a Deploy button with a gradient border and glow, whose menu starts…
Dropdown Menus
Modern CSS Dropdown Menus
Dropdowns with no JavaScript at all, built on the popover attribute and CSS anchor positioning.
File Uploads
Styled File Inputs
Four ways to make the plain file input look like the rest of a form without losing what the browser does for…
File Uploads
Drag and Drop Dropzones
Two drag-and-drop file upload zones built around a real file input.
File Uploads
Image Upload with Previews
Image uploaders that show the picture straight away. Photo grid with thumbnails is built for listings and galleries: chosen photos appear as…
File Uploads
Upload Queue with Progress
Upload queues that show every file's progress and what went wrong.
File Uploads
Inline Attachments
Attachment controls for places where uploading is secondary to writing.
File Uploads
Dark File Uploads
File upload components for dark interfaces such as developer tools, dashboards and media apps.
File Uploads
CSS-only File Upload States
File upload states that usually need JavaScript, done with HTML validation and modern selectors.
Form Wizards
Horizontal Stepper Wizards
Two multi-step forms with the stepper across the top, the pattern most wizards start from.
Form Wizards
Vertical Stepper Form Wizards
Two vertical multi-step forms that keep every step in view. Steps expand in place is a Material-style stepper where the ordered list…
Form Wizards
Onboarding Wizards
Two first-run onboarding flows where progress is shown as a bar rather than numbered steps.
Form Wizards
Signup Wizards
Two sign-up flows for a fictional accounting app, built around per-step validation.
Form Wizards
Stepper Styles
Four compact stepper designs, each shown as a small working wizard with Back and Next buttons.
Form Wizards
Dark Form Wizards
Two multi-step forms for dark interfaces, with a cyan glow for the current step and lime for finished ones.
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…
Modals
Basic Modals
Five everyday modal dialogs for an invoicing app, grouped by what changes between them.
Modals
Confirmation Dialogs
Three confirmation modals from a code-hosting app, for the moments when an action needs a second look or a clear result.
Modals
Form Modals
Form Modals is three dialogs for a note-taking app called Fieldnote, each built around a real form.
Modals
Multi-Step & Onboarding Modals
Two modals that walk the reader through more than one screen, for a team planning app called Tandem.
Modals
Dark Modals
Three dark-theme dialogs for developer tools and SaaS dashboards: near-black panels with a hairline border, a soft top highlight, a cyan focus…
Modals
Modern CSS Modals
Three modal dialogs that open, close and animate with HTML and CSS alone, for a ceramics studio's workspace.
Multiselects
Checkbox Multiselect Dropdowns
The multiselect dropdown most filter panels need: a closed field that summarises the choice and opens a list of checkboxes.
Multiselects
Tag Multiselect Inputs
Multiselects where each pick becomes a removable chip inside the field, next to a text input that filters the suggestions as you…
Multiselects
Searchable Select Comboboxes
Single-choice selects you can type into, for lists too long to scroll.
Multiselects
Grouped Selects with Avatars
Single selects whose options need more than a line of text. Assignee, grouped by team, with avatars sorts people into Suggested, Design…
Multiselects
Customizable Select Menus
Rich dropdowns that are still a plain select element, built on the new customizable select.
Multiselects
Dark Multiselect Dropdowns
Selects for dark dashboards and developer tools, where light-theme controls lose their borders.
Multiselects
CSS-only Multiselects
Multiselects that run on HTML and CSS alone, with no script at all.
Pagination
Classic Numbered Pagination
The standard numbered pagination control in four weights. Plain shows bare page numbers with a filled blue current page and a light…
Pagination
Minimal Pagination Counters
Three compact alternatives for when a full row of page numbers is too much, either because there are hundreds of pages or…
Pagination
Pill Pagination
Fully rounded pagination for softer, friendlier interfaces. Filled pills gives every page a light grey circle and marks the current page with…
Pagination
Segmented Pagination Bar
Pagination that reads as one joined object rather than a row of separate buttons.
Pagination
Load More Buttons
The alternative to numbered pages for feeds, product grids and comment threads, where readers keep scrolling rather than jumping to a page.
Pagination
Dark Pagination
Numbered pagination built for dark interfaces such as dashboards, developer tools and media sites.
Progress Bars
Basic Progress Bars
Four everyday progress bar layouts that cover most settings pages, course dashboards and task lists.
Progress Bars
Animated Progress Bars
Four progress bars with texture and motion, for work that takes a while.
Progress Bars
Stacked Progress Bars
Bars that show more than one value, or show a value as a count of blocks.
Progress Bars
Skill & Stat Progress Bars
Progress bars for profile pages, portfolios and dashboards. Skill bars on a profile puts a designer's name and role above four thin…
Progress Bars
Circular Progress Bars
Round progress indicators built two ways. Conic-gradient rings are three 92 pixel rings for storage, sprint tasks and ad budget: a conic-gradient…
Progress Bars
Upload Progress Bars
File transfer progress for upload forms, media libraries and download managers.
Progress Bars
Dark Progress Bars
Progress bars for dark dashboards, developer tools, games and night-mode apps, where a light-theme bar looks flat.
Progress Bars
Modern CSS Progress Bars
Three progress indicators that usually take JavaScript, done in CSS.
Range Sliders
Basic Range Sliders
Three everyday range sliders that cover most settings pages and filters.
Range Sliders
Range Sliders with Tick Marks
Three sliders that show where the stops are. Tick marks and labels puts a short line and a label under every step…
Range Sliders
Price Range Sliders
Two-thumb range sliders for filters. Price range with min and max boxes is the shop and booking pattern: a nightly price from…
Range Sliders
Volume and Brightness Sliders
Sliders for media players, smart home panels and system settings, each with inline SVG icons.
Range Sliders
Vertical Range Sliders
Upright sliders for audio and hardware style interfaces. Five-band equaliser runs five sliders from minus 12 to plus 12 dB; the fill…
Range Sliders
Step Range Sliders
Sliders whose positions stand for words or plans rather than raw numbers.
Range Sliders
Dark Range Sliders
Four sliders drawn for dark interfaces, where a light theme slider loses its track against the background.
Range Sliders
CSS-only Range Sliders
Range sliders whose fill, number, bubble and colour come from CSS rather than JavaScript.
Search Bars
Classic Search Inputs
Five search inputs that cover most sites: a field with the magnifier on the left, a field with an icon submit button…
Search Bars
Header Search Bars
Three search bars built into a site header, where search has to share a row with a logo, navigation and account controls.
Search Bars
Autocomplete Search Boxes
Two ways to suggest results while someone types. The native datalist version connects a search input to a datalist of fifteen European…
Search Bars
Hero Search Sections
Big search sections for the top of a landing page, where the search box is the main action.
Search Bars
Search Filter Bars
Toolbars that sit above a list of results and combine search with the controls that shape it.
Search Bars
Dark Search Bars
Search bars for dark interfaces, where a light-theme field becomes a grey smudge.
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
Classic App Sidebars
Three versions of the sidebar most dashboards start from, each shown in a small app frame.
Sidebars
Collapsible Icon Rail Sidebars
Three ways to give the content more room without losing the navigation.
Sidebars
Nested Sidebar Menus
Multi-level sidebar menus built on the native details and summary elements, so they open and close without any JavaScript.
Sidebars
Off-Canvas Sidebars
Sidebars that leave the screen on small devices and slide back in when asked.
Sidebars
Profile & Search Sidebars
Two fuller sidebars that carry more than links. The workspace sidebar starts with a switcher that opens a menu of three workspaces…
Sidebars
Docs Sidebars with Scroll-Spy
Sidebars for documentation and long guides, where the navigation follows the reader.
Sidebars
Dark Sidebars
Three sidebars for dark interfaces, where light-theme greys turn into mud and focus rings vanish.
Sidebars
Modern CSS Sidebars
Two sidebars that use current CSS and HTML for behaviour that usually needs JavaScript.
Toggles
Classic Toggle Switches
Five switch shapes that cover most settings screens: a rounded pill, a square switch with 6px corners, a compact 38 by 22…
Toggles
Labelled Toggle Switches
Switches that say what state they are in, for places where a coloured track alone is not clear enough.
Toggles
Day and Night Toggle Switches
Theme switches for a light and dark mode setting. Sun to moon is a 76 pixel track with a blue sky: when…
Toggles
Soft Neumorphic Toggles
Switches drawn with paired light and dark shadows instead of borders, in the soft or neumorphic style, on a matched #e6e9ef grey…
Toggles
Dark Mode Toggle Switches
Switches designed for dark interfaces, where a switch made for a light theme loses its edges.
Toggles
Playful Toggle Switches
Switches with some personality, for games, onboarding flows, kids products and marketing pages.
No snippets match that search. Search the whole site instead