Skip to content


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation

Device Agnostic UI logo

Device Agnostic UI

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


For Node.js, to install device-agnostic-ui and its react peer dependency with npm, run:

npm install device-agnostic-ui react

For Deno and browsers, an example import map:

  "imports": {
    "class-name-prop": "",
    "device-agnostic-ui/": "",
    "react": ""

These dependencies might not need to be in the import map, depending on what device-agnostic-ui modules the project imports from:

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


Supported runtime environments:

Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:


The npm package device-agnostic-ui features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported. These ECMAScript modules and CSS files are exported via the package.json field exports: