Partwise - HTML and JavaScript UI Components

Partwise is a set of 30 interactive UI components and 14 CSS-only basics in plain HTML, CSS and JavaScript. Add two files to a page, copy the HTML of a component, and it works. No framework, no dependencies and no build step.

The 30 components

• Overlays: modal, drawer, dropdown menu and context menu, popover, tooltip, toast, command palette, lightbox, tour
• Navigation: tabs, accordion, navigation bar with dropdown panels, pagination, banner
• Forms: select with search and multiple choice, date picker with ranges, file upload, tag input, code input, rating, signature pad, field helpers, form validation
• Content: carousel, image compare, countdown, code block with copy button, filter grid, scroll reveal, cookie consent
• CSS only: buttons, badges, chips, alerts, cards, avatars, progress, spinner, skeleton, table, breadcrumb, timeline, stat, empty state, and form styles

Good to know before you buy

• This is a front-end kit. Sending forms, uploading files and saving data are done by your own code or server
• It is plain JavaScript, not a React or Vue component library. It runs in any page, and the guide explains how to use it next to a framework
• The select and the filter grid work on the items that are in the page. They do not load results from a server while you type
• The date picker has dates only, no times. The lightbox shows pictures only. Menus have one level
• The cookie consent is a tool, not legal advice
• Built with care for accessibility and tested with a keyboard and automated checks. It has not been through a formal audit
• Texts inside components are in English. Most can be changed with an attribute
• Made for current versions of Chrome, Edge, Firefox and Safari (Safari 16.2 or newer). The automated tests ran in Chrome

In the download

• The two bundle files, each as a small and as a readable version with comments
• One CSS and one JavaScript source file per component
• 34 guide pages with demos and copy-ready code
• README, changelog and license

Features

• Two files: one stylesheet and one script. Or load single components from the source folder
• Switched on by attributes: write data-pw-modal or data-pw-tabs in your HTML. No JavaScript needed for the common cases
• A script interface and events for everything else: open, close, set values, listen for changes
• Your colours through a few CSS variables. Light, dark and automatic themes
• Built on real form fields: the select, date picker, tag input and upload keep their value in normal fields, so forms submit as usual
• Keyboard friendly: every component works without a mouse, dialogs keep the focus inside, and screen readers get the right roles and states
• Right-to-left pages are supported
• A page for every component with live demos, copy-ready HTML, options, events and keys

Requirements

• A current version of Chrome, Edge, Firefox or Safari (Safari 16.2 or newer)
• Any website or web app where you can add one stylesheet and one script
• No framework, no dependencies and no build tools are needed

Instructions

1. Unzip the download and open index.html in your browser to see every component
2. Copy dist/partwise.min.css and dist/partwise.min.js into your project and load them in your page
3. Open the guide page of a component in docs, copy its HTML and paste it into your page
4. Set your colours with the CSS variables described in documentation.html
5. For options, events and the script interface, see the page of each component