{"id":19113544,"url":"https://github.com/adiled/web3-elements","last_synced_at":"2026-04-07T08:01:34.110Z","repository":{"id":47119647,"uuid":"473879135","full_name":"adiled/web3-elements","owner":"adiled","description":":bricks: Headless web UI elements for Web3 dApps — with batteries [Slow Experiment]","archived":false,"fork":false,"pushed_at":"2022-07-20T07:46:49.000Z","size":563,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-27T09:05:05.233Z","etag":null,"topics":["dapp","dapps","dapps-development","headless","headless-ui","headlessui","javascript","reactjs","solidjs","vuejs","web3","web3-dapp","web3ui","webcomponents"],"latest_commit_sha":null,"homepage":"","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/adiled.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}},"created_at":"2022-03-25T05:23:36.000Z","updated_at":"2023-06-29T04:58:16.000Z","dependencies_parsed_at":"2022-09-26T20:53:13.794Z","dependency_job_id":null,"html_url":"https://github.com/adiled/web3-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/adiled/web3-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiled%2Fweb3-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiled%2Fweb3-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiled%2Fweb3-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiled%2Fweb3-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adiled","download_url":"https://codeload.github.com/adiled/web3-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiled%2Fweb3-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31504897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["dapp","dapps","dapps-development","headless","headless-ui","headlessui","javascript","reactjs","solidjs","vuejs","web3","web3-dapp","web3ui","webcomponents"],"created_at":"2024-11-09T04:36:35.351Z","updated_at":"2026-04-07T08:01:34.090Z","avatar_url":"https://github.com/adiled.png","language":"TypeScript","readme":"The ever-growing p2p ecosystem around blockchain-based protocols leaves the challenge of standardization open. The UI landscape is similarly in disarray. It may be argued that that's a good thing given \"decentralization\", however, a case can be made for robust UI primitives for needs such as addressing and perhaps more that establish with time.\n\n## Scope\n\n`web3-elements` is to be designed around specs. Core elements are to be distinctly atomic and implemented judicially. Compositions from these elements may be created outside the core, yet within the package, however only such composite elements that are expected to work similarly across web3 UIs.\n\nTo be inline with the scope, core elements have to be as lightweight as possible. Present consideration for building is through web components, however controversial, that is the only balanced solution. Libraries that are evaluated include SvelteJS, Lit, and SolidJS for compilation to web components. SolidJS is both impressive in its proposition, and a winner in benchmarks, and might be the choice.\n\n## How this is useful\n\nPrimitive core and composite elements serve just like expansive DOM elements of HTML5. As more traction goes towards UI libraries and their implementations in frontend frameworks on the view layer, web3 elements may be utilized. This may be hard to push to larger adoption due to the smoke that surrounds \"web components\", but will remain an option for those realizing that it opens up development web3-native frontends by anyone without prejudice founded in tribal nature of early web3.\n\n## Structure\n\n`web3-elements` is a scoped monorepo packaging: primitive elements as web components compiled with SolidJS, while wrapped and higher order components built in react and vue.\n\n## Elements: early ideas\n\n### Core\n\n- Address field and display (user and contract support)\n\n### Wallet-Network Handling\n\n- Wallet provider multi-select\n- Address / Network Switcher\n\n### Transactions\n\n- Bridges\n- Swaps\n- Transfers\n\n## Thoughts on metadata\n\nElements are to binded with data, arbitrary at times, making certain manifests a dependency. If this wasn't a reality of building frontends for web3, `web3-elements` wouldn't have been a challenge at all.\n\nA relevant overview blog: https://www.thinktecture.com/en/web-components/dependency-injection/\n\nAbout the data to be injected, an intuitive workflow would be to model the types, then compile data from various sources, transform, hydrate static manifests, then publish in the repo, as well as distribute across decentralized storage options.\n\nThe manifests can be anywhere from very-slow to slow-changing.\n\n## Need for a mental framework to model primitives\n\nThe purpose of primitives is to house the minimum of traits and qualities, to be consumed by reactive components, that provide styling, and data. Understanding the DX with existing libraries is crucial.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiled%2Fweb3-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadiled%2Fweb3-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiled%2Fweb3-elements/lists"}