{"id":22793071,"url":"https://github.com/kripod/juvo","last_synced_at":"2026-03-08T06:31:27.536Z","repository":{"id":255749350,"uuid":"729654245","full_name":"kripod/juvo","owner":"kripod","description":"Balanced design system built around the Harmony color palette","archived":false,"fork":false,"pushed_at":"2026-03-06T05:57:31.000Z","size":829,"stargazers_count":5,"open_issues_count":11,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-06T09:59:43.753Z","etag":null,"topics":["accessibility","components","design-system","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://main--66da91848b4d64e86e78f939.chromatic.com/","language":"TypeScript","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/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"kripod"}},"created_at":"2023-12-09T22:58:56.000Z","updated_at":"2025-01-22T15:25:40.000Z","dependencies_parsed_at":"2024-09-07T00:45:34.786Z","dependency_job_id":"c0faefcf-b00b-4c83-9086-3132b2449527","html_url":"https://github.com/kripod/juvo","commit_stats":null,"previous_names":["kripod/juvo"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/kripod/juvo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fjuvo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fjuvo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fjuvo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fjuvo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/juvo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fjuvo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30247325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T05:41:50.788Z","status":"ssl_error","status_checked_at":"2026-03-08T05:41:39.075Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["accessibility","components","design-system","react","tailwindcss"],"created_at":"2024-12-12T03:17:54.130Z","updated_at":"2026-03-08T06:31:27.504Z","avatar_url":"https://github.com/kripod.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kripod"],"categories":[],"sub_categories":[],"readme":"# juvo\n\nBalanced design system built around the [Harmony color palette](https://github.com/evilmartians/harmony)\n\n[![npm version](https://img.shields.io/npm/v/juvo)](https://www.npmjs.com/package/juvo)\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/kripod)](https://github.com/sponsors/kripod)\n\n## Principles\n\n/ˈju.vo/ means to assist, serve and delight. Key characteristics of this project are:\n\n- [WCAG 2.2](https://www.w3.org/TR/WCAG22/) compliance\n- [React Server Components](https://react.dev/reference/rsc/server-components) support\n- [React Hook Form](https://github.com/react-hook-form/react-hook-form) integration via `ref` prop for controls\n- Single container element for top-level UI components, allowing `className` to be prepended\n- [Utility-first CSS with Tailwind](https://tailwindcss.com/docs/utility-first)\n\nSee also [inspirations](#inspirations) for more.\n\n## Usage\n\nFirstly, install the package:\n\n```sh\npnpm add juvo\n```\n\nOnce the accompanying styles are loaded as shown below, components can be imported and used like:\n\n```tsx\nimport { ButtonPrimary } from \"juvo\";\n\nexport default function App() {\n  return \u003cButtonPrimary\u003eClick me\u003c/ButtonPrimary\u003e;\n}\n```\n\nIf using TypeScript, consider adopting [`@total-typescript/tsconfig`](https://github.com/total-typescript/tsconfig). Package entry points may fail to resolve otherwise.\n\n### Standalone\n\nImport styles from your app’s root:\n\n```ts\nimport \"juvo/styles/standalone.css\";\n```\n\n### With Tailwind CSS (recommended)\n\n1. Add build-time dependencies:\n\n   ```sh\n   pnpm add -D tailwindcss postcss postcss-preset-env\n   ```\n\n2. Set up `.postcssrc.json` in your project root, making sure to disable all logical properties and values plugins:\n\n   ```json\n   {\n     \"plugins\": {\n       \"tailwindcss/nesting\": \"postcss-nesting\",\n       \"tailwindcss\": {},\n       \"postcss-preset-env\": {\n         \"features\": {\n           \"nesting-rules\": false,\n           \"float-clear-logical-values\": false,\n           \"logical-overflow\": false,\n           \"logical-overscroll-behavior\": false,\n           \"logical-properties-and-values\": false,\n           \"logical-resize\": false,\n           \"logical-viewport-units\": false\n         }\n       }\n     }\n   }\n   ```\n\n   - Extensive browser support is provided via [Browserslist](https://github.com/browserslist/browserslist)\n   - The [official CSS Nesting syntax](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) is used over the [Sass-like one](https://github.com/postcss/postcss-nested)\n\n3. Configure `tailwind.config.js` in your project root, amending `content` as per [Tailwind’s framework guides](https://tailwindcss.com/docs/installation/framework-guides):\n\n   ```ts\n   import * as path from \"node:path\";\n\n   import juvoPreset from \"juvo/tailwind-preset\";\n\n   /** @type {import(\"tailwindcss\").Config} */\n   export default {\n     content: [\n       \"./src/**/*.{js,jsx,ts,tsx,mdx}\",\n       path.join(path.dirname(require.resolve(\"juvo\")), \"**/*.js\"),\n     ],\n     presets: [juvoPreset],\n   };\n   ```\n\n   - Theme-dependent `color` tokens are exposed under the `ui-` prefix\n     - To switch between color themes, apply `.theme-dark` and `.theme-light` classes as-is or through the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives#apply):\n       ```css\n       @media (prefers-color-scheme: dark) {\n         html {\n           @apply theme-dark;\n         }\n       }\n       ```\n   - Transition timings are set to the `ease-out` function of Tailwind by default\n\n4. Add `src/styles.css` and import it from your app’s root:\n\n   ```css\n   @import \"tailwindcss/base\";\n   @import \"juvo/styles/base.css\";\n\n   @import \"tailwindcss/components\";\n\n   @import \"tailwindcss/utilities\";\n   ```\n\n## Inspirations\n\n### Philosophy\n\n- [The “everything bagel” of components](https://dio.la/article/the-everything-bagel-of-components) — Dani Guardiola\n- [Reach UI Philosophy](https://gist.github.com/ryanflorence/e5c794e6093d16a69fa88d2112a292f7) — Ryan Florence\n- [Margin considered harmful](https://mxstbr.com/thoughts/margin) — Max Stoiber\n- [Contextual defaults](https://x.com/markdalgleish/status/1291180726218563590) — Mark Dalgleish\n- [Everything You Know About Web Design Just Changed](https://www.youtube.com/watch?v=jBwBACbRuGY) — Jen Simmons\n\n### Guidelines\n\n- [Web Interface Guidelines](https://interfaces.rauno.me/) — Rauno Freiberg\n- [Expressive React Component APIs with Discriminated Unions](https://blog.andrewbran.ch/expressive-react-component-apis-with-discriminated-unions/) — Andrew Branch\n\n### Accessibility\n\n- [HTML: The Inaccessible Parts](https://daverupert.com/2020/02/html-the-inaccessible-parts/) — Dave Rupert\n- [Using CSS to Enforce Accessibility](https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html) — Adrian Roselli\n- [HTML Accessibility Blog](https://html5accessibility.com/stuff/) — Steve Faulkner\n- [Accessiblity Support](https://a11ysupport.io/) — Michael Fairchild\n\n### Design\n\n- [Material Design](https://m3.material.io/) — Google\n- [Visual design rules you can safely follow every time](https://www.anthonyhobday.com/sideprojects/saferules/) — Anthony Hobday\n- [Choosing the correct default easing for Popmotion](https://popmotion.io/blog/20170703-choosing-a-default-easing-for-popmotion/) — Matt Perry\n- [Practical UI](https://www.practical-ui.com/) — Adham Dannaway\n\n### Examples\n\n- [The Component Gallery](https://component.gallery/) — Iain Bean\n- [UI Playbook](https://uiplaybook.dev/) — Rauno Freiberg\n- [UI \u0026 UX Design Tips](https://www.uidesign.tips/) — Jim Raptis\n\n## Contributing\n\nPlease refer to the [contribution guidelines](./CONTRIBUTING.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fjuvo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Fjuvo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fjuvo/lists"}