Device Agnostic UI

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


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.


  1. To install with npm:

    npm install device-agnostic-ui
  2. Load the styles.
  3. Use some components!