Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including device-agnostic-ui with all npm packages installed. Try it out:

require("next/package.json"); // next is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("styled-jsx/package.json"); // styled-jsx is a peer dependency. var deviceAgnosticUi = require("device-agnostic-ui")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

device-agnostic-ui v5.1.1

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

Device Agnostic UI logo

Device Agnostic UI

npm version CI status

Device agnostic styles, components and hooks for Next.jsdeviceagnosticui.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. < 8 KB with tree shaking, Size Limit 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.

Setup

To install from npm run:

npm install device-agnostic-ui

Then setup the essential global styles.

API

Support

Browserslist: Node >= 8.10, > 0.5%, not OperaMini all, not IE > 0, not dead.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free