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.
Buttons
Gradient Buttons
Six call-to-action buttons built on CSS gradients. Four are solid two-colour fills: indigo to purple, rose to burnt orange, teal to emerald…
Buttons
3D Pressable Buttons
Chunky buttons that look like physical keys. A solid, unblurred box-shadow in a darker shade of the face colour draws a 6…
Buttons
Ghost Outline Buttons
Five transparent outline buttons for dark backgrounds, each with a different way of filling in on hover.
Buttons
Icon Buttons and Like Toggle
Five buttons that pair or replace a label with an inline SVG icon.
Buttons
Loading Spinner Buttons
Two submit-style buttons that show work in progress and then success.
Buttons
Neon Glow Buttons
Uppercase outline buttons for dark, gaming and nightlife designs, styled like neon tubes.
Buttons
Neobrutalist Buttons
Flat, loud buttons in the neobrutalist style: a 3 pixel black border, heavy 900 weight labels, bright flat fills and a hard…
Buttons
Social Login Buttons
A stack of full-width sign-in buttons and a row of round share buttons.
Buttons
Pill Buttons
Five fully rounded buttons for modern product interfaces. Solid pill is indigo with a darker hover and a tinted shadow.
Buttons
Shine and Sweep Buttons
Four solid buttons for dark pages, each with a different hover sweep.
Buttons
Segmented Button Controls
Three segmented controls for choosing one option from a short list: a light Billing period control with Monthly, Yearly and Lifetime, a…
Buttons
Split Action Buttons
Two split buttons that pair a main action with a short list of related ones.
Buttons
Button Size Scale
A five-step button size scale, extra small, small, default, large and extra large, plus square icon-only buttons in four matching sizes and…
Buttons
Button States Reference
One primary button drawn in each of its seven states, side by side with a caption: rest, hover, focus visible, active, disabled,…
Buttons
State-Change Buttons
Three buttons that confirm what they did by changing their label and colour.
Buttons
Animated Border Buttons
Four dark buttons whose border is the effect. Conic border rotates an indigo, cyan and rose conic gradient behind a 2 pixel…
Buttons
Text and Link Buttons
Five buttons with no fill, where the text and its underline do the work.
Buttons
Button Groups and Toolbars
Three ways to join buttons into one control. An attached horizontal group picks a view density, Comfortable, Cosy or Compact.
Buttons
Marketing CTA Buttons
Call-to-action buttons for landing and pricing pages, in the combinations they are usually used.
Buttons
Frosted Glass Buttons
Four frosted glass buttons shown over a colourful ground of amber, pink and blue light on deep navy.
Buttons
Expanding Icon Buttons
Four round 48 pixel icon buttons that widen into pills to reveal their label on hover or keyboard focus: New project in…
Calendars
Month Grid Calendar with Events
A full-width month calendar for dashboards, booking back offices and team planners.
Calendars
Mini Picker Calendar
A compact 300 pixel calendar card for sidebars, booking widgets and settings pages where someone needs to pick one date.
Calendars
Dark Event Calendar
A dark month calendar for status pages, release dashboards and night-mode apps.
Calendars
Week Schedule Calendar
A Monday-to-Friday time grid for team schedules, class timetables and room planners.
Calendars
Agenda List Calendar
A vertical agenda for upcoming events, suited to newsletters, editorial calendars, sidebars and mobile screens where a month grid would be too…
Calendars
Year Overview Calendar
A dark, full-year planner that shows all twelve months at once, useful for holiday planning, content calendars, academic years and annual reports.
Calendars
Booking Range Calendar
A date range picker for hotel stays, rentals, equipment hire and any booking that has a check-in and a check-out.
Calendars
Glass Widget Calendar
A frosted-glass calendar widget for hero sections, portfolio sites, music and event pages, or a personal dashboard laid over a colourful background.
Calendars
Printable Planner Calendar
A monthly planner sheet that looks like paper on screen and prints cleanly, for printable downloads, teacher resources, habit trackers and office…
Calendars
Calendar with Events Sidebar
A month calendar and an events list combined in one panel, for dashboards, community sites, studios and course pages that want both…
Calendars
Date Picker Input
A form field that opens a calendar, for booking forms, travel search, checkout delivery dates and admin filters.
Calendars
Appointment Time Slot Picker
A booking card for a 30-minute call: a horizontal strip of six days, a grid of ten time slots and a time…
Calendars
Activity Heatmap Calendar
A contribution-style heatmap: a year of days laid out as 52 week columns of seven cells, each shaded in one of five…
Calendars
Day View Calendar with Now Line
A single-day calendar from 08:00 to 19:00 with hour rows, four events and a red line marking the current time.
Calendars
Quarter View Calendar
Three months side by side, October to December 2026, with today ringed and a closure range from 24 November to 2 December…
Calendars
Resource Scheduling Calendar
A resource view for one day: four meeting rooms down the side, the hours from 09:00 to 19:00 across the top and…
Calendars
Calendar with Day Detail Panel
A month grid for September 2026 next to a detail panel. Three days have events and are outlined as selectable; choosing one…
Calendars
Compact Dashboard Calendar
A 290 pixel calendar card for dashboards and sidebars: a month header with previous and next buttons, a small month grid with…
Calendars
Weekly Availability Picker
A weekly availability grid where people tick the hours they are free: seven days across, six one-hour slots down from 09:00, a…
Calendars
Event Countdown Card
An event card with a large date header, a live countdown in days, hours, minutes and seconds, a short description, time, venue…
Calendars
Recurring Event Preview
A recurrence picker with a live preview. Three options, every weekday, every Tuesday and monthly on the 14th, sit beside a September…
Calendars
Mobile Agenda List
A phone-sized agenda: a sticky title bar with the month and event count, then one sticky heading per day and the events…
Cards
Profile Cards with Stats
Two team or creator profile cards: a round gradient avatar with the person's initials inside a thin ring, their name and role,…
Cards
Dark Blog Post Cards
Blog post cards for a dark page: a gradient cover with a frosted category chip in the corner, the post title, a…
Cards
Product Cards with Wishlist
Shop product cards with a soft gradient image area, a New or sale badge, a round wishlist heart, the category, product name,…
Cards
Three-Tier Pricing Cards
A three-plan pricing row with Starter, Pro and Team cards. Each card has the plan name, a large monthly price, a one-line…
Cards
3D Flip Cards
Two feature cards that turn over in 3D. The front is a gradient panel with an emoji icon, a heading, a short…
Cards
Glassmorphism Usage Cards
Frosted-glass cards for account usage: a storage card at 72 percent and a bandwidth card at 41 percent.
Cards
KPI Stat Cards with Sparklines
Three dashboard KPI cards: Revenue, Active users and Conversion rate.
Cards
Testimonial Cards with Ratings
Customer quote cards on a warm cream page. Each card has a five-star rating, the quotation, and a footer with a gradient…
Cards
Hover Reveal Overlay Cards
Tall story cards with full-bleed artwork and text laid over a dark gradient veil at the bottom: a frosted category tag, the…
Cards
Horizontal Media Cards
Wide cards with a media panel on the left and text on the right, stacked in a column: a podcast episode and…
Cards
Event Card with Date Block
An event listing card for workshops, meetups and webinars. A calendar-style date block with an indigo month strip sits beside a type…
Cards
Notification Cards
Three notification cards in the info, success and warning severities, stacked the way they would sit in a notification panel.
Cards
File Upload Status Cards
Three compact file cards that cover the life of an upload: in progress, uploaded and failed.
Cards
Course Progress Card
A single online-course card for a learner dashboard. A gradient cover carries an Intermediate level pill, and below it sit the course…
Cards
Job Listing Card
A job board card for one opening: a company logo tile, the job title and company line, a Save bookmark button, a…
Cards
Weather Forecast Card
A weather widget card on a deep blue gradient with a soft light spot in the top corner.
Cards
Music Player Card
A dark now-playing card for a music or podcast player: gradient cover art with a Now playing tag, the track title, the…
Cards
Invoice Receipt Card
A receipt card for billing pages and order confirmations. The header shows the invoice number, the issue date and the customer, with…
Cards
Expandable Details Cards
Two cards that expand in place to show more detail, one open and one closed, as used for plan comparisons, FAQs and…
Cards
Skeleton Loading Card
A blog post card shown twice: once as a skeleton while it loads and once with its content.
Cards
Bento Grid Cards
A bento grid of five cards of different sizes for landing pages, product updates and dashboards.
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…
Clocks
Analogue Clocks
Three analogue clock faces drawn entirely in CSS and set from the system time: a classic face with a dark rim and…
Clocks
Flip Clock
A split-flap style clock in six dark digit cards, grouped as hours, minutes and seconds with colon separators.
Clocks
Countdown Timers
Two countdowns to a launch moment. The boxed countdown shows days, hours, minutes and seconds in four white tiles with uppercase unit…
Clocks
World Clocks
A grid of city clocks for a distributed team: London, New York, San Francisco, Riga, Tokyo and Sydney, each on its own…
Clocks
Stopwatch with Laps
A stopwatch card with a large tenths-of-a-second readout, a dark Start button that becomes Stop while running, Lap and Reset buttons in…
Clocks
Neon Clocks
Three clocks designed for dark interfaces. The neon readout is a cyan 24-hour time with a two-layer text-shadow glow, for a hero,…
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.
Footers
Four-Column Footer
A classic white site footer in two rows. The top row holds the brand, a gradient logo mark with a two-line blurb,…
Footers
Minimal One-Line Footer
The smallest useful footer: a single row with the copyright and a note on the left and four short links on the…
Footers
Dark SaaS Footer
A near-black footer for software products. On the left sits the brand with a one-line pitch and a green pill link reading…
Footers
Call-to-Action Footer
A conversion footer that ends the page with one last push. A dark panel with a rounded top holds a huge two-tone…
Footers
Newsletter Signup Footer
A newsletter-first footer in warm paper tones. The top band pairs a serif headline, One good email, every Sunday., and a short…
Footers
Sitemap Mega Footer
A full sitemap footer for online shops and larger sites. Five equal columns, Shop, Help, Company, Account and Resources, each hold five…
Footers
Gradient Studio Footer
A bold footer for creative studios and agencies. A diagonal gradient runs from indigo through violet to pink, with a soft blurred…
Footers
Responsive Accordion Footer
A dark footer whose link columns turn into accordions on phones.
Footers
App Download Footer
A footer that sends visitors to your mobile app. The left side has a short pitch, Take the board with you, a…
Footers
Contact Footer with Hours
A contact-led footer for restaurants, shops, studios and any place people visit in person.
Footers
Shop Footer with Trust Row
A footer for an online shop that does more than list links. It opens with a tinted trust row of four promises,…
Footers
Locale Switcher Footer
A dark footer for a product sold in several countries. The top row pairs the brand and a one-line description with three…
Footers
Wave Divider Footer
A deep violet footer that starts with a soft wave instead of a straight edge.
Footers
Neobrutalist Footer
A loud yellow footer in the neobrutalist style: thick black borders, square corners and solid offset shadows with no blur anywhere.
Footers
Big-Type Portfolio Footer
A black footer for a studio or freelancer where the email address is the design.
Footers
Status and Changelog Footer
A dark footer for a developer product, the kind you see on API, CLI and hosting sites.
Footers
Compliance Footer
A light footer for a bank, lender, insurer or any regulated business that has to show small print on every page.
Footers
Two-Tone Split Footer
A footer in two bands, so the newsletter signup is not squeezed into a column.
Footers
Scrolling Marquee Footer
A dark footer topped by a band of short slogans that scrolls sideways without end, separated by small indigo diamonds.
Footers
Sticky Cookie Bar Footer
A light slate footer paired with a dark cookie bar pinned to the bottom of the screen.
Footers
Local Directory Footer
A wide, link-heavy footer for a local business directory, marketplace or listings site.
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…
Forms
Text Input Styles
Four treatments for a single-line text field, each with a visible label above the input.
Forms
Floating Label Inputs
Three fields where the label starts inside the input, like a placeholder, and rises to the top edge when the field is…
Forms
Form Validation States
The five field states a real form needs, each with its message in words so the state never relies on colour alone.
Forms
Input Groups
Fields joined to something else, with the borders merged so each group reads as one control.
Forms
Select and Textarea Styles
Styles for the two controls that look most out of place by default.
Forms
Search, Range and File Inputs
Four fields that are more than a line of text. Search is a pill-shaped type=search input with a magnifier drawn from two…
Forms
Form Layouts
Three complete forms rather than single fields. The contact form sits in a white card with a heading and a response-time note;…
Forms
Dark Form Inputs
Form fields tuned for dark interfaces such as developer dashboards and admin panels, with a cyan accent.
Galleries
Responsive Image Grid Galleries
Three photo grids for the most common gallery job: showing a set of pictures in tidy rows.
Galleries
Masonry Image Galleries
Two masonry layouts for photos that do not share one shape. Column masonry puts twelve forest and coast photographs of different heights…
Galleries
No-JS Thumbnail Image Viewers
Two image viewers that switch the main photo from a row of thumbnails without any JavaScript.
Galleries
Image Slideshows
Two slideshows that show one photo at a time and never play on their own.
Galleries
Image Hover Effect Galleries
Six photo tiles from a garden and pottery studio, each showing one hover effect you can lift into any gallery.
Galleries
Dark Photo Portfolio Galleries
Two dark layouts for a photographer's portfolio, where a black ground lets night and landscape photos glow.
Galleries
Filterable CSS Image Galleries
Two gallery features that usually need JavaScript, done in CSS.
Headers
SaaS Header with Dropdown Menu
The classic software-product header: a gradient logo mark on the left, a row of links in the middle and Sign in plus…
Headers
Transparent Scroll Header
A fixed header that sits transparent over a full-height hero, with white text on the dark teal gradient, and turns into a…
Headers
Mega Menu Header
A product header whose Products item opens a full-width mega menu: three labelled columns of links (Build, Ship and Learn), each link…
Headers
Centered Logo Split Nav Header
A department-store masthead: a dark message strip on top, then a serif logotype, Meridian & Co.
Headers
Dark App Header with Search
The header a dashboard or web app ships with, in a dark theme: a gradient logo mark, product navigation with a highlighted…
Headers
Double-Deck Service Header
A two-level header for service businesses. A navy utility strip carries opening hours, a click-to-call phone number and three secondary links (Service
Headers
Hamburger Drawer Header
A minimal sticky header, a wordmark on the left and a hamburger button on the right at every screen size, that opens…
Headers
Glass Pill Sticky Header
A header that floats as a rounded glass pill rather than spanning the page.
Headers
Ecommerce Store Header
A storefront header in two rows. The top row has the red martkt wordmark, a wide search form with a red outlined…
Headers
Neobrutalist Card Header
A loud, playful header drawn as a floating white card with a 3px black border, rounded corners and a hard 7px offset…
Headers
Announcement Bar Header
A dark announcement bar with one line of news and a link, sitting above a sticky white header with a logo, four…
Headers
Split Navigation Header
A header with the brand mark in the middle and the navigation split either side of it: Collections and Journal on the…
Headers
Minimal Text Header
The lightest header in the pack: a name on the left and three text links on the right, with no bar, border…
Headers
Dual CTA Header
A SaaS header with two actions of clearly different weight: a quiet "Sign in" text link beside a filled indigo "Start free"…
Headers
Vertical Side Header
A dark header that runs down the left edge of the page instead of across the top: a 224px column holding the…
Headers
Shrinking Sticky Header
A tall 104px header that condenses to 62px once the page has scrolled 40px, with the logo shrinking from 1.5rem to 1.08rem…
Headers
Header with Breadcrumbs
A two-row header for documentation and deep content: a top bar with the logo and three links, and a tinted row underneath…
Headers
Header with Language Switcher
A sticky business header with a language and region switcher next to the call to action: logo and three links on the…
Headers
Application Header
The compact 58px bar a signed-in product needs: a logo square, a workspace switcher ("Northwind · Production"), three section tabs (Overview, Deployme
Headers
Editorial Masthead
A newspaper-style masthead for a magazine or blog: a thin dateline strip with the date and the edition, a large centred serif…
Headers
Header with Reading Progress
A sticky blog header with a 3px indigo bar along its bottom edge that fills from left to right as the reader…
Login Forms
Split-Screen Login Form
A full-page sign-in screen in two halves. On the left, an indigo-to-violet gradient panel carries the product name, a headline, a short…
Login Forms
Floating Label Login Card
A small white card centred on a light grey page: a dark monogram tile, a Sign in heading, an email field and…
Login Forms
Glassmorphism Login Form
A dark sign-in screen with a frosted glass card floating over three large blurred colour blobs in violet, sky blue and pink.
Login Forms
Social Login Form
A sign-in card that puts third-party accounts first. Three full-width outline buttons read Continue with Google, Continue with GitHub and Continue wit
Login Forms
Animated Gradient Border Login
A warm cream sign-in card wrapped in a 2 pixel border that cycles through orange, pink and violet.
Login Forms
Magic Link Login Form
A passwordless sign-in card in two steps. The first step shows a wand icon, a heading, a line explaining that a one-time…
Login Forms
Neobrutalist Login Form
A loud, flat sign-in card on a yellow dotted background: 3 pixel black borders, hard offset shadows with no blur, a violet…
Login Forms
SaaS Login Page with SSO
A two-column sign-in page for business software. The left column holds the logo, a heading, a work email field, a password field…
Login Forms
Terminal-Style Login Form
A sign-in window styled like a command-line session. A title bar with red, amber and green dots reads auth@prod: ~/login; below it,…
Login Forms
Two-Factor Code Form
The second step of a sign-in that uses an authenticator app. A shield icon and a short line tell the person which…
Login Forms
Passkey Sign-In Form
A sign-in screen that leads with passkeys and keeps a password route one step away.
Login Forms
Identifier-First Login Form
A two-panel login that asks for the email first and the password second, the pattern used when some accounts sign in through…
Login Forms
Enterprise SSO Login Form
A sign-in screen for team plans that authenticate through a company identity provider.
Login Forms
Phone Number Login Form
A passwordless login that sends a one-time code by text message.
Login Forms
Session Lock Screen
A lock screen for a known account that has been idle, the kind shown by admin panels and internal tools after a…
Login Forms
Password Reset Request Form
The forgotten-password screen and the confirmation that follows it.
Login Forms
Login Form with Error States
A sign-in card that shows the three errors a login form has to handle.
Login Forms
Background Image Login Form
A login card floating over a full-bleed background, for brands that want a photograph or illustration on the sign-in page.
Login Forms
Session Expired Login Modal
A sign-in dialog that opens over the application when a session expires, so people can re-authenticate without losing their place.
Login Forms
Theme-Aware Login Form
A login card with light and dark themes that follows the operating system until the person picks one.
Menus
Account Navigation Dropdown
An account menu for the top right corner of an app: a trigger button with initials in a gradient avatar, and a…
Menus
Collapsible Admin Sidebar Menu
A dark 250 pixel sidebar for dashboards and admin panels. It has a logo row, two labelled groups (Main and Workspace), an…
Menus
Mobile Bottom Navigation Bar
A bottom tab bar for mobile web apps, shown inside a phone frame.
Menus
Right-Click Context Menu
A dark context menu for file lists, canvases and editors. Right-clicking inside the dashed area opens a 230 pixel menu at the…
Menus
Floating Dock Menu
A macOS-style dock of app shortcuts floating on a gradient. Seven rounded tiles (Home, Mail, Photos, Music, Code, Terminal and Trash) sit…
Menus
Command Palette Menu
A dark command palette of the kind opened with Ctrl+K or Cmd+K in modern apps.
Menus
Navbar with Hover Dropdowns
A white top navigation bar with a logo, two dropdowns, two plain links and an indigo Start free button on the right.
Menus
Morphing Hamburger Drawer Menu
A mobile-style header with a logo and a three-bar hamburger button.
Menus
Animated Nav Link Indicators
Four horizontal link bars that each mark the current page a different way.
Menus
Filter Pill Navigation
Two filter patterns for listing pages. Filter navigation is a single row of pill links, each with a count badge (All 248,…
Menus
Nested Flyout Navigation Menu
A vertical app menu whose parent items open flyout submenus to the side, two levels deep.
Menus
Footer Sitemap Navigation
A dark site footer with a brand column and four link columns (Product, Company, Resources, Legal), finished with a copyright line and…
Menus
Progress Step Navigation
Two progress indicators for multi-step flows. The horizontal one is a four-step checkout (Basket, Delivery, Payment, Confirm) with numbered circles jo
Menus
Fullscreen Overlay Menu
A studio-style header whose Menu button opens a full-screen dark overlay with four large links (Work, Studio, Journal, Contact) and a row…
Menus
Sticky Table of Contents
An "On this page" contents list that stays beside a long article and highlights the section being read.
Menus
Hover-Expanding Icon Rail
A dark 66px icon rail for app layouts that widens to 222px when a pointer rests on it or keyboard focus enters…
Menus
Bottom Sheet Action Menu
A mobile-style action sheet that slides up from the bottom of the screen over a dimmed page.
Menus
Radial Quick Action Menu
A round indigo action button that fans five circular shortcuts out along a half circle above it: New document, Upload file, Invite…
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.
Music Players
Compact Audio Player Bars
Three compact audio players for pages where the sound is one element among many.
Music Players
Album Card Music Players
Three card layouts that show the album art first. The vertical album card stacks a square cover, the title, the artist and…
Music Players
Playlist Music Players
Two players that work through a list of tracks. The album with track list has a header with a cover, the playlist…
Music Players
Mini and Floating Music Players
Three small players for when the music should stay out of the way.
Music Players
Animated Music Players
Three players with motion that follows the audio. The spinning record is a CSS turntable: a vinyl disc drawn with a repeating…
Music Players
Dark Now Playing Players
Two players for dark streaming-style interfaces. The now playing screen is a phone-width card with the playlist it is playing from, a…
Music Players
Modern CSS Music Players
Two modern CSS techniques for audio players. The first player keeps the browser's own range inputs and colours them with accent-color alone:…
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.
Registration Forms
Simple Sign-up Forms
Two single-card sign-up forms that cover the account creation screen most products need.
Registration Forms
Split-screen Registration Forms
Two full-width registration layouts that put the form next to a panel explaining why people should sign up.
Registration Forms
Password Strength Sign-up Forms
Two sign-up forms built around choosing a good password. Segmented meter and checklist is a password manager sign-up: an email field and…
Registration Forms
Social and Email Sign-up Forms
Two sign-up cards that offer third-party accounts alongside an email form.
Registration Forms
Event Registration Forms
Two longer registration forms for events and courses, split into numbered sections.
Registration Forms
Newsletter and Waitlist Forms
Single-field sign-ups for newsletters and launch waitlists, each with its confirmation state.
Registration Forms
Dark Registration Forms
Two registration forms for dark interfaces such as developer tools and members' communities.
Registration Forms
No-JS Validation Sign-up Forms
Two sign-up forms that do live validation, hints, progress and a ready state with CSS alone.
Tables
Searchable Paginated Datatable
A complete invoice datatable with no library behind it: a live search box, five sortable columns and numbered pagination, all driven by…
Tables
Striped Table with Totals
A classic report table: a dark header row, zebra-striped body rows, a hover highlight and a totals row in the footer.
Tables
Dark Service Status Table
A dark admin panel for service health: a header bar with a title and a Refresh button, then a table of services…
Tables
Responsive Stacked Table
An orders table that stays a normal table on wide screens and turns every row into a labelled card below 620 pixels.
Tables
Sticky Header Table
A scrolling list of top pages whose header row stays pinned while the body scrolls under it.
Tables
Selectable Rows Table
A team members table with a checkbox on every row, a select-all checkbox in the header and a bulk action bar that…
Tables
Expandable Rows Table
An expense claims table where each row opens a detail line underneath it, an accordion built inside a table.
Tables
Plan Comparison Table
A pricing comparison for three plans with the recommended one highlighted.
Tables
Invoice Line Items Table
A printable invoice sheet built around a line items table. The header shows the studio name and contact line on the left…
Tables
Minimal Hairline Table
The quietest table in the pack: no backgrounds, no header fill and no vertical lines, only a one pixel hairline above each…
Tables
Sortable Table Headers
A team table whose four column headers sort the rows: name, role, commit count and last active time.
Tables
Loading, Empty & Error Tables
The three states a data table shows before it has rows to display, in one set.
Tables
Inline Editable Table Cells
An order table where the product name and quantity cells can be edited in place, with a footer that counts changed rows…
Tables
Frozen First Column Table
A wide revenue report, months down the side and six regions plus a total across the top, that scrolls in both directions…
Tables
Grouped Rows with Subtotals
A purchase order split into Furniture, Hardware and Software, each group with a shaded header row that shows the item count and…
Tables
Tree Table with Nested Rows
A file browser table with folders that open and close to show nested files, three levels deep, next to owner, size and…
Tables
Tables with Inline Charts
A traffic report by channel where three small charts sit inside the cells: a seven-bar sparkline for the recent trend, a horizontal…
Tables
Table Row Actions and Bulk Bar
A file list with per-row actions and a bulk action bar. Each row ends with a download button and a more actions…
Tables
Table Pagination Patterns
Four table footers, each suited to a different kind of data source, shown under the same two-row invoice table.
Tables
Resizable Table Columns
An invoice table with column dividers you can drag, or focus and move with the arrow keys, to resize the Client, Status…
Tables
Reorderable Table Rows
A prioritised task queue whose rows can be put in a new order by dragging or with the keyboard.
Tabs
Sliding Underline Tabs
A white card with four text tabs, Overview, Features, Pricing and FAQ, over a thin grey baseline.
Tabs
Segmented Pill Tabs
A dark segmented control with three options, Monthly, Yearly and Lifetime, where a light pill slides behind the selected option, and a…
Tabs
Vertical Settings Tabs
A settings card with a 200 pixel side rail of tabs, Profile, Notifications, Security and Billing, each with a small emoji icon,…
Tabs
Boxed Browser-Style Tabs
Folder-style tabs, labelled index.html, style.css and app.js, that sit on top of a white panel the way browser and code editor tabs…
Tabs
Icon Tabs with Badges
Four equal-width tabs in a mail-app layout, Inbox, Starred, Sent and Trash, each with an emoji icon above its label and red…
Tabs
CSS-Only Radio Tabs
Three tabs, HTML, CSS and Zero JS, in a pale teal segmented bar above a text panel, built without any JavaScript.
Tabs
Dark Dashboard Tabs
A dark card titled Deployments with three underline tabs, Active, Queued and Failed, each followed by a small count pill, and a…
Tabs
Responsive Tabs to Accordion
Three equal-width tabs, Shipping, Returns and Warranty, above a bordered panel on wide screens, which turn into a stacked accordion below 560…
Tabs
Scrollable Tab Bar
A Release notes card with eight version tabs, v4.8 down to v4.1, in a single row that scrolls sideways instead of wrapping,…
Tabs
Closable Browser Tabs
A browser-style tab strip with index.html, style.css and main.js, each tab carrying a close cross, and a plus button at the end…
Tabs
Two-Level Nested Tabs
Two rows of tabs in one card: an underlined section row, Account, Billing and Security, and inside each section a grey segmented…
Tabs
Deep-Linkable URL Hash Tabs
Tabs whose state lives in the URL hash, so a reload keeps the open tab and a pasted link such as #pane-faq…
Tabs
Cross-Fade Animated Tabs
A segmented tab strip whose panels cross-fade and rise 8 pixels instead of cutting, with three steps named Write, Review and Ship.
Tabs
Thumbnail Media Tabs
A media viewer built as tabs: a large 16:10 frame with a caption and a row of four thumbnails underneath, where each…
Tabs
Dashboard Metric Tabs
Dashboard tabs where each tab is a small KPI card: a label, a large value and the change since last period, with…
Tabs
Overflow Tabs with a More Menu
An underlined tab bar that measures itself and folds the tabs that do not fit into a More menu at the right,…
Tabs
Loading and Empty State Tabs
One activity panel shown in the three states a real tab panel goes through: Loaded, with three rows of avatars, names and…
Tabs
Swipeable Scroll-Snap Tabs
Tabs over a horizontal scroll-snap track, so on a phone you can swipe between panels as well as tap the tab strip.
Tabs
Expanding Icon Rail Tabs
A dark vertical rail of icon tabs beside a content panel, for app shells, dashboards and settings screens where the navigation should…
Tabs
Wizard Step Tabs
Tabs drawn as a four-step setup wizard: Workspace and Invite team are complete and show a tick, Connect a repo is the…
Tabs
Filter Tabs with Counts
Pill-shaped filter tabs that carry a count, All, Open, In review and Archived, above a task list, so people can see how…
Tabs
Monthly and Yearly Pricing Tabs
A pricing section where a Monthly and Yearly switch swaps the whole plan grid, not just the numbers.
Timelines
Vertical Alternating Timeline
A company history laid out as an alternating vertical timeline: a 3px centre line, a blue dot for each event, and white…
Timelines
Minimal Release Notes Timeline
The quietest timeline in the pack: a 2px hairline on the left, a small ring for each entry and plain type.
Timelines
Dark Product Roadmap Timeline
A dark product roadmap that shows status as well as order. Five items run down a thin line: two are Shipped with…
Timelines
Activity Feed Timeline
An activity feed in a white panel, the kind found on a dashboard home or beside a project.
Timelines
Horizontal Steps Timeline
A horizontal step timeline for order progress: Cart, Shipping, Payment, Review and Done, each with a circle and a short caption.
Timelines
Scrolling History Timeline
A dark, horizontally scrolling timeline that tells a hundred-year studio history in six eras, from 1926 The letterpress years to 2026 One…
Timelines
Quarterly Roadmap Timeline
A year roadmap on a horizontal orange gradient road, with one card per quarter alternating above and below it: Q1 Foundation, Q2…
Timelines
Milestone Cards Timeline
Four onboarding milestones in a row: Connect your data, Pick a template, Invite the team and Automate reports.
Timelines
Gradient Glow Timeline
A dark vertical timeline with a gradient line that runs from cyan through indigo to pink, and a glowing ring marker for…
Timelines
Resume Experience Timeline
A two-column experience timeline for a CV or portfolio. Dates and location sit right-aligned in a narrow left column, 2024 — now…
Timelines
Horizontal Media Timeline
A horizontal timeline of image cards that scrolls sideways along a dated rail, built for a company history, a studio story or…
Timelines
Horizontal-to-Vertical Timeline
A progress timeline that runs horizontally on wide screens and turns into a vertical list below 700 pixels, from one piece of…
Timelines
Icon Process Timeline
A four-stage process strip with an icon tile, a number badge, a short heading and a sentence per stage, joined by small…
Timelines
Compact Inline Timelines
Three small progress trackers sized to sit inside a card, a list row or a table cell rather than take over a…
Timelines
Decade Axis Timeline
A horizontal timeline where events sit at their true distance along a dated axis instead of being spaced evenly, so a gap…
Timelines
Grouped Changelog Timeline
A changelog laid out as a timeline, with entries grouped under month headings that stick to the top of the viewport while…
Timelines
Scroll-Filled Spine Timeline
A vertical project timeline whose spine fills with an indigo to violet gradient as the timeline scrolls through the viewport, with no…
Timelines
Delivery Tracking Timeline
A parcel tracking card with a vertical timeline of delivery events, including a failed attempt, the live current step and the expected…
Timelines
Discussion Thread Timeline
An issue or ticket thread that mixes comments and lighter system events on a single spine, in the style of a code…
Timelines
Alternating Icon Timeline
A centred vertical timeline with cards alternating left and right of a gradient line and a rounded icon tile on the line…
Timelines
Audit Log Timeline
A dense audit log that fits one event per line, for admin panels and security pages where the list can run to…
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