Package Exports

device-agnostic-ui/Blockquote.css
device-agnostic-ui/Blockquote.mjs
device-agnostic-ui/Button.css
device-agnostic-ui/Button.mjs
device-agnostic-ui/ButtonSubmit.css
device-agnostic-ui/ButtonSubmit.mjs
device-agnostic-ui/Code.css
device-agnostic-ui/Code.mjs
device-agnostic-ui/Fieldset.css
device-agnostic-ui/Fieldset.mjs
device-agnostic-ui/Heading.css
device-agnostic-ui/Heading.mjs
device-agnostic-ui/Html.css
device-agnostic-ui/Html.mjs
device-agnostic-ui/Icon.css
device-agnostic-ui/Icon.mjs
device-agnostic-ui/IconTick.mjs
device-agnostic-ui/LinkCard.css
device-agnostic-ui/LinkCard.mjs
device-agnostic-ui/LinkNav.css
device-agnostic-ui/LinkNav.mjs
device-agnostic-ui/LinkText.css
device-agnostic-ui/LinkText.mjs
device-agnostic-ui/ListOrdered.css
device-agnostic-ui/ListOrdered.mjs
device-agnostic-ui/ListUnordered.css
device-agnostic-ui/ListUnordered.mjs
device-agnostic-ui/Loading.css
device-agnostic-ui/Loading.mjs
device-agnostic-ui/Margin.css
device-agnostic-ui/Margin.mjs
device-agnostic-ui/Nav.css
device-agnostic-ui/Nav.mjs
device-agnostic-ui/Para.css
device-agnostic-ui/Para.mjs
device-agnostic-ui/Picture.css
device-agnostic-ui/Picture.mjs
device-agnostic-ui/Pre.css
device-agnostic-ui/Pre.mjs
device-agnostic-ui/Scroll.css
device-agnostic-ui/Scroll.mjs
device-agnostic-ui/Select.css
device-agnostic-ui/Select.mjs
device-agnostic-ui/Table.css
device-agnostic-ui/Table.mjs
device-agnostic-ui/Textbox.css
device-agnostic-ui/Textbox.mjs
device-agnostic-ui/Toggle.css
device-agnostic-ui/Toggle.mjs
device-agnostic-ui/WordBreaks.mjs
device-agnostic-ui/global.css
device-agnostic-ui/package.json
device-agnostic-ui/splitWordBreaks.mjs
device-agnostic-ui/syntax-highlighting-prism.css
device-agnostic-ui/theme.css
device-agnostic-ui/useCustomValidity.mjs
device-agnostic-ui/useMergedRef.mjs
device-agnostic-ui/useOnFocusReportValidity.mjs

Readme

Device Agnostic UI

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 :focus styles.
🚨 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 :root essentials.
🖌 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.

Installation

For Node.js, to install device-agnostic-ui and its react peer dependency with npm, run:

npm install device-agnostic-ui react

For 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:

class-name-prop

Theme, global, component, and syntax highlighting styles are exported in vanilla CSS files that must be manually loaded in your app, as necessary.

Requirements

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.allowJs should be true.
compilerOptions.maxNodeModuleJsDepth should be reasonably large, e.g. 10.
compilerOptions.module should be "node16" or "nodenext".

Exports

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: