3D Effects
3D Tilt Cards
Cards that lean toward the pointer, in three variants. The event pass is a conference badge with a holographic stripe pattern 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.
3D Effects
3D Keycaps and Push Buttons
Buttons that look and behave like physical keys, in four variants.
3D Effects
3D Cubes and Boxes
Solid shapes built from HTML and CSS, in three variants. The product box is a tea packet with six printed faces, shown…
3D Effects
3D Text Effects
Four ways to give a headline depth. Layered depth stacks hard-edged text-shadows in bands of amber and teal under a serif italic,…
3D Effects
Isometric UI Components
Interface pieces drawn in isometric projection, in three variants.
3D Effects
3D Carousel Rings
Carousels that turn in 3D, in two variants. The card ring places six destination cards, Lofoten, Atacama, Kyoto, the Azores, the Dolomites…
3D Effects
Neon 3D Effects
Neon 3D for dark interfaces, in three variants. The synthwave stage is an event hero with a striped sunset sun, a glowing…
3D Effects
Modern CSS 3D Effects
Three 3D effects that newer CSS features make possible without JavaScript.
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…
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.
CSS Arrows
CSS Arrow Shapes
Four ways to draw an arrow with CSS alone, each shown pointing up, right, down and left, plus a row that shows…
CSS Arrows
Scroll Down Arrow Indicators
Four animated scroll-down indicators, each placed at the foot of a hero panel the way they are used on landing pages.
CSS Arrows
Arrow Buttons and Links
Arrow links and buttons for the places arrows usually appear in a product: read more links, article navigation, carousels and calls to…
CSS Arrows
Rotating Chevron Arrows
Chevrons that turn with the state of the control they belong to, the arrows behind accordions, FAQs, dropdowns and selects.
CSS Arrows
Process Flow Arrows
Arrows that show movement from one stage to the next, for dashboards, how it works sections and case studies.
CSS Arrows
Hand-Drawn SVG Arrows
Curved, hand-drawn SVG arrows that draw themselves in, for annotating a pricing table, a product screenshot or a feature you want people…
CSS Arrows
Dark Arrow Designs
Arrows for dark dashboards and apps, where thin grey arrows from a light theme tend to vanish.
CSS Arrows
Modern CSS Arrows
Three arrows built with newer CSS that used to need SVG or JavaScript, each with a fallback.
Background Patterns
Geometric Background Patterns
Six geometric background patterns drawn entirely with CSS gradients, with no images and no SVG.
Background Patterns
Subtle UI Background Textures
Six quiet textures for app shells, landing pages and editors.
Background Patterns
Mesh Gradient Backgrounds
Six soft gradient backgrounds of the kind design tools call mesh gradients, built with layered CSS gradients.
Background Patterns
SVG Pattern Backgrounds
Six SVG pattern backgrounds drawn for this set and inlined as data URIs.
Background Patterns
Animated Backgrounds
Four animated backgrounds that move only transform and opacity, so the browser can hand them to the compositor instead of repainting the…
Background Patterns
Patterned Section Backgrounds
Four full page sections that show how to put real content on a pattern and keep it readable.
Background Patterns
Dark Background Patterns
Six patterns tuned for dark interfaces, where a light-theme pattern either vanishes or turns into noise.
Background Patterns
Modern CSS Background Patterns
Six tiles that use newer CSS for jobs that used to need JavaScript or several hand-picked colours.
Badges & Avatars
Status and Count Badges
The badges most interfaces need first, each shown with realistic content.
Badges & Avatars
Tags and Filter Chips
Four kinds of chip for content and filtering. Topic tags are links in a labelled list, styled as rounded hashtags such as…
Badges & Avatars
Initials and Icon Avatars
Avatars that need no photos. Initials avatars come in five sizes from 24 to 72 pixels, as circles and as rounded squares,…
Badges & Avatars
Avatar Groups and Stacks
Ways to show a group of people in a small space. The overlapping stack shows four members of a project team and…
Badges & Avatars
Verified and Role Badges
Badges that say something about a person or an account. A scalloped verified seal sits after a name in blue for a…
Badges & Avatars
Feature Labels and Step Badges
Labels for products and features, and badges that show progress.
Badges & Avatars
Dark Badges and Avatars
Badges and avatars designed for dark interfaces, where light-theme tints turn muddy.
Badges & Avatars
Modern CSS Badges and Avatars
Three patterns that usually need JavaScript, done with current CSS.
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.
Shopping Carts
Shopping Cart Pages
Three shopping cart layouts for a home goods shop. Cart page with order summary is the full-width view: a product list with…
Shopping Carts
Slide-out Cart Drawers
Two cart panels that open over the page instead of sending people to a separate cart.
Shopping Carts
Mini Cart Dropdowns & Badges
A mini cart for a tea shop header and five ways to show the cart count.
Shopping Carts
Single-page Checkout Forms
A complete one-page checkout for a coffee roaster and the confirmation that follows it.
Shopping Carts
Multi-step Checkout Forms
A multi-step checkout for a jewellery studio and two other ways to show checkout progress.
Shopping Carts
Dark Cart & Checkout
A cart and an express checkout for dark storefronts, with a single lime accent on near-black cards.
Shopping Carts
CSS-only Checkout with :has()
A checkout step for a ceramics studio that does with modern CSS what checkout templates usually do with JavaScript.
Chat UI
Messenger Chat Layout
A complete two-pane messenger: a conversation list on the left and the open thread with its composer on the right.
Chat UI
Support Chat Widget
A floating support chat for any website, shown in two forms. The help widget opens on a panel with a gradient header,…
Chat UI
AI Assistant Chat UI
An AI assistant chat with the details people expect from assistant tools, without calling any model.
Chat UI
Chat Composer Inputs
Three message composers with the behaviour that makes a chat input feel right.
Chat UI
Group Chat with Reactions
A group conversation for team and community chats. Each message from someone else has an initials avatar and a bubble with the…
Chat UI
Dark Chat UI
Two chat interfaces for dark products. Direct messages pairs a dark grey received bubble with a violet-to-blue gradient for your messages, an…
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.
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…
Claymorphism
Claymorphism Buttons & Toggles
The puffy controls a clay interface is built from. Pill buttons come in peach, mint, sky, lemon, lilac, plain and an accent…
Claymorphism
Claymorphism Forms & Login Card
Soft clay form controls and a sign-in card that uses them. Text fields are white wells with a gentle inset shade and…
Claymorphism
Claymorphism Cards
Four kinds of card moulded from the same clay. Stat cards are coloured slabs in peach, lemon, mint and sky, each with…
Claymorphism
Claymorphism Navigation
Navigation patterns for a soft, rounded app. The navbar is a floating clay pill with a brand mark, four links and two…
Claymorphism
Claymorphism Overlays & Feedback
Feedback and overlay patterns in soft clay. Four alerts in sky, mint, lemon and peach cover a tip, a saved message, a…
Claymorphism
Claymorphism Media & Widgets
Four widgets for a playful dashboard. The music player is a lilac card with a clay album cover, a song title and…
Claymorphism
Dark Claymorphism UI
The clay kit on a deep indigo night sky. Setting data-clay="dark" on any wrapper swaps every token at once: the page turns…
Claymorphism
Claymorphism Kids Learning App
A complete screen for a children's learning app, built only from the kit.
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.
Comment Sections
Comment Box Forms
Three comment forms for the moment a reader decides to say something.
Comment Sections
Nested Comment Threads
Two nested comment threads built from ordered lists inside ordered lists, so the reply structure is in the markup and not only…
Comment Sections
Blog Comment Section
A complete comment section for the end of a blog post, plus a notice for posts where comments are closed.
Comment Sections
Comment Voting and Reactions
Three ways to let readers rate comments without writing one. Answer voting is the Q&A pattern: each answer has an up arrow,…
Comment Sections
Product Review Comments
A product review list that treats reviews as comments people read and judge.
Comment Sections
Inline Code Review Comments
Comments pinned to a precise spot instead of the bottom of a page.
Comment Sections
Dark Forum Comments
A forum topic in a dark theme, plus two notices that forums need sooner or later.
Comment Sections
Modern CSS Comment Section
One comment thread shown twice, in a wide main column and a 300px sidebar, to show how much of a comment section…
Countdowns
Deadline Window & Progress
A fixed ISO deadline paired with a progress bar calculated from an explicit start and end. Progress clamps to zero before the…
Countdowns
Multi-event Countdown Agenda
An event selector updates one shared countdown, date and accessible selected state. All three dates are explicit UTC instants; selecting a later…
Countdowns
UTC Deadline & Time-zone Preview
A UTC date editor and IANA time-zone selector make the distinction between a deadline instant and its local display explicit. Intl.DateTimeFormat handles…
Countdowns
Dismissible Deadline Banner
A compact announcement counter with a keyboard-accessible dismiss button and a restore action that returns focus. Dismissal is in memory, with no…
Countdowns
Registration Cutoff Form
The registration controls close when the deadline passes, including a final check during submission. Native email validation remains active. The demonstration sends…
Countdowns
Pausable Focus Countdown
A duration-based focus timer with start, pause, resume and reset. Remaining time is derived from an absolute clock deadline while running, rather…
Countdowns
Independent Kitchen Timers
Three independent duration timers share a small reusable controller. Each has its own remaining time, controls and completion message; pausing or resetting…
Countdowns
Upcoming & Expired Countdown States
An event card with explicit upcoming and expired content. Preview controls exercise both states without changing the wall clock. Expiry is clamped…
Dark UI Kit
Dark UI Buttons & Toggles
The buttons and toggles of the uiCookies dark UI kit. Buttons come as a primary accent button, a secondary button on the…
Dark UI Kit
Dark UI Forms & Login Card
Form controls for the uiCookies dark UI kit and a complete login card.
Dark UI Kit
Dark UI Cards
Cards from the uiCookies dark UI kit, built to show how elevation works without shadows.
Dark UI Kit
Dark UI Navigation
Navigation for the uiCookies dark UI kit. The navbar has a brand mark, main links with the current page marked by aria-current…
Dark UI Kit
Dark UI Overlays & Feedback
Overlays and feedback for the uiCookies dark UI kit. The dialog is a native dialog element for deleting an environment, shown inline…
Dark UI Kit
Dark UI Media & Widgets
Media and data widgets for the uiCookies dark UI kit. The audio player has token-coloured cover art, a show line and episode…
Dark UI Kit
Dark UI Light Theme Variant
The set that proves the system: the same components rendered twice, side by side, once under data-theme="dark" and once under data-theme="light", plus
Dark UI Kit
Dark Developer Console
A full developer console dashboard built only from the kit's components, with a working light, dark and system theme toggle.
Dashboard Widgets
KPI Stat Widgets
Three ways to show the numbers a dashboard opens with. KPI cards with sparklines is a row of four cards for net…
Dashboard Widgets
SVG Chart Widgets
Three chart cards drawn as inline SVG by under ninety lines of vanilla JavaScript, with no chart library.
Dashboard Widgets
Goal & Progress Widgets
Widgets for tracking a number against a target. Radial progress rings shows three cards with an SVG ring each: a quarterly sales…
Dashboard Widgets
Activity Feed Widgets
Three list widgets for what has been happening. The activity feed is a vertical timeline of five events, such as a plan…
Dashboard Widgets
Leaderboard & Table Widgets
Compact tables and ranked lists for a dashboard. The recent orders table lists five orders with order number, customer, date, right-aligned total…
Dashboard Widgets
Calendar & To-Do Widgets
Three widgets for planning a working day. The week strip with agenda shows Monday to Sunday with today highlighted and dots for…
Dashboard Widgets
Dark Dashboard Widgets
An ops dashboard on a near-black ground, where light-theme greys and blues lose contrast.
Dashboard Widgets
Modern CSS Dashboard Widgets
Three widget patterns that usually need JavaScript or extra breakpoints, done in CSS.
Drag and Drop
Sortable Lists
Two sortable lists for the most common drag and drop job: putting things in order.
Drag and Drop
Drag and Drop Kanban Boards
Two kanban boards where cards move between columns and the numbers follow them.
Drag and Drop
Reorderable Grids
Drag and drop for grids instead of lists. Photo order with a cover image is a three-column photo grid, two columns on…
Drag and Drop
Drag-to-Assign Targets
Drag items into targets rather than reordering one list. Assign people to teams starts with three unassigned people as pills with initials…
Drag and Drop
Nested Sortable Lists & Ranking
Two patterns that go beyond a flat list. Nested outline: sections and pages is a documentation sidebar with three sections, each holding…
Drag and Drop
Drag Handles & Drop States
A reference set of the small details that make drag and drop feel right, every one of them working.
Drag and Drop
Dark Drag and Drop Lists
Drag and drop for dark interfaces, where the usual light grey placeholder disappears and focus rings are easy to lose.
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
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.
Feature Sections
Icon Grid Feature Sections
Three feature sections built around a grid of icons, each with a short heading and one sentence of copy.
Feature Sections
Alternating Feature Rows
A feature section with a centred heading followed by three rows that alternate copy and picture from side to side, the classic…
Feature Sections
Bento Grid Feature Sections
Two bento grid feature sections, where tiles of different sizes give each feature the space it needs.
Feature Sections
How It Works Sections
Three sections that explain how a product works and why it beats the alternative.
Feature Sections
Call to Action Bands
Five call to action bands for the end of a landing page or the gap between feature sections.
Feature Sections
Logo Cloud and Social Proof
Three social proof sections that show who uses a product and what it did for them.
Feature Sections
Dark Feature Sections
Two feature sections for dark interfaces and developer products.
Feature Sections
Modern CSS Feature Sections
Four feature sections that do with modern CSS what usually takes JavaScript or fixed heights.
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.
Glassmorphism
Glassmorphism Buttons & Toggles
The buttons and toggles of the uiCookies glassmorphism UI kit, shown on the kit's signature scene of gradient orbs.
Glassmorphism
Glassmorphism Form Controls
Form controls for the uiCookies glassmorphism UI kit, plus a complete glass login card.
Glassmorphism
Glassmorphism Cards
Four glass cards from the uiCookies glassmorphism UI kit, laid out side by side so you can see one design language across…
Glassmorphism
Glassmorphism Navigation
Navigation components for the uiCookies glassmorphism UI kit: a glass navbar, a tab bar, a workspace sidebar, a breadcrumb and pagination.
Glassmorphism
Glassmorphism Modals and Toasts
Overlays and feedback for the uiCookies glassmorphism UI kit: a modal dialog, three toasts, an inline alert, tooltips and a dropdown menu.
Glassmorphism
Glassmorphism Widgets
Media and dashboard widgets from the uiCookies glassmorphism UI kit: a mini music player, a weather widget, a mini calendar and a…
Glassmorphism
Dark Glassmorphism Components
The core components of the uiCookies glassmorphism UI kit on the dark scene: buttons, icon buttons and switches, form controls, a stat…
Glassmorphism
Glassmorphism Dashboard
A complete glass dashboard built from the components of the uiCookies glassmorphism UI kit, with a switch that turns the whole scene…
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…
Hero Sections
Centered SaaS Hero Sections
Two centred hero sections for software products, each with a minimal nav bar, an announcement pill, a headline, a line of subcopy,…
Hero Sections
Split Hero Sections
Three two-column heroes that pair the copy with something on the other side.
Hero Sections
Email Capture Hero Sections
Two heroes built around an email field, for waitlists, early access and newsletters.
Hero Sections
Image Background Hero Sections
Three heroes with a full-bleed photograph behind the copy, each using a different way to keep the text readable.
Hero Sections
App Download Hero Sections
Two heroes for mobile apps, with phones drawn in CSS and no device images or store logos.
Hero Sections
Editorial Agency Hero Sections
Two heroes for studios and agencies where the type is the design.
Hero Sections
Dark Gradient Hero Sections
Two dark heroes that get their depth from layered gradients rather than images.
Hero Sections
Modern CSS Hero Sections
Two heroes that use newer CSS for things that usually need JavaScript or a pile of media queries.
Hover Effects
Image Zoom & Pan Hover Effects
Five ways to move a photo inside its frame on hover, shown on travel cards with a destination, a tour name and…
Hover Effects
Caption Reveal Hover Overlays
Four caption reveals for photo grids, shown on an architecture portfolio.
Hover Effects
Card Lift, Tilt & Glow Hovers
Four hover effects for content cards, shown on a set of workshop listings with a photo, date, title, price and a Book…
Hover Effects
Image Filter & Mask Hovers
Six image treatments that change on hover, shown on a photo magazine.
Hover Effects
Border Draw Hover Effects
Four line effects that draw a frame over a photo on hover, shown on an interior design portfolio with the project type…
Hover Effects
Direction-Aware & Cursor Hovers
Four pointer-driven hover effects with a few lines of vanilla JavaScript, shown on a night-sky photography tour site.
Hover Effects
Dark Media Hover Effects
Three hover treatments for dark interfaces, where a drop shadow disappears and light and colour have to do the work.
Hover Effects
Modern CSS Hover Effects
Four hover effects that used to need JavaScript, written in current CSS.
Image Compare
Before and After Sliders
Two image comparison sliders for the most common job: showing an unedited photo and the finished one in the same frame.
Image Compare
Vertical and Hover Sliders
Two variations on the drag slider for layouts where a left and right split is not the best fit.
Image Compare
CSS-Only Image Comparisons
Two before and after comparisons with no JavaScript at all, and an honest note on what each one can and cannot do.
Image Compare
Tab and Toggle Comparisons
Comparisons that switch between whole images instead of splitting one.
Image Compare
Renovation Before and After
Before and after sliders placed inside real page sections. Renovation before and after cards is an interior design studio's recent work: three…
Image Compare
Magnifier Lens Comparisons
Two lens-style comparisons, where the second version appears only inside a circle that follows the pointer.
Image Compare
Dark Photo Editor Comparison
A comparison slider dressed as a photo editor, for photo apps, preset shops and retouching portfolios on a dark interface.
Image Compare
Modern CSS Image Comparisons
Three things image comparison plugins usually do with JavaScript, done with newer CSS.
Invoices
Classic Printable Invoices
Two invoices laid out like a sheet of A4 or US Letter paper, built to come out of the browser's Print dialog…
Invoices
Modern Minimal Invoices
Two invoices in a clean modern style with a brand colour band and a tinted totals card.
Invoices
Invoice Builder Forms
An editable invoice form that recalculates as you type. Invoice builder with editable line items has fields for the invoice number, issue…
Invoices
Invoice Email Templates
Two transactional emails for billing: Invoice email with a bulletproof pay button, and Payment received email with an outline button.
Invoices
Invoice List Dashboards
A billing dashboard and a sidebar card for keeping track of invoices.
Invoices
Payment Receipts
A till receipt and a payment confirmation page. Narrow till receipt with a QR code is a 320 pixel café receipt in…
Invoices
Dark Mode Invoices
A dark invoice and a dark invoice card for night-themed apps that still print as a normal light document.
Invoices
Container Query Invoices
One invoice component shown twice, in a wide slot and in a 340 pixel side panel, to show it laying itself out…
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.
Maps
Interactive SVG World Map
Two interactive world maps drawn as inline SVG, with no map library and no API key.
Maps
Store Locator Map
A store locator with a search box, a result list and an illustrated city map with numbered pins, plus a pick-up point…
Maps
Location Map Cards
Three ways to show where a place is on a contact or about page without loading a third-party map up front.
Maps
Map Pin and Marker Styles
A set of map markers drawn with CSS and small inline SVGs, shown over an illustrated city map so you can see…
Maps
Leaflet OpenStreetMap Map
The one set in this pack that uses a map library: Leaflet 1.9.4, loaded from jsDelivr with pinned versions and subresource integrity,…
Maps
Dark Map Styles
Two maps for dark dashboards and apps, drawn as inline SVG. The edge network map shows the world in deep slate with…
Maps
Illustrated Route Maps
Three illustrated maps for travel, events and venues, built from inline SVG and CSS with no JavaScript.
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:…
Neobrutalism
Neobrutalism Buttons & Toggles
The controls a neobrutalist interface is built from: thick ink borders, hard offset shadows and flat lemon, pink, cyan, lime and blue…
Neobrutalism
Neobrutalism Forms & Login Card
Form controls in the neobrutalist style, and a login card that uses them.
Neobrutalism
Neobrutalism Navigation
A navbar, a breadcrumb, a sidebar, tabs and pagination that share one rule for where you are: the current item gains a…
Neobrutalism
Neobrutalism Overlays & Alerts
Feedback and overlay components with thick borders and hard shadows.
Neobrutalism
Neobrutalism Media & Widgets
Four widgets in the neobrutalist style, built to work as well as look loud.
Neobrutalism
Neobrutalism Creator Dashboard
A full creator dashboard assembled from the kit, with a light and dark switch that needs no JavaScript.
Neumorphism
Neumorphic Buttons & Switches
The controls a soft UI is built from, drawn so they stay readable.
Neumorphism
Neumorphic Forms & Login Card
Form controls carved into the surface, and a login card that uses them.
Neumorphism
Neumorphic Cards
Four kinds of card in one soft style. Stat tiles show energy use, indoor temperature and solar output, each with an icon…
Neumorphism
Neumorphic Navigation
A navbar, a sidebar, tabs and pagination that share one rule for where you are: the current item is pressed into the…
Neumorphism
Neumorphic Overlays & Alerts
Feedback and overlay components for a soft UI. Four alerts for information, success, a warning and an error carry their type in…
Neumorphism
Neumorphic Smart-Home Widgets
The widgets soft UI is best known for, built to work rather than just to look right.
Neumorphism
Dark Neumorphism UI
The same kit on a dark surface, switched by one attribute. Put data-neu="dark" on any wrapper and the shared tokens change to…
Neumorphism
Neumorphic Smart-Home Dashboard
A full smart-home dashboard assembled from the kit, with a light and dark switch that needs no JavaScript.
Newsletter Forms
Inline Subscribe Bars
Three inline newsletter sign-ups plus their error and success states, for the place a subscribe form usually lives: the end of an…
Newsletter Forms
Newsletter Cards and Footers
Two newsletter cards and a site footer with a newsletter column, each built to sell the newsletter before asking for an address.
Newsletter Forms
Newsletter Preference Pickers
Three sign-up forms that let people choose what they get and how often, instead of one undifferentiated list.
Newsletter Forms
Newsletter Popups and Slide-ins
Three newsletter prompts built on the native dialog element, designed to be dismissible and honest.
Newsletter Forms
Lead Magnet Signup Forms
Three sign-ups that offer something specific in return for an email address.
Newsletter Forms
Double Opt-in Signup States
The four screens around a double opt-in newsletter, which most kits leave out.
Newsletter Forms
Dark Newsletter Signup Forms
Three newsletter sign-ups for dark sites and apps, where a light-theme form loses its contrast.
Newsletter Forms
Modern CSS Newsletter Forms
Four newsletter forms that use current CSS for what usually needs JavaScript.
Notifications
Notification Toast Stack
A live toast stack inside a small app window, plus four static toasts for info, success, warning and error.
Notifications
Notification Bell Dropdown
Two notification bells with dropdown panels. The first sits in an app header with a red count badge and opens a 400px…
Notifications
Notification Centre Page
A full notification centre for an app's notifications page, with a separate empty state.
Notifications
Actionable Notifications
Notifications people act on without leaving the page. The invitations list holds a workspace invite with Accept and Decline, a calendar invite…
Notifications
Notification Settings Matrix
A notification preferences form built as a real table: categories down the side, channels across the top, and a switch in every…
Notifications
What's New Changelog Popover
In-app announcements for product updates. A What's new pill in the app header carries a red dot and opens a popover panel…
Notifications
Dark Notification Panels
Notification UI for dark dashboards and developer tools. A bell on a near-black app bar has a red count with a soft…
Notifications
Modern CSS Notifications
A bell panel and two toasts that work without any component JavaScript.
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.
Pricing Tables
Highlighted Plan Pricing Cards
Two tiered pricing layouts for the classic pricing page, where one plan should stand out without shouting.
Pricing Tables
Billing Toggle Pricing Tables
Pricing tables with a billing period switch that changes every price on the page without any JavaScript.
Pricing Tables
Pricing Comparison Tables
Feature comparison tables for pricing pages, built as real HTML tables rather than a grid of divs, so screen readers can announce…
Pricing Tables
Single Plan Pricing Cards
Pricing cards for products that do not need tiers: one plan, a one-off licence or a price the buyer chooses.
Pricing Tables
Usage-Based Pricing Calculators
Pricing calculators for products billed by seats or by volume, where a range slider recalculates the price as it moves.
Pricing Tables
Editorial Service Price Lists
Price lists for freelancers, studios and service businesses, set like a page from a magazine instead of a row of SaaS cards.
Pricing Tables
Dark Pricing Tables
Pricing for dark interfaces such as developer tools and hosting dashboards, with colours checked for contrast on a near-black ground.
Pricing Tables
Modern CSS Pricing Tables
Two pricing layouts that use newer CSS to do what usually takes JavaScript or fixed heights.
Product Cards
Classic Shop Product Cards
The two product card layouts most online shops start with. Shop grid with wishlist is a bordered card with a 4:5 photo,…
Product Cards
Colour and Size Swatch Cards
Product cards that let the shopper choose a variant before adding to the cart, each with a sale price.
Product Cards
List-View Product Cards
Horizontal product cards for the list view of a category page, where shoppers compare details rather than photos.
Product Cards
Quick View Product Cards
Product cards that keep the photo clean until the shopper shows interest, then reveal their actions.
Product Cards
Grocery Product Cards
Cards for a grocery, farm shop or food delivery site, where shoppers buy several of an item and care about the unit…
Product Cards
Digital Product Cards
Cards for things that are never shipped: online courses, downloads and apps, where the details have to do the selling a product…
Product Cards
Dark Product Cards
Product cards for a dark storefront, such as a premium fashion, coffee, grooming or audio shop.
Product Cards
Modern CSS Product Cards
Product cards that do with CSS what is usually done with JavaScript.
Profile Cards
Classic Profile Cards
The profile card most sites need, in three layouts. Cover band with centred avatar has a gradient cover, a round initials avatar…
Profile Cards
Team Member Cards
Cards for an About or Team page, with illustrated SVG avatars drawn for this pack instead of stock photos.
Profile Cards
Creator Profile Cards
A social profile for creators and community sites, plus a suggestions list.
Profile Cards
Business Contact Cards
Digital business cards that people can act on. The business card is a navy card with a logo mark, the company name,…
Profile Cards
Flip Profile Cards
Profile cards with a second side for the longer story. The portrait cards that turn on the Y axis show an illustrated…
Profile Cards
User Menus and Hover Cards
The small profile views an app shows everywhere. The account menu is a header bar with an avatar button that opens a…
Profile Cards
Dark Profile Cards
Profile cards for dark interfaces such as game, developer and music sites.
Profile Cards
Modern CSS Profile Cards
One profile card that lays itself out by the space it is given, shown in three slots.
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.
Retro UI
Retro Buttons & Toggles
The controls of a classic desktop operating system, rebuilt with real HTML elements.
Retro UI
Retro Forms & Login Dialog
Form controls in the classic desktop style and a log-on dialog that uses them.
Retro UI
Retro Cards & Windows
Cards drawn as classic desktop windows, each with a gradient title bar, labelled window controls and a bevelled frame.
Retro UI
Retro Navigation
Navigation patterns from the classic desktop. A word processor window has a menu bar with File, Edit, View and Help menus; each…
Retro UI
Retro Dialogs, Alerts & Toasts
Feedback the way classic desktops gave it. Four message boxes cover an error about a missing file, a warning about unsaved changes,…
Retro UI
Retro Media Player & Widgets
Desktop accessories for a retro interface. A media player window has a green LCD screen with the track, its state, the elapsed…
Retro UI
Synthwave 80s UI Theme
The night variant of the kit: the same buttons, toolbars, fields, windows and widgets with data-retro="synthwave" on a wrapper.
Retro UI
Retro Desktop & Taskbar
A complete retro desktop built from the kit. Desktop icons for Notes, Inbox, Nightdrive FM and the Recycle Bin open their windows.
Scroll Animations
Reveal on Scroll Animations
Five ways to bring content in as it scrolls into view, shown on a ceramics studio page.
Scroll Animations
Scroll Progress Indicators
Four reading progress indicators around a long travel article.
Scroll Animations
Parallax Scrolling Layers
Three parallax techniques for a mountain hut website. The first is a CSS-only 3D scene inside its own scroll container: the container…
Scroll Animations
Sticky Scrollytelling
Two scrollytelling layouts where a figure stays put while the story scrolls past it.
Scroll Animations
Horizontal Scroll Sections
Two horizontal scroll sections for an architecture studio portfolio.
Scroll Animations
Scroll-Linked Header Effects
Three sticky header behaviours, each shown in its own scrolling window so you can try them side by side.
Scroll Animations
Dark Scroll Animations
A dark product page for a night sky camera with five scroll effects and no JavaScript.
Scroll Animations
Modern CSS Scroll Animations
Five scroll effects that usually need JavaScript, built with newer CSS, each with a line that names its baseline and a badge…
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.
Social Media Icons
Classic Social Media Icons
The four social icon rows most websites need, each a list of links with inline SVG logos.
Social Media Icons
Mono and Outline Social Icons
Social icons for designs where full brand colour would be too loud.
Social Media Icons
Social Follow Buttons
Social buttons that say what they do and how many people already have.
Social Media Icons
Social Share Bars
Three share bars for articles and posts, wired to real share URLs.
Social Media Icons
Footer Social Media Links
Three footers built around social links, each for a different kind of site.
Social Media Icons
Social Icon Hover Effects
Four animated hover effects for social icons, all driven by CSS transitions.
Social Media Icons
Dark Social Media Icons
Social icons designed for near-black interfaces, where icons made for a light page lose contrast.
Social Media Icons
Modern CSS Social Share Icons
Share and social icon patterns that usually need a JavaScript library, built with current CSS instead.
Speech Bubbles
Classic Speech Bubbles
Twelve speech bubbles covering every tail position people ask for.
Speech Bubbles
Chat Bubbles with Tails
One short conversation about picking up two bikes from a repair shop, styled two ways so you can compare the two tail…
Speech Bubbles
Comic & Thought Bubbles
A three-panel comic strip about a baker and a temperamental oven, with the three balloon types comics use.
Speech Bubbles
Callout & Annotation Bubbles
Three kinds of bubble that point at something specific. Hotspots on a product photo puts numbered dots on a picture of headphones…
Speech Bubbles
Testimonial Quote Bubbles
Testimonials drawn as speech bubbles, so the tail shows who is speaking.
Speech Bubbles
Animated Speech Bubbles
Three kinds of movement a speech bubble needs, all CSS keyframes.
Speech Bubbles
Dark Speech Bubbles
Speech bubbles for dark interfaces, where a white or pale grey bubble turns into a glaring block.
Speech Bubbles
Modern CSS Speech Bubbles
Three bubbles built with CSS features from 2024 and 2025, each behind @supports with a classic bubble as the fallback.
Star Ratings
Read-Only Star Rating Displays
Three ways to show a score that people can read but not change, each with fractional or half stars.
Star Ratings
Star Rating Inputs
Star rating inputs built on native radio buttons, with no JavaScript.
Star Ratings
Heart, Emoji and NPS Ratings
Rating scales for when stars are the wrong fit. Hearts rates a recipe from one to five hearts with a Clear button…
Star Ratings
Rating Distribution Summary
Rating summaries that sit at the top of a reviews section, without the review cards.
Star Ratings
Star Rating Review Forms
Review forms with a star rating, a title, a text field and validation.
Star Ratings
Compact Star Ratings
Small ratings for places where space is short. Four sizes shows the same 4.6 rating with 1,208 reviews at 12, 16, 20…
Star Ratings
Dark Star Ratings
Star ratings tuned for dark interfaces such as streaming apps and media libraries.
Star Ratings
Modern CSS Star Ratings
Star ratings that use newer CSS for things that used to need tricks or JavaScript.
Stats Counters
Count-Up Number Counters
Three ways to show numbers that count up when they scroll into view.
Stats Counters
Landing Page Stats Strips
Four stats strips for landing pages, the band of numbers that sits under a hero or between sections.
Stats Counters
Stats with Context
Numbers that carry their own context, for annual reviews, case studies and pages where a bare figure would not be trusted.
Stats Counters
Odometer and Flip Counters
Counters with mechanical motion, for a total that deserves a moment on the page.
Stats Counters
Impact Stats Sections
Big numbers with the story behind them, for nonprofits, annual reports and about pages.
Stats Counters
Live Ticking Counters
Counters that keep changing while the page is open. Running total ticks a large figure upwards at a set rate, such as…
Stats Counters
Dark Stats Sections
Stats sections for dark landing pages, where light-theme numbers lose their contrast.
Stats Counters
CSS-Only Animated Counters
Number counters that animate with no JavaScript. Count on load runs three figures from 0 when the page opens.
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.
Tables
Saved-View Tables
A complete order workspace that joins saved filters, sorting, page selection and bulk status changes in one table.
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.
Testimonials
Testimonial Cards Grid
The testimonial section most product and service sites need: a centred heading over a grid of quote cards.
Testimonials
Featured Testimonial Section
One customer quote given the whole width of the page, for the moment in a landing page where a single strong endorsement…
Testimonials
Multi-Card Testimonial Slider
Testimonial sliders that show several quotes at once and never move on their own.
Testimonials
Wall of Love Testimonials
A wall of love: lots of customer notes of very different lengths packed into a masonry layout, the way SaaS sites show…
Testimonials
Customer Review Summary
The ratings block from a product page: an average score, a breakdown of how many reviews gave each star rating, and the…
Testimonials
Video Case Study Testimonials
Customer stories that lead with a video and a number. The video testimonial cards put a 16:9 poster above each quote: CSS…
Testimonials
Dark Testimonial Section
Testimonials for a dark developer tool or SaaS site, where a light card on a black page looks out of place.
Testimonials
Modern CSS Testimonials
Two testimonial patterns that usually need JavaScript, done with modern CSS.
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…
Timelines
Roadmap & Release Planning
A product roadmap that connects planned work with release notes and dependency checks.
To-Do Lists
Classic To-Do App
The to-do app most people search for when they want a working to-do list in HTML, CSS and JavaScript.
To-Do Lists
Progress Checklists
Three checklist styles for lists that are worked through rather than added to.
To-Do Lists
Due Date Task Lists
Task lists that show when each task is due and how much it matters, without relying on colour.
To-Do Lists
Editable To-Do List with Undo
To-do lists where tasks can be renamed in place and a deleted task can be brought back.
To-Do Lists
Nested Subtask Checklists
Checklists where a task has subtasks and the parent box reflects them.
To-Do Lists
Habit Tracker and Daily Planner
Two list layouts for routines rather than one-off tasks. Weekly habit tracker shows four habits, such as Read 20 pages and Walk…
To-Do Lists
Dark To-Do Lists
To-do lists for dark interfaces, with colours checked for contrast on a near-black ground.
To-Do Lists
CSS-only To-Do List with :has()
Two to-do lists that do in CSS what most to-do lists need JavaScript for.
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.
Tooltips
Basic Tooltips with Arrows
The tooltips most interfaces need, each with an arrow that points at its trigger.
Tooltips
Rich Tooltips and Popovers
Tooltips that carry more than a word, and a popover for content you can act on.
Tooltips
Icon Button and Help Tooltips
Three places where a tooltip does real work. Icon buttons named by their tooltip is a text formatting toolbar, with Bold, Italic,…
Tooltips
Shortcut Tooltips & Coach Marks
Tooltips that teach. Tooltips with keyboard shortcuts gives an editing toolbar of Undo, Redo, Find in document and Add comment buttons, each…
Tooltips
Themed Tooltip Variants
One tooltip in the colours and sizes a design system needs. Status colours shows four service badges from a deploy dashboard, api…
Tooltips
Animated Tooltips
Tooltip entrances that stay quick and calm. Five entrances gives each of five social buttons a different animation: Like fades, Repost scales…
Tooltips
Dark UI Tooltips
Tooltips for dark dashboards, where a black tooltip disappears into a near-black page.
Tooltips
Modern CSS Tooltips
Tooltips built on the newest platform features instead of a positioning library.
Tree Views
Details Element Tree Views
Three tree views built only from nested lists and the details and summary elements, with no JavaScript at all.
Tree Views
Checkbox Tree Views
Two checkbox trees whose parent boxes are tri-state. Role permissions with a select-all root lists an editor role's rights in four groups…
Tree Views
Sidebar Navigation Trees
Two sidebar navigation trees shown next to the page they belong to.
Tree Views
Org Chart Tree Views
Two organisation charts drawn from nested lists. Company chart with collapsible branches shows a studio's chief executive, three chiefs and their repo
Tree Views
Searchable Tree Views
Two trees with a search field that filters them as you type. Component library, empty search lists 29 components of a design…
Tree Views
Dark IDE Tree Views
Two dark trees in the style of a code editor's side panel. IDE explorer with git status and indent guides shows an…
Tree Views
Modern CSS Tree Views
Three trees that do with CSS what many tree plugins do with JavaScript.
Video Players
Custom Video Control Bars
Two complete custom control bars for a native video element. The overlay control bar sits on a dark gradient over the picture…
Video Players
Minimal Overlay Video Players
Three players that keep the picture clean. The big play button player shows a frosted round button in the middle of the…
Video Players
Video Chapters and Transcript
Two players for long-form video where people want to skip to the part they need.
Video Players
Video Playlists and Courses
Two players that hold more than one video. The course player puts the video next to a lesson list for a four-lesson…
Video Players
Video Cards with Lightbox
Video cards that open a full player in a lightbox built on the native dialog element.
Video Players
Background Video Heroes
Two hero sections with a looping background video that stays out of the visitor's way.
Video Players
Dark Streaming Video Players
Two dark players in the style of a streaming app. The streaming player shows the series name and episode title at the…
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…
No snippets match that search. Search the whole site instead