Component library
Handfish
Handfish is an accessible component library for creative tools, built with Web Components and CSS custom properties. It loads from a CDN with no build step.
- Free
- MIT license
- Web Components
- No build step
Overview
Handfish is the design system of the Noise Factor apps. It provides the controls that creative tools need, such as sliders, knobs, color pickers, gradient editors, and vector pickers, as standard Web Components that work with any framework or with none.
Styling comes from CSS custom properties with the --hf- prefix. Colors are defined in OKLCH, the library follows the system light or dark setting, and named themes change the whole palette with one attribute.
Features
-
Controls for creative tools
Toggle switch, slider, select, color wheel, color picker, color swatch, gradient stops, knob dial, and 2D and 3D vector pickers.
-
Application components
Menu bar, dropdown menu, code editor, image magnifier, LED matrix, tempo bar, about dialog, toasts, and collaboration session dialogs.
-
Design tokens
Color, typography, spacing, and radius tokens as CSS custom properties, with colors in OKLCH.
-
Light and dark
Follows prefers-color-scheme, or set the theme with a data-theme attribute.
-
Named themes
Switch the palette with one attribute, for example
<html data-theme="ocean">. -
Form participation
Components take part in HTML forms through ElementInternals.
-
Stable font loading
Uses Fontaine placeholder fonts to prevent layout shift while fonts load.
-
CDN channel
Load the ES module bundle from the
/0channel, which always serves the latest 0.x release.
Specifications
| Platforms | Web browsers |
|---|---|
| Technology | Web Components, CSS custom properties, ES modules |
| Distribution | CDN at https://handfish.noisefactor.io/0/; npm package name @noisedeck/handfish |
| Components | 20+ exported components and component groups |
| Themes | Light, dark, and a selection of named themes |
| Source | github.com/noisefactorllc/handfish |
| License | MIT |
| Price | Free |
Get started
- Add the tokens stylesheet:
<link rel="stylesheet" href="https://handfish.noisefactor.io/0/styles/tokens.css">. - Import the components:
import 'https://handfish.noisefactor.io/0/handfish.esm.min.js'. - Use the elements in your HTML and style them with
--hf-tokens. - Browse the examples for each component.
Resources
Questions
- Does Handfish need a framework?
- No. Handfish components are standard Web Components. They work in plain HTML and with any framework.
- How do I theme Handfish?
- Override the --hf- CSS custom properties, or set a named theme with the data-theme attribute on the html element.
- Which version does the CDN serve?
- The /0 channel serves the latest release in major version 0. Pin a specific version path only if you need to freeze it.