JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 315
  • Score
    100M100P100Q97314F
  • License MIT

Device agnostic styles, components and hooks for React and Next.js apps.

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/LinkActive.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 logo

Device Agnostic UI

npm version CI status

Device agnostic styles, components and hooks for React and Next.js 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

To install with npm, run:

npm install device-agnostic-ui

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

Requirements

  • Node.js: ^12.22.0 || ^14.17.0 || >= 16.0.0
  • Browsers: > 0.5%, not OperaMini all, not IE > 0, not dead

Exports

These ECMAScript modules and CSS files are published to npm and exported via the package.json exports field: