{"id":15662559,"url":"https://github.com/jaydenseric/device-agnostic-ui","last_synced_at":"2025-07-09T23:32:40.570Z","repository":{"id":62354774,"uuid":"208193668","full_name":"jaydenseric/device-agnostic-ui","owner":"jaydenseric","description":"Device agnostic styles, components \u0026 hooks for React apps.","archived":false,"fork":false,"pushed_at":"2022-09-02T00:36:32.000Z","size":273,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-05T23:35:29.381Z","etag":null,"topics":["css","deno","esm","maintained","mjs","node","npm","react","typescript"],"latest_commit_sha":null,"homepage":"https://deviceagnosticui.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"jaydenseric"}},"created_at":"2019-09-13T04:12:48.000Z","updated_at":"2024-09-20T02:24:07.000Z","dependencies_parsed_at":"2022-10-31T10:47:07.059Z","dependency_job_id":null,"html_url":"https://github.com/jaydenseric/device-agnostic-ui","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/jaydenseric/device-agnostic-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fdevice-agnostic-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fdevice-agnostic-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fdevice-agnostic-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fdevice-agnostic-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/device-agnostic-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fdevice-agnostic-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264505262,"owners_count":23618910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","deno","esm","maintained","mjs","node","npm","react","typescript"],"created_at":"2024-10-03T13:33:16.462Z","updated_at":"2025-07-09T23:32:40.553Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jaydenseric"],"categories":[],"sub_categories":[],"readme":"![Device Agnostic UI logo](https://cdn.jsdelivr.net/gh/jaydenseric/device-agnostic-ui/device-agnostic-ui-logo.svg)\n\n# Device Agnostic UI\n\n**Device agnostic** styles, components and hooks for [React](https://reactjs.org) apps — [deviceagnosticui.com](https://deviceagnosticui.com). One design for any viewport (size, orientation, resolution), input method (touch, mouse) or network speed. Simple to build, test and use.\n\n- 📦 **Tiny bundle size.** The minified and gzipped bundle size of individual modules are tested.\n- 📱 **Mobile first.** Intuitive layouts suitable for any screen size, _without media queries_.\n- ⌨️ **Keyboard ok.** Interactive components have clearly discernable [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) styles.\n- 🚨 **Native UI.** Lightweight, pretty and accessible [form field validation](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation) messages.\n- 🌗 **Dark mode.** The color scheme [adapts](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) to the operating system’s light or dark mode.\n- 🎨 **CSS variables.** Easily tweak the theme globally or in your components.\n- 🌏 **Few global styles.** No intrusive normalization or resets; just the [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) essentials.\n- 🖌 **Style raw HTML.** Special [`\u003cHtml\u003e`](./Html.mjs) component to style rendered Markdown.\n- 🧠 **Semantic markup.** Lean use of semantically appropriate HTML elements.\n- ⚛️ **Modern React.** Elegant use of [React](https://reactjs.org) [hooks](https://reactjs.org/docs/react-api.html#hooks), [refs](https://reactjs.org/docs/react-api.html#refs) and [fragments](https://reactjs.org/docs/react-api.html#fragments) makes for a great DX.\n- ⛑ **Type safety.** Modules are typed via [TypeScript](https://typescriptlang.org) JSDoc comments.\n\n## Installation\n\nFor [Node.js](https://nodejs.org), to install [`device-agnostic-ui`](https://npm.im/device-agnostic-ui) and its [`react`](https://npm.im/react) peer dependency with [npm](https://npmjs.com/get-npm), run:\n\n```sh\nnpm install device-agnostic-ui react\n```\n\nFor [Deno](https://deno.land) and browsers, an example import map:\n\n```json\n{\n  \"imports\": {\n    \"class-name-prop\": \"https://unpkg.com/class-name-prop@6.0.0/classNameProp.mjs\",\n    \"device-agnostic-ui/\": \"https://unpkg.com/device-agnostic-ui@11.0.0/\",\n    \"react\": \"https://esm.sh/react@18.2.0\"\n  }\n}\n```\n\nThese dependencies might not need to be in the import map, depending on what [`device-agnostic-ui`](https://npm.im/device-agnostic-ui) modules the project imports from:\n\n- [`class-name-prop`](https://npm.im/class-name-prop)\n\nTheme, global, component, and syntax highlighting styles are [exported](#exports) in vanilla CSS files that must be manually loaded in your app, as necessary.\n\n## Requirements\n\nSupported runtime environments:\n\n- [Node.js](https://nodejs.org) versions `^14.17.0 || ^16.0.0 || \u003e= 18.0.0`.\n- [Deno](https://deno.land).\n- Browsers matching the [Browserslist](https://browsersl.ist) query [`\u003e 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).\n\nNon [Deno](https://deno.land) projects must configure [TypeScript](https://typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:\n\n- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.\n- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.\n- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `\"node16\"` or `\"nodenext\"`.\n\n## Exports\n\nThe [npm](https://npmjs.com) package [`device-agnostic-ui`](https://npm.im/device-agnostic-ui) features [optimal JavaScript module design](https://jaydenseric.com/blog/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`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):\n\n- [`Blockquote.css`](./Blockquote.css)\n- [`Blockquote.mjs`](./Blockquote.mjs)\n- [`Button.css`](./Button.css)\n- [`Button.mjs`](./Button.mjs)\n- [`ButtonSubmit.css`](./ButtonSubmit.css)\n- [`ButtonSubmit.mjs`](./ButtonSubmit.mjs)\n- [`Code.css`](./Code.css)\n- [`Code.mjs`](./Code.mjs)\n- [`Fieldset.css`](./Fieldset.css)\n- [`Fieldset.mjs`](./Fieldset.mjs)\n- [`global.css`](./global.css)\n- [`Heading.css`](./Heading.css)\n- [`Heading.mjs`](./Heading.mjs)\n- [`Html.css`](./Html.css)\n- [`Html.mjs`](./Html.mjs)\n- [`Icon.css`](./Icon.css)\n- [`Icon.mjs`](./Icon.mjs)\n- [`IconTick.mjs`](./IconTick.mjs)\n- [`LinkCard.css`](./LinkCard.css)\n- [`LinkCard.mjs`](./LinkCard.mjs)\n- [`LinkNav.css`](./LinkNav.css)\n- [`LinkNav.mjs`](./LinkNav.mjs)\n- [`LinkText.css`](./LinkText.css)\n- [`LinkText.mjs`](./LinkText.mjs)\n- [`ListOrdered.css`](./ListOrdered.css)\n- [`ListOrdered.mjs`](./ListOrdered.mjs)\n- [`ListUnordered.css`](./ListUnordered.css)\n- [`ListUnordered.mjs`](./ListUnordered.mjs)\n- [`Loading.css`](./Loading.css)\n- [`Loading.mjs`](./Loading.mjs)\n- [`Margin.css`](./Margin.css)\n- [`Margin.mjs`](./Margin.mjs)\n- [`Nav.css`](./Nav.css)\n- [`Nav.mjs`](./Nav.mjs)\n- [`package.json`](./package.json)\n- [`Para.css`](./Para.css)\n- [`Para.mjs`](./Para.mjs)\n- [`Picture.css`](./Picture.css)\n- [`Picture.mjs`](./Picture.mjs)\n- [`Pre.css`](./Pre.css)\n- [`Pre.mjs`](./Pre.mjs)\n- [`Scroll.css`](./Scroll.css)\n- [`Scroll.mjs`](./Scroll.mjs)\n- [`Select.css`](./Select.css)\n- [`Select.mjs`](./Select.mjs)\n- [`splitWordBreaks.mjs`](./splitWordBreaks.mjs)\n- [`syntax-highlighting-prism.css`](./syntax-highlighting-prism.css)\n- [`Table.css`](./Table.css)\n- [`Table.mjs`](./Table.mjs)\n- [`Textbox.css`](./Textbox.css)\n- [`Textbox.mjs`](./Textbox.mjs)\n- [`theme.css`](./theme.css)\n- [`Toggle.css`](./Toggle.css)\n- [`Toggle.mjs`](./Toggle.mjs)\n- [`useCustomValidity.mjs`](./useCustomValidity.mjs)\n- [`useMergedRef.mjs`](./useMergedRef.mjs)\n- [`useOnFocusReportValidity.mjs`](./useOnFocusReportValidity.mjs)\n- [`WordBreaks.mjs`](./WordBreaks.mjs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fdevice-agnostic-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fdevice-agnostic-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fdevice-agnostic-ui/lists"}