Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Installation

To install with npm, run:

npm install device-agnostic-ui

Then load the styles.

Requirements

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

API