Device agnostic styles, components and hooks for React apps — deviceagnosticui.com. One design for any viewport (size, orientation, resolution), input method (touch, mouse) or network speed. Simple to build, test and use.
- 📦 Tiny bundle size. The minified and gzipped bundle size of individual modules are tested.
- 📱 Mobile first. Intuitive layouts suitable for any screen size, without media queries.
- ⌨️ Keyboard ok. Interactive components have clearly discernable
:focusstyles. - 🚨 Native UI. Lightweight, pretty and accessible form field validation messages.
- 🌗 Dark mode. The color scheme adapts to the operating system’s light or dark mode.
- 🎨 CSS variables. Easily tweak the theme globally or in your components.
- 🌏 Few global styles. No intrusive normalization or resets; just the
:rootessentials. - 🖌 Style raw HTML. Special
<Html>component to style rendered Markdown. - 🧠 Semantic markup. Lean use of semantically appropriate HTML elements.
- ⚛️ Modern React. Elegant use of React hooks, refs and fragments makes for a great DX.
- ⛑ Type safety. Modules are typed via TypeScript JSDoc comments.
For Node.js, to install device-agnostic-ui and its react peer dependency with npm, run:
npm install device-agnostic-ui reactFor Deno and browsers, an example import map:
{
"imports": {
"class-name-prop": "https://unpkg.com/class-name-prop@6.0.0/classNameProp.mjs",
"device-agnostic-ui/": "https://unpkg.com/device-agnostic-ui@11.0.0/",
"react": "https://esm.sh/react@18.2.0"
}
}These dependencies might not need to be in the import map, depending on what device-agnostic-ui modules the project imports from:
Theme, global, component, and syntax highlighting styles are exported in vanilla CSS files that must be manually loaded in your app, as necessary.
Supported runtime environments:
- Node.js versions
^14.17.0 || ^16.0.0 || >= 18.0.0. - Deno.
- Browsers matching the Browserslist query
> 0.5%, not OperaMini all, not dead.
Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:
compilerOptions.allowJsshould betrue.compilerOptions.maxNodeModuleJsDepthshould be reasonably large, e.g.10.compilerOptions.moduleshould be"node16"or"nodenext".
The npm package device-agnostic-ui features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported. These ECMAScript modules and CSS files are exported via the package.json field exports:
Blockquote.cssBlockquote.mjsButton.cssButton.mjsButtonSubmit.cssButtonSubmit.mjsCode.cssCode.mjsFieldset.cssFieldset.mjsglobal.cssHeading.cssHeading.mjsHtml.cssHtml.mjsIcon.cssIcon.mjsIconTick.mjsLinkCard.cssLinkCard.mjsLinkNav.cssLinkNav.mjsLinkText.cssLinkText.mjsListOrdered.cssListOrdered.mjsListUnordered.cssListUnordered.mjsLoading.cssLoading.mjsMargin.cssMargin.mjsNav.cssNav.mjspackage.jsonPara.cssPara.mjsPicture.cssPicture.mjsPre.cssPre.mjsScroll.cssScroll.mjsSelect.cssSelect.mjssplitWordBreaks.mjssyntax-highlighting-prism.cssTable.cssTable.mjsTextbox.cssTextbox.mjstheme.cssToggle.cssToggle.mjsuseCustomValidity.mjsuseMergedRef.mjsuseOnFocusReportValidity.mjsWordBreaks.mjs