Device Agnostic UI

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. JS tested to be < 3 kB minified and gzipped, before tree shaking.
📱 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.

Setup

To install from npm run:

npm install device-agnostic-ui

Then load the styles.

API

Support

Node.js ^10.17.0 || ^12.0.0 || >= 13.7.0
Browsers > 0.5%, not OperaMini all, not IE > 0, not dead