{"id":48811361,"url":"https://github.com/elycruz/atomic-material-js","last_synced_at":"2026-04-14T07:34:12.217Z","repository":{"id":344215103,"uuid":"1180959549","full_name":"elycruz/atomic-material-js","owner":"elycruz","description":"Atomic Material 3+ UI Library.","archived":false,"fork":false,"pushed_at":"2026-03-28T16:54:06.000Z","size":911,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-28T18:27:40.508Z","etag":null,"topics":["custom-elements","lit","material-3-expressive","material-components","material-design","nextjs","ui-library","ui-library-react","web-components"],"latest_commit_sha":null,"homepage":"https://elycruz.github.io/atomic-material-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elycruz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-13T15:43:07.000Z","updated_at":"2026-03-25T17:46:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/elycruz/atomic-material-js","commit_stats":null,"previous_names":["elycruz/atomic-material-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elycruz/atomic-material-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Fatomic-material-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Fatomic-material-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Fatomic-material-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Fatomic-material-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elycruz","download_url":"https://codeload.github.com/elycruz/atomic-material-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elycruz%2Fatomic-material-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31787072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"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":["custom-elements","lit","material-3-expressive","material-components","material-design","nextjs","ui-library","ui-library-react","web-components"],"created_at":"2026-04-14T07:34:09.950Z","updated_at":"2026-04-14T07:34:12.210Z","avatar_url":"https://github.com/elycruz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @atomic/ui (work-in-progress)\n\nAn atomic, CSS-first, user interface toolkit and library for building custom elements and user interfaces. Built on the web platform, [Material Design 3](https://m3.material.io/) specifications, and the [Lit](https://lit.dev/) library.\n\n## Monorepo Structure\n\nThis project is a monorepo managed with [pnpm workspaces](https://pnpm.io/workspaces) and [Turborepo](https://turbo.build/).\n\n| Package | Description |\n|---------|-------------|\n| [`packages/ui`](packages/ui) | Core UI library — web components and CSS/SCSS design system |\n| [`packages/ui-react`](packages/ui-react) | React wrappers for `@atomic/ui` components (via `@lit/react`) |\n| [`packages/ui-next`](packages/ui-next) | Next.js wrappers for `@atomic/ui` components |\n| [`apps/ui-site`](apps/ui-site) | Next.js demo and documentation site |\n\n## Web Components\n\n| Component | Status |\n|-----------|--------|\n| `ez-appbar` | ✅ Active |\n| `ez-base` | ✅ Active (base class) |\n| `ez-button-surface` | ✅ Active |\n| `ez-field` | ✅ Active |\n| `ez-ripple` | ✅ Active |\n| `ez-shape` | ✅ Active |\n| `ez-badge` | 🚧 Planned |\n| `ez-button` | 🚧 Planned |\n| `ez-button-group` | 🚧 Planned |\n| `ez-card` | 🚧 Planned |\n| `ez-dialog` | 🚧 Planned |\n| `ez-divider` | 🚧 Planned |\n| `ez-input` | 🚧 Planned |\n| `ez-list` | 🚧 Planned |\n| `ez-typography` | 🚧 Planned |\n\n## CSS / SCSS Modules\n\nThe library includes a Material Design 3 design system built with SCSS, covering:\n\n- **Base** — reset, typography, spacing, elevation, motion, shape, state layers\n- **Theming** — light, dark, and high-contrast Material Design 3 themes\n- **Components** — button (filled, outlined, tonal, text, FAB, icon), card, badge, dialog, divider, field, fieldset, input (checkbox, radio, switch, range, color), list, table, form, shape, focus ring, and more\n\nThe compiled CSS is output to `dist/css/index.min.css` as part of the build.\n\n## React / Next.js Wrappers\n\nBoth `@atomic/ui-react` and `@atomic/ui-next` provide framework-specific wrappers for the following components:\n\n- `ez-appbar`\n- `ez-button-surface`\n- `ez-field`\n- `ez-ripple`\n\n## Development\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) v24+\n- [pnpm](https://pnpm.io/installation#on-posix-systems) (package manager)\n- [Playwright](https://playwright.dev/) (for Storybook interaction tests)\n\n```sh\n# Install dependencies\npnpm install\n\n# Install Playwright browsers (required for tests)\npnpm exec playwright install --with-deps\n```\n\n### Scripts\n\n| Command | Description |\n|---------|-------------|\n| `pnpm dev` | Start development (Storybook + site) |\n| `pnpm build` | Build all packages |\n| `pnpm build:lib` | Build `packages/ui` only |\n| `pnpm test` | Run tests |\n| `pnpm lint` | Run ESLint and Stylelint |\n| `pnpm lintfix` | Run ESLint and Stylelint with auto-fix |\n| `pnpm storybook` | Start Storybook dev server |\n| `pnpm docs` | Generate TypeDoc documentation |\n| `pnpm run new:element` | Scaffold a new component |\n\nSee root [`package.json`](package.json) and individual package `package.json` files for all available scripts.\n\n### Creating a New Component\n\n```sh\npnpm run new:element\n```\n\nGenerated components follow the `ez-{name}` naming convention. See `ez-ripple` and `ez-field` for reference patterns.\n\n## License\n\n[LGPL-3.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felycruz%2Fatomic-material-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felycruz%2Fatomic-material-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felycruz%2Fatomic-material-js/lists"}